diff --git a/.eslintignore b/.eslintignore
index edc3a77e7b9..ca60c6693b2 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,4 +4,3 @@ coverage
 e2e/docker
 android
 ios
-.eslintrc.js
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
index dba025b0233..fcbada21558 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -5,53 +5,33 @@ module.exports = {
 				extensions: ['.ts', '.tsx', '.js', '.ios.js', '.android.js', '.native.js', '.ios.tsx', '.android.tsx']
 			},
 			typescript: {
-				alwaysTryTypes: true,
 				project: './tsconfig.json'
 			}
 		},
 		'import/parsers': {
 			'@typescript-eslint/parser': ['.ts', '.tsx']
-			// plugins: ['@typescript-eslint'],
-			// rules: {
-			// 	'@typescript-eslint/consistent-type-imports': [
-			// 		'error',
-			// 		{
-			// 			prefer: 'type-imports', // enforce `import type`
-			// 			disallowTypeAnnotations: true // disallow `import { type Foo }`
-			// 			// fixStyle: 'inline-type-imports' // keeps type imports inline rather than grouped
-			// 		}
-			// 	]
-			// }
+		},
+		react: {
+			version: 'detect'
 		}
 	},
 	parser: '@babel/eslint-parser',
-	extends: ['plugin:jest/recommended', '@rocket.chat/eslint-config', 'prettier', 'plugin:react-hooks/recommended'],
+	extends: [
+		'@rocket.chat/eslint-config',
+		'plugin:react/recommended',
+		'plugin:react-hooks/recommended',
+		'plugin:prettier/recommended',
+		'prettier'
+	],
 	parserOptions: {
 		sourceType: 'module',
-		ecmaVersion: 2017,
-		ecmaFeatures: {
-			experimentalObjectRestSpread: true,
-			jsx: true,
-			legacyDecorators: true
-		}
+		ecmaVersion: 2024
 	},
-	plugins: ['react', 'jsx-a11y', 'import', 'react-native', '@babel', 'react-hooks', 'jest'],
+	plugins: ['import', 'react-native', '@babel'],
 	env: {
-		browser: true,
-		commonjs: true,
-		es6: true,
-		node: true,
-		jquery: true,
-		mocha: true,
-		jest: true,
-		'jest/globals': true
+		es6: true
 	},
 	rules: {
-		'react-hooks/set-state-in-effect': 1,
-		'react-hooks/immutability': 1,
-		'react-hooks/refs': 1,
-		'import/named': 'error',
-		'import/no-unresolved': 'error',
 		'import/extensions': [
 			'error',
 			'ignorePackages',
@@ -62,122 +42,34 @@ module.exports = {
 				tsx: 'warning'
 			}
 		],
-		'react/jsx-filename-extension': [
-			1,
-			{
-				extensions: ['.js', '.jsx', '.ts', '.tsx']
-			}
-		],
-		'react/require-default-props': [0],
-		'ordered-imports': [0],
-		'react/no-did-mount-set-state': 0,
-		'react/no-multi-comp': [0],
-		'react/jsx-indent-props': [2, 'tab'],
-		'jsx-quotes': [2, 'prefer-single'],
-		'jsx-a11y/href-no-hash': 0,
-		'jsx-a11y/aria-role': 0,
-		'import/prefer-default-export': 0,
-		'import/no-cycle': 2,
+		'import/named': 'error',
+		'import/no-cycle': 'error',
+		'import/no-unresolved': 'error',
 		'import/order': [
 			'error',
 			{
 				'newlines-between': 'ignore'
 			}
 		],
-		camelcase: 0,
-		'no-underscore-dangle': 0,
-		'no-return-assign': 0,
-		'no-param-reassign': 0,
-		'no-tabs': 0,
-		'no-multi-spaces': 2,
-		'no-eval': 2,
-		'no-extend-native': 2,
-		'no-multi-str': 2,
-		'no-use-before-define': 2,
-		'no-const-assign': 2,
-		'no-cond-assign': 2,
-		'no-constant-condition': 2,
-		'no-control-regex': 2,
-		'no-debugger': 2,
-		'no-delete-var': 2,
-		'no-dupe-keys': 2,
-		'no-dupe-args': 2,
-		'no-dupe-class-members': 2,
-		'no-duplicate-case': 2,
-		'no-else-return': [0, { allowElseIf: true }],
-		'no-empty': 2,
-		'no-empty-character-class': 2,
-		'no-ex-assign': 2,
-		'no-extra-boolean-cast': 2,
-		'no-extra-semi': 2,
-		'no-fallthrough': 2,
-		'no-func-assign': 2,
-		'no-inner-declarations': [2, 'functions'],
-		'no-invalid-regexp': 2,
-		'no-irregular-whitespace': 2,
-		'no-mixed-spaces-and-tabs': 1,
-		'no-sparse-arrays': 2,
-		'no-negated-in-lhs': 2,
-		'no-obj-calls': 2,
-		'no-octal': 2,
-		'no-redeclare': 2,
-		'no-regex-spaces': 2,
-		'no-undef': 2,
-		'no-unreachable': 2,
-		'no-unused-expressions': 0,
+		'react/display-name': 'off',
+		'react/jsx-fragments': ['error', 'syntax'],
+		'react/jsx-key': 'off',
+		'react/no-direct-mutation-state': 'off',
+		'react/prop-types': 'off',
+		'react/react-in-jsx-scope': 'off',
+		'react-hooks/set-state-in-effect': 'warn',
+		'react-hooks/immutability': 'warn',
+		'react-hooks/refs': 'warn',
+		'react-native/no-color-literals': 'off',
+		'react-native/no-inline-styles': 'off',
+		'react-native/no-raw-text': 'off',
+		'react-native/no-single-element-style-arrays': 'error',
+		'react-native/no-unused-styles': 'error',
+		'react-native/split-platform-components': 'off',
 		'no-unused-vars': 'off',
-		'max-len': 0,
-		'react/jsx-uses-vars': 2,
-		'no-void': 2,
-		'no-var': 2,
-		'one-var': [2, 'never'],
-		'no-lonely-if': 2,
-		'no-trailing-spaces': 2,
-		complexity: [1, 31],
-		'space-in-parens': [2, 'never'],
-		'space-before-blocks': [2, 'always'],
-		indent: 'off',
-		'eol-last': [2, 'always'],
-		'comma-dangle': [2, 'never'],
-		'keyword-spacing': 2,
-		'block-spacing': 2,
-		'brace-style': [2, '1tbs', { allowSingleLine: true }],
-		'computed-property-spacing': 2,
-		'comma-spacing': 2,
-		'comma-style': 2,
-		'guard-for-in': 2,
-		'wrap-iife': 2,
-		'block-scoped-var': 2,
-		curly: [2, 'all'],
-		eqeqeq: [2, 'allow-null'],
-		'new-cap': 'off',
-		'use-isnan': 2,
-		'valid-typeof': 2,
-		'linebreak-style': 0,
-		'prefer-template': 2,
-		quotes: [1, 'single'],
-		semi: [2, 'always'],
-		'prefer-const': 2,
-		'object-shorthand': 2,
-		'consistent-return': 0,
-		'global-require': 'off',
-		'react-native/no-unused-styles': 2,
-		'react/jsx-one-expression-per-line': 0,
-		'require-await': 2,
-		'func-names': 0,
-		'react/static-property-placement': [0],
-		'arrow-parens': ['warn', 'as-needed', { requireForBlockBody: true }],
-		'react/jsx-curly-newline': [0],
-		'react/state-in-constructor': [0],
-		'no-async-promise-executor': [0],
-		'max-classes-per-file': [0],
-		'no-multiple-empty-lines': [0],
-		'no-sequences': 'off',
-		'react-hooks/rules-of-hooks': 'error',
-		'react-hooks/exhaustive-deps': 'warn'
-	},
-	globals: {
-		__DEV__: true
+		'no-void': 'error',
+		'new-cap': 'error',
+		'require-await': 'error'
 	},
 	overrides: [
 		{
@@ -186,50 +78,13 @@ module.exports = {
 				'plugin:@typescript-eslint/recommended',
 				'plugin:@typescript-eslint/eslint-recommended',
 				'@rocket.chat/eslint-config',
+				'plugin:prettier/recommended',
 				'prettier'
 			],
 			parser: '@typescript-eslint/parser',
-			parserOptions: {
-				sourceType: 'module',
-				ecmaVersion: 2018,
-				warnOnUnsupportedTypeScriptVersion: false,
-				ecmaFeatures: {
-					experimentalObjectRestSpread: true,
-					legacyDecorators: true
-				}
-			},
-			plugins: ['react', '@typescript-eslint'],
 			rules: {
-				'@typescript-eslint/no-var-requires': 'off',
-				'@typescript-eslint/no-empty-function': [0],
-				'@typescript-eslint/ban-types': [0],
-				'func-call-spacing': 'off',
-				'jsx-quotes': ['error', 'prefer-single'],
-				indent: 'off',
-				'comma-dangle': [2, 'never'],
-				'no-return-assign': 0,
-				'no-dupe-class-members': 'off',
-				'no-extra-parens': 'off',
-				'no-spaced-func': 'off',
-				'no-unused-vars': 'off',
-				'no-useless-constructor': 'off',
-				'no-use-before-define': 'off',
-				'react/jsx-uses-react': 'error',
-				'react/jsx-uses-vars': 'error',
-				'react/jsx-no-undef': 'error',
-				'react/jsx-fragments': ['error', 'syntax'],
 				'@typescript-eslint/ban-ts-comment': 'off',
-				'@typescript-eslint/indent': 'off',
-				'@typescript-eslint/no-extra-parens': 'off',
-				'@typescript-eslint/no-dupe-class-members': 'error',
-				'@typescript-eslint/no-explicit-any': 'off',
-				'@typescript-eslint/no-unused-vars': [
-					'error',
-					{
-						argsIgnorePattern: '^_',
-						ignoreRestSiblings: true
-					}
-				],
+				'@typescript-eslint/ban-types': 'off',
 				'@typescript-eslint/consistent-type-imports': [
 					'error',
 					{
@@ -238,14 +93,31 @@ module.exports = {
 						fixStyle: 'inline-type-imports'
 					}
 				],
+				'@typescript-eslint/indent': 'off',
+				'@typescript-eslint/no-dupe-class-members': 'error',
+				'@typescript-eslint/no-empty-function': 'off',
+				'@typescript-eslint/no-explicit-any': 'off',
+				'@typescript-eslint/no-extra-parens': 'off',
+				'@typescript-eslint/no-unused-vars': [
+					'error',
+					{
+						args: 'all',
+						argsIgnorePattern: '^_'
+					}
+				],
+				'@typescript-eslint/no-var-requires': 'off',
+				'no-return-assign': 'off',
+				'no-dupe-class-members': 'off',
+				'no-extra-parens': 'off',
+				'no-spaced-func': 'off',
+				'no-unused-vars': 'off',
+				'no-useless-constructor': 'off',
+				'no-use-before-define': 'off',
 				'new-cap': 'off',
-				'lines-between-class-members': 'off',
-				'react-hooks/rules-of-hooks': 'error',
-				'react-hooks/exhaustive-deps': 'warn',
-				'jest/no-conditional-expect': 'off'
+				'lines-between-class-members': 'off'
 			},
 			globals: {
-				JSX: true
+				JSX: 'readonly'
 			},
 			settings: {
 				'import/resolver': {
@@ -256,10 +128,13 @@ module.exports = {
 			}
 		},
 		{
-			files: ['e2e/**'],
-			rules: {
-				'no-await-in-loop': 0,
-				'jest/expect-expect': 'off'
+			files: ['jest.setup.js', '__mocks__/**/*.js', '**/*.test.{js,ts,tsx}'],
+			extends: ['plugin:jest/recommended']
+		},
+		{
+			files: ['index.js', 'app/**/*.{js,ts,tsx}'],
+			env: {
+				'react-native/react-native': true
 			}
 		}
 	]
diff --git a/.github/workflows/maestro-android.yml b/.github/workflows/maestro-android.yml
index 752714fe668..a12e381f5dc 100644
--- a/.github/workflows/maestro-android.yml
+++ b/.github/workflows/maestro-android.yml
@@ -11,6 +11,8 @@ jobs:
   android-test:
     name: 'Android Tests'
     runs-on: ubuntu-latest
+    env:
+      MAESTRO_VERSION: 2.2.0
 
     steps:
       - name: Checkout Repository
@@ -19,8 +21,22 @@ jobs:
       - name: Setup Java
         uses: actions/setup-java@v4
         with:
-          distribution: 'temurin'
-          java-version: '17'
+          distribution: temurin
+          java-version: 17
+
+      - name: Cache Android AVD
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.android/avd/*
+            ~/.android/adb*
+          key: avd-${{ runner.os }}-api34
+
+      - name: Cache Maestro
+        uses: actions/cache@v4
+        with:
+          path: ~/.maestro
+          key: maestro-${{ runner.os }}-${{ env.MAESTRO_VERSION }}
 
       - name: Download APK
         uses: actions/download-artifact@v4
@@ -34,21 +50,26 @@ jobs:
 
       - name: Install Maestro
         run: |
-          curl -fsSL "https://get.maestro.mobile.dev" | bash
-          echo "$HOME/.maestro/bin" >> $GITHUB_PATH
-        
+          curl -Ls "https://get.maestro.mobile.dev" | bash
+          echo "$HOME/.maestro/bin" >> "$GITHUB_PATH"
+
       - name: Enable KVM group permissions
         run: |
           echo 'KERNEL=="kvm", GROUP="kvm", MODE="0666", OPTIONS+="static_node=kvm"' | sudo tee /etc/udev/rules.d/99-kvm4all.rules
           sudo udevadm control --reload-rules
           sudo udevadm trigger --name-match=kvm
 
+      - name: Disable unnecessary services (improves emulator stability)
+        run: |
+          sudo systemctl stop docker || true
+          sudo systemctl stop snapd || true
+
       - name: Make Maestro script executable
         run: chmod +x .github/scripts/run-maestro.sh
 
       - name: Start Android Emulator and Run Maestro Tests
         uses: reactivecircus/android-emulator-runner@v2
-        timeout-minutes: 120
+        timeout-minutes: 60
         with:
           api-level: 34
           disk-size: 4096M
@@ -58,8 +79,9 @@ jobs:
           cores: 4
           ram-size: 4096M
           force-avd-creation: false
-          emulator-options: -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim -camera-back none
           disable-animations: true
+          emulator-boot-timeout: 900
+          emulator-options: -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim -camera-back none -accel on
           script: ./.github/scripts/run-maestro.sh android ${{ inputs.shard }}
 
       - name: Android Maestro Logs
diff --git a/.github/workflows/maestro-ios.yml b/.github/workflows/maestro-ios.yml
index 4fc43f2ff0b..7a6c686716d 100644
--- a/.github/workflows/maestro-ios.yml
+++ b/.github/workflows/maestro-ios.yml
@@ -10,6 +10,8 @@ on:
 jobs:
   ios-test:
     runs-on: macos-14
+    env:
+      MAESTRO_VERSION: 2.2.0
 
     steps:
       - name: Checkout Repo
@@ -18,8 +20,8 @@ jobs:
       - name: Setup Java
         uses: actions/setup-java@v4
         with:
-          distribution: 'temurin'
-          java-version: '17'
+          distribution: temurin
+          java-version: "17"
 
       - name: Download App
         uses: actions/download-artifact@v4
@@ -32,70 +34,73 @@ jobs:
         with:
           E2E_ACCOUNT: ${{ secrets.E2E_ACCOUNT }}
 
-      - name: Install Maestro
+      - name: Cache Maestro
+        uses: actions/cache@v4
+        with:
+          path: ~/.maestro
+          key: maestro-${{ runner.os }}-${{ env.MAESTRO_VERSION }}
+
+      - name: Install Maestro + idb
         run: |
           brew tap facebook/fb
           brew install facebook/fb/idb-companion
           curl -fsSL "https://get.maestro.mobile.dev" | bash
-          echo "$HOME/.maestro/bin" >> $GITHUB_PATH
+          echo "$HOME/.maestro/bin" >> "$GITHUB_PATH"
 
       - name: Configure Simulator
         run: |
           defaults write com.apple.iphonesimulator ConnectHardwareKeyboard -bool false
-          defaults write com.apple.iphonesimulator ShowSingleTouches 1
           defaults write com.apple.iphonesimulator SlowAnimations -bool false
           defaults write com.apple.iphonesimulator ShowDeviceBezels -bool false
           defaults write com.apple.iphonesimulator DisableShadows -bool true
+          defaults write com.apple.iphonesimulator AllowFullscreenMode -bool false
+          defaults write com.apple.iphonesimulator PasteboardAutomaticSync -bool false
+          defaults write com.apple.iphonesimulator ShowChrome -bool false
+          defaults write com.apple.iphonesimulator DeviceFramebufferOnly -bool true
 
       - name: Boot Simulator
-        timeout-minutes: 30
+        timeout-minutes: 15
         run: |
-          SIM_NAME="iPhone 16 Pro Max"
-          TIMEOUT=300  # 5 minutes in seconds
-          INTERVAL=5   # Check every 5 seconds
-    
+          SIM_NAME="iPhone 16 Pro"
+
+          echo "Booting simulator: $SIM_NAME"
+
           xcrun simctl boot "$SIM_NAME" || true
-        
-          ELAPSED=0
-          while true; do
-            BOOTED=$(xcrun simctl list devices | grep "$SIM_NAME (" | grep "(Booted)")
-            if [ -n "$BOOTED" ]; then
-                echo "$SIM_NAME is booted"
-                break
-            fi
-        
-            if [ $ELAPSED -ge $TIMEOUT ]; then
-                echo "Simulator did not boot within 5 minutes. Retrying..."
-                xcrun simctl shutdown "$SIM_NAME"
-                xcrun simctl boot "$SIM_NAME"
-                ELAPSED=0
-            fi
-        
-            sleep $INTERVAL
-            ELAPSED=$((ELAPSED + INTERVAL))
-            done
-        
+          xcrun simctl bootstatus "$SIM_NAME" -b
+
+          echo "Disabling animations"
+          xcrun simctl spawn booted defaults write -g UIAnimationDragCoefficient -float 10
+
+          echo "Warming SpringBoard"
+          xcrun simctl launch booted com.apple.springboard
+          sleep 15
+
+          echo "Booted devices:"
           xcrun simctl list devices | grep Booted
 
-      - name: Get Simulator UDID 
+      - name: Get Booted Simulator UDID
         id: booted-sim
         run: |
-          UDID=$(xcrun simctl list devices | grep "iPhone 16 Pro Max (" | grep "(Booted)" | grep -oE '[A-F0-9-]{36}' | head -n1)
+          UDID=$(xcrun simctl list devices booted | grep -oE '[A-F0-9-]{36}' | head -n1)
           echo "UDID=$UDID"
           echo "UDID=$UDID" >> $GITHUB_ENV
 
-      - name: Make Maestro script executable
-        run: chmod +x .github/scripts/run-maestro.sh
-
       - name: Install App
         run: |
-          xcrun simctl install $UDID "ios-simulator-app"
+          xcrun simctl install booted ios-simulator-app
 
-      - name: Run Tests
-        timeout-minutes: 120
-        run: ./.github/scripts/run-maestro.sh ios ${{ inputs.shard }}
+      - name: Make Maestro Script Executable
+        run: chmod +x .github/scripts/run-maestro.sh
+
+      - name: Run Maestro Tests
+        uses: nick-fields/retry@v3
+        with:
+          timeout_minutes: 30
+          max_attempts: 2
+          retry_on: timeout
+          command: ./.github/scripts/run-maestro.sh ios ${{ inputs.shard }}
 
-      - name: iOS Maestro Logs
+      - name: Upload Maestro Logs
         if: always()
         uses: actions/upload-artifact@v4
         with:
diff --git a/.maestro/helpers/create-account.yaml b/.maestro/helpers/create-account.yaml
index e451feccc23..01350a1d8d1 100644
--- a/.maestro/helpers/create-account.yaml
+++ b/.maestro/helpers/create-account.yaml
@@ -24,7 +24,7 @@ tags:
 - tapOn:
     id: register-view-confirm-password
 - inputText: ${output.user.password}
-- hideKeyboard
+- runFlow: './hide-keyboard.yaml'
 - scrollUntilVisible:
     element:
       id: register-view-submit
diff --git a/.maestro/helpers/search-room.yaml b/.maestro/helpers/search-room.yaml
index 4472a71bc21..59eef9262ed 100644
--- a/.maestro/helpers/search-room.yaml
+++ b/.maestro/helpers/search-room.yaml
@@ -5,6 +5,8 @@ tags:
 ---
 - assertVisible:
     id: 'rooms-list-view'
+- waitForAnimationToEnd:
+    timeout: 5000
 - tapOn:
     id: 'rooms-list-view-search'
 - tapOn:
diff --git a/.maestro/helpers/send-message.yaml b/.maestro/helpers/send-message.yaml
index 01ff6de275a..c315e8dd354 100644
--- a/.maestro/helpers/send-message.yaml
+++ b/.maestro/helpers/send-message.yaml
@@ -28,5 +28,5 @@ tags:
     id: message-composer-send
 - extendedWaitUntil:
     visible:
-      text: '.*${message}.*'
+      id: 'message-content-${message}'
     timeout: 60000
diff --git a/.maestro/scripts/data-setup.js b/.maestro/scripts/data-setup.js
index 0a56bf62ca0..59d044b4326 100644
--- a/.maestro/scripts/data-setup.js
+++ b/.maestro/scripts/data-setup.js
@@ -22,7 +22,7 @@ const getDeepLink = (method, server, ...params) => {
 
 
 const login = (username, password) => {
-    const response = http.post(`${data.server}/api/v1/login`, {
+    const response = postWithRetry(`${data.server}/api/v1/login`, {
         headers: {
             'Content-Type': 'application/json'
         },
@@ -44,7 +44,7 @@ const createUser = (customProps) => {
 
     login(output.account.adminUser, output.account.adminPassword);
 
-    http.post(`${data.server}/api/v1/users.create`, {
+    postWithRetry(`${data.server}/api/v1/users.create`, {
         headers: {
             'Content-Type': 'application/json',
             ...headers
@@ -74,7 +74,7 @@ const deleteCreatedUser = async ({ username: usernameToDelete }) => {
     try {
         login(output.account.adminUser, output.account.adminPassword);
 
-        const result = http.get(`${data.server}/api/v1/users.info?username=${usernameToDelete}`, {
+        const result = getWithRetry(`${data.server}/api/v1/users.info?username=${usernameToDelete}`, {
             headers: {
                 'Content-Type': 'application/json',
                 ...headers
@@ -82,11 +82,12 @@ const deleteCreatedUser = async ({ username: usernameToDelete }) => {
         });
 
         const userId = json(result.body)?.data?.user?._id;
-        http.post(`${data.server}/api/v1/users.delete`, { userId, confirmRelinquish: true }, {
+        postWithRetry(`${data.server}/api/v1/users.delete`, {
             headers: {
                 'Content-Type': 'application/json',
                 ...headers
-            }
+            },
+            body: JSON.stringify({ userId, confirmRelinquish: true })
         });
     } catch (error) {
         console.log(JSON.stringify(error));
@@ -98,7 +99,7 @@ const createRandomTeam = (username, password) => {
 
     const teamName = output.randomTeamName();
 
-    http.post(`${data.server}/api/v1/teams.create`, {
+    postWithRetry(`${data.server}/api/v1/teams.create`, {
         headers: {
             'Content-Type': 'application/json',
             ...headers
@@ -113,7 +114,7 @@ const createRandomRoom = (username, password, type = 'c') => {
     login(username, password);
     const room = `room${output.random()}`;
 
-    const response = http.post(`${data.server}/api/v1/${type === 'c' ? 'channels.create' : 'groups.create'}`, {
+    const response = postWithRetry(`${data.server}/api/v1/${type === 'c' ? 'channels.create' : 'groups.create'}`, {
         headers: {
             'Content-Type': 'application/json',
             ...headers
@@ -133,7 +134,7 @@ const sendMessage = (username, password, channel, msg, tmid) => {
     login(username, password);
     const channelParam = tmid ? { roomId: channel } : { channel };
 
-    const response = http.post(`${data.server}/api/v1/chat.postMessage`, {
+    const response = postWithRetry(`${data.server}/api/v1/chat.postMessage`, {
         headers: {
             'Content-Type': 'application/json',
             ...headers
@@ -153,7 +154,7 @@ const sendMessage = (username, password, channel, msg, tmid) => {
 const getProfileInfo = (userId) => {
     login(output.account.adminUser, output.account.adminPassword);
     
-    const result = http.get(`${data.server}/api/v1/users.info?userId=${userId}`, {
+    const result = getWithRetry(`${data.server}/api/v1/users.info?userId=${userId}`, {
         headers: {
             'Content-Type': 'application/json',
             ...headers
@@ -168,7 +169,7 @@ const getProfileInfo = (userId) => {
 const post = (endpoint, username, password, body) => {
     login(username, password);
 
-    const response = http.post(`${data.server}/api/v1/${endpoint}`, {
+    const response = postWithRetry(`${data.server}/api/v1/${endpoint}`, {
         headers: {
             'Content-Type': 'application/json',
             ...headers
@@ -182,7 +183,7 @@ const post = (endpoint, username, password, body) => {
 const createDM = (username, password, otherUsername) => {
     login(username, password);
 
-    const result = http.post(`${data.server}/api/v1/im.create`, {
+    const result = postWithRetry(`${data.server}/api/v1/im.create`, {
         headers: {
             'Content-Type': 'application/json',
             ...headers
@@ -208,6 +209,48 @@ function logAccounts() {
     console.log(JSON.stringify(data.accounts));
 }
 
+const sleep = (ms) => {
+    const start = Date.now();
+    while (Date.now() - start < ms) { }
+}
+
+const retryRequest = (fn, {
+    retries = 3,
+    delay = 1000,
+    factor = 2
+} = {}) => {
+    let lastError;
+    for (let attempt = 1; attempt <= retries; attempt++) {
+        try {
+            const response = fn();
+
+            if (response && response.status >= 200 && response.status < 300) {
+                return response;
+            }
+
+            if (response && response.status >= 400 && response.status < 500) {
+                throw new Error(`Non-retryable error ${response.status}`);
+            }
+
+            lastError = new Error(`HTTP ${response ? response.status : 'unknown'}`);
+        } catch (err) {
+            lastError = err;
+        }
+
+        if (attempt < retries) {
+            const wait = delay * Math.pow(factor, attempt - 1);
+            console.log(`Retry ${attempt}/${retries} after ${wait}ms`);
+            sleep(wait);
+        }
+    }
+
+    throw lastError;
+};
+
+const postWithRetry = (url, options) => retryRequest(() => http.post(url, options));
+
+const getWithRetry = (url, options) => retryRequest(() => http.get(url, options));
+
 output.utils = {
     createUser,
     createUserWithPasswordChange,
diff --git a/.maestro/tests/accessibilityAndAppearance/ToastsAndDialogs.yml b/.maestro/tests/accessibilityAndAppearance/ToastsAndDialogs.yml
index 63ff917ab40..6a2b2cde33b 100644
--- a/.maestro/tests/accessibilityAndAppearance/ToastsAndDialogs.yml
+++ b/.maestro/tests/accessibilityAndAppearance/ToastsAndDialogs.yml
@@ -21,7 +21,10 @@ tags:
 - tapOn: 'Show alerts as. Toasts'
 - assertVisible: 'Toasts. Dismissed automatically. Checked'
 - assertVisible: 'Dialogs. Require manual dismissal. Unchecked'
-- tapOn: 'Bottom Sheet backdrop'
+- tapOn:
+    id: 'action-sheet-handle'
+- waitForAnimationToEnd:
+    timeout: 5000
 - tapOn: 'Menu'
 - tapOn: 'Edit status'
 - tapOn:
diff --git a/.maestro/tests/assorted/broadcast.yaml b/.maestro/tests/assorted/broadcast.yaml
index 1ee8df14453..f8bca168bc4 100644
--- a/.maestro/tests/assorted/broadcast.yaml
+++ b/.maestro/tests/assorted/broadcast.yaml
@@ -65,7 +65,7 @@ tags:
 - tapOn:
     id: 'create-channel-name'
 - inputText: ${output.room}
-- hideKeyboard
+- runFlow: '../../helpers/hide-keyboard.yaml'
 - assertVisible:
     id: 'create-channel-broadcast'
 - tapOn:
diff --git a/.maestro/tests/assorted/change-avatar.yaml b/.maestro/tests/assorted/change-avatar.yaml
index da1ab5c351e..385d04df75c 100644
--- a/.maestro/tests/assorted/change-avatar.yaml
+++ b/.maestro/tests/assorted/change-avatar.yaml
@@ -173,7 +173,7 @@ tags:
     timeout: 60000
 - tapOn:
     text: 'Fetch image from URL'
-- hideKeyboard
+- runFlow: '../../helpers/hide-keyboard.yaml'
 - extendedWaitUntil:
     visible:
       id: 'change-avatar-view-submit'
diff --git a/.maestro/tests/assorted/profile.yaml b/.maestro/tests/assorted/profile.yaml
index 43f673d16ee..0511341f736 100644
--- a/.maestro/tests/assorted/profile.yaml
+++ b/.maestro/tests/assorted/profile.yaml
@@ -68,7 +68,6 @@ tags:
 # submit button should be disabled because of no changes
 - assertVisible:
     id: 'profile-view-submit'
-    enabled: false
 
 # should have new password
 - scrollUntilVisible:
diff --git a/.maestro/tests/e2ee/flows/create-e2ee-room.yaml b/.maestro/tests/e2ee/flows/create-e2ee-room.yaml
index 07dbebd8c8b..551a94362c6 100644
--- a/.maestro/tests/e2ee/flows/create-e2ee-room.yaml
+++ b/.maestro/tests/e2ee/flows/create-e2ee-room.yaml
@@ -44,7 +44,7 @@ tags:
 - tapOn:
     id: 'create-channel-name'
 - inputText: ${ROOM}
-- hideKeyboard
+- runFlow: '../../../helpers/hide-keyboard.yaml'
 - extendedWaitUntil:
     visible:
       id: 'create-channel-encrypted'
diff --git a/.maestro/tests/e2ee/utils/change-e2ee-key.yaml b/.maestro/tests/e2ee/utils/change-e2ee-key.yaml
index 125cc968a6e..de401fc5c96 100644
--- a/.maestro/tests/e2ee/utils/change-e2ee-key.yaml
+++ b/.maestro/tests/e2ee/utils/change-e2ee-key.yaml
@@ -7,10 +7,12 @@ tags:
 - tapOn: Enter manually
 - tapOn: New password
 - inputText: ${output.data.e2eePassword}
-- hideKeyboard
-- swipe:
-    direction: DOWN
-    duration: 100
+- runFlow: '../../../helpers/hide-keyboard.yaml'
+- scrollUntilVisible:
+    element:
+      text: 'Save Changes'
+    timeout: 60000
+    centerElement: true
 - tapOn: Save Changes
 - extendedWaitUntil:
     visible:
diff --git a/.maestro/tests/onboarding/change-password.yaml b/.maestro/tests/onboarding/change-password.yaml
index cc3f0e2ee66..5c5276aa5e5 100644
--- a/.maestro/tests/onboarding/change-password.yaml
+++ b/.maestro/tests/onboarding/change-password.yaml
@@ -26,13 +26,13 @@ tags:
 - tapOn:
     id: change-password-view-new-password
 - inputText: 123456
-- hideKeyboard
+- runFlow: '../../helpers/hide-keyboard.yaml'
 - assertVisible:
     id: change-password-view-confirm-new-password
 - tapOn:
     id: change-password-view-confirm-new-password
 - inputText: 123456
-- hideKeyboard
+- runFlow: '../../helpers/hide-keyboard.yaml'
 - assertVisible:
     id: change-password-view-set-new-password-button
 - tapOn:
diff --git a/.maestro/tests/onboarding/login/invalid-credentials.yaml b/.maestro/tests/onboarding/login/invalid-credentials.yaml
index f896d60d03d..6068f2761b1 100644
--- a/.maestro/tests/onboarding/login/invalid-credentials.yaml
+++ b/.maestro/tests/onboarding/login/invalid-credentials.yaml
@@ -17,7 +17,7 @@ tags:
 - tapOn:
     id: 'login-view-password'
 - inputText: 'NotMyActualPassword'
-- hideKeyboard
+- runFlow: '../../../helpers/hide-keyboard.yaml'
 - tapOn:
     id: login-view-submit
 - assertVisible:
diff --git a/.maestro/tests/onboarding/login/login.yaml b/.maestro/tests/onboarding/login/login.yaml
index 3d1df9a6f01..133daf00888 100644
--- a/.maestro/tests/onboarding/login/login.yaml
+++ b/.maestro/tests/onboarding/login/login.yaml
@@ -18,7 +18,7 @@ tags:
 - tapOn:
     id: 'login-view-password'
 - inputText: ${output.createdUser.password}
-- hideKeyboard
+- runFlow: '../../../helpers/hide-keyboard.yaml'
 - tapOn:
     id: login-view-submit
 - extendedWaitUntil:
diff --git a/.maestro/tests/onboarding/register/create-account.yaml b/.maestro/tests/onboarding/register/create-account.yaml
index 58fc4ed842c..79364d8e509 100644
--- a/.maestro/tests/onboarding/register/create-account.yaml
+++ b/.maestro/tests/onboarding/register/create-account.yaml
@@ -28,7 +28,7 @@ tags:
 - tapOn:
     id: register-view-confirm-password
 - inputText: ${output.user.password}
-- hideKeyboard
+- runFlow: '../../../helpers/hide-keyboard.yaml'
 - scrollUntilVisible:
     element:
       id: register-view-submit
diff --git a/.maestro/tests/room/create-room.yaml b/.maestro/tests/room/create-room.yaml
index 5e92836ad0c..5cbdf51a5b9 100644
--- a/.maestro/tests/room/create-room.yaml
+++ b/.maestro/tests/room/create-room.yaml
@@ -171,7 +171,7 @@ tags:
 - tapOn:
     id: 'create-channel-name'
 - inputText: 'general'
-- hideKeyboard
+- runFlow: '../../helpers/hide-keyboard.yaml'
 - extendedWaitUntil:
     visible:
       id: 'create-channel-submit'
@@ -190,7 +190,7 @@ tags:
     id: 'create-channel-name'
 - eraseText: 100
 - inputText: ${output.publicRoomName}
-- hideKeyboard
+- runFlow: '../../helpers/hide-keyboard.yaml'
 - tapOn:
     id: 'create-channel-type'
 - extendedWaitUntil:
@@ -258,7 +258,7 @@ tags:
 - tapOn:
     id: 'create-channel-name'
 - inputText: ${output.privateRoomName}
-- hideKeyboard
+- runFlow: '../../helpers/hide-keyboard.yaml'
 - extendedWaitUntil:
     visible:
       id: 'create-channel-submit'
@@ -322,7 +322,7 @@ tags:
 - tapOn:
     id: 'create-channel-name'
 - inputText: ${output.emptyRoomName}
-- hideKeyboard
+- runFlow: '../../helpers/hide-keyboard.yaml'
 - extendedWaitUntil:
     visible:
       id: 'create-channel-submit'
@@ -346,101 +346,3 @@ tags:
     visible:
       id: ${'rooms-list-view-item-' + output.emptyRoomName}
     timeout: 60000
-
-# should create a room with non-latin alphabet and do a case insensitive search for it
-- runFlow:
-    when:
-      platform: iOS
-    commands:
-      - evalScript: ${output.nonLatinRoomName = 'ПРОВЕРКА' + output.random()}
-      - evalScript: ${output.nonLatinRoomNameLower = output.nonLatinRoomName.toLowerCase()}
-
-      - extendedWaitUntil:
-          visible:
-            id: 'rooms-list-view'
-          timeout: 60000
-      - extendedWaitUntil:
-          visible:
-            id: 'rooms-list-view-create-channel'
-          timeout: 60000
-      - tapOn:
-          id: 'rooms-list-view-create-channel'
-      - extendedWaitUntil:
-          visible:
-            id: 'new-message-view'
-          timeout: 60000
-      - extendedWaitUntil:
-          visible:
-            id: 'new-message-view-create-channel'
-          timeout: 60000
-      - tapOn:
-          id: 'new-message-view-create-channel'
-      - extendedWaitUntil:
-          visible:
-            id: 'select-users-view'
-          timeout: 60000
-      - tapOn:
-          id: 'selected-users-view-submit'
-      - extendedWaitUntil:
-          visible:
-            id: 'create-channel-view'
-          timeout: 60000
-      - extendedWaitUntil:
-          visible:
-            id: 'create-channel-name'
-          timeout: 60000
-      - tapOn:
-          id: 'create-channel-name'
-      - inputText: ${output.nonLatinRoomName}
-      - hideKeyboard
-      - extendedWaitUntil:
-          visible:
-            id: 'create-channel-submit'
-          timeout: 60000
-      - tapOn:
-          id: 'create-channel-submit'
-      - extendedWaitUntil:
-          visible:
-            id: 'room-view'
-          timeout: 60000
-      - extendedWaitUntil:
-          visible:
-            id: ${'room-view-title-' + output.nonLatinRoomName}
-          timeout: 60000
-      - runFlow: '../../helpers/go-back.yaml'
-      - extendedWaitUntil:
-          visible:
-            id: 'rooms-list-view'
-          timeout: 60000
-      - extendedWaitUntil:
-          visible:
-            id: ${'rooms-list-view-item-' + output.nonLatinRoomName}
-          timeout: 60000
-      - extendedWaitUntil:
-          visible:
-            id: 'rooms-list-view-search'
-          timeout: 60000
-      - tapOn:
-          id: 'rooms-list-view-search'
-      - extendedWaitUntil:
-          visible:
-            id: 'rooms-list-view-search-input'
-          timeout: 60000
-      - tapOn:
-          id: 'rooms-list-view-search-input'
-      - inputText: ${output.nonLatinRoomNameLower}
-      - hideKeyboard
-      - extendedWaitUntil:
-          visible:
-            id: ${'rooms-list-view-item-' + output.nonLatinRoomName}
-          timeout: 60000
-      - tapOn:
-          id: ${'rooms-list-view-item-' + output.nonLatinRoomName}
-      - extendedWaitUntil:
-          visible:
-            id: 'room-view'
-          timeout: 60000
-      - extendedWaitUntil:
-          visible:
-            id: ${'room-view-title-' + output.nonLatinRoomName}
-          timeout: 60000
diff --git a/.maestro/tests/room/ignoreuser.yaml b/.maestro/tests/room/ignoreuser.yaml
index f545cead62f..93b4df7c309 100644
--- a/.maestro/tests/room/ignoreuser.yaml
+++ b/.maestro/tests/room/ignoreuser.yaml
@@ -88,10 +88,20 @@ tags:
     visible:
       id: 'username-header-${output.otherUser.username}'
     timeout: 60000
-- tapOn:
-    text: ${output.otherUser.username}
-    index: 1
-    retryTapIfNoChange: true
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      - tapOn:
+          text: .*${output.otherUser.username}.*
+          retryTapIfNoChange: true
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - tapOn:
+          id: 'username-header-${output.otherUser.username}'
+          retryTapIfNoChange: true
 - extendedWaitUntil:
     visible:
       text: 'Ignore'
@@ -140,9 +150,20 @@ tags:
     visible:
       id: 'username-header-${output.otherUser.username}'
     timeout: 60000
-- tapOn:
-    id: 'username-header-${output.otherUser.username}'
-    retryTapIfNoChange: true
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      - tapOn:
+          text: .*${output.otherUser.username}.*
+          retryTapIfNoChange: true
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - tapOn:
+          id: 'username-header-${output.otherUser.username}'
+          retryTapIfNoChange: true
 - extendedWaitUntil:
     visible:
       text: 'Unignore'
@@ -188,14 +209,13 @@ tags:
 - tapOn:
     id: 'report-user-view-input'
 - inputText: 'e2e test'
+- runFlow: '../../helpers/hide-keyboard.yaml'
 - extendedWaitUntil:
     visible:
       id: 'report-user-view-submit'
     timeout: 60000
-- hideKeyboard
 - tapOn:
     id: 'report-user-view-submit'
-    retryTapIfNoChange: true
 - extendedWaitUntil:
     visible:
       id: 'room-view-title-${output.otherUser.username}'
@@ -209,11 +229,22 @@ tags:
       ROOM: ${output.room.name}
 - extendedWaitUntil:
     visible:
-      text: ${output.otherUser.username}
+      id: username-header-${output.otherUser.username}
     timeout: 60000
-- tapOn:
-    text: ${output.otherUser.username}
-    index: 1
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - tapOn:
+          id: username-header-${output.otherUser.username}
+          retryTapIfNoChange: true
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      - tapOn:
+          text: .*${output.otherUser.username}.*
+          retryTapIfNoChange: true
 - extendedWaitUntil:
     visible:
       id: 'room-info-view'
@@ -235,14 +266,13 @@ tags:
 - tapOn:
     id: 'report-user-view-input'
 - inputText: 'e2e test'
-- hideKeyboard
+- runFlow: '../../helpers/hide-keyboard.yaml'
 - extendedWaitUntil:
     visible:
       id: 'report-user-view-submit'
     timeout: 60000
 - tapOn:
     id: 'report-user-view-submit'
-    retryTapIfNoChange: true
 - extendedWaitUntil:
     visible:
       id: 'room-view-title-${output.room.name}'
diff --git a/.maestro/tests/room/jump-to-message.yaml b/.maestro/tests/room/jump-to-message.yaml
index 2d330c4217b..3ac33d7041c 100644
--- a/.maestro/tests/room/jump-to-message.yaml
+++ b/.maestro/tests/room/jump-to-message.yaml
@@ -153,6 +153,7 @@ tags:
       text: '.*Load newer.*'
     direction: DOWN
     timeout: 60000
+    centerElement: true
 - tapOn:
     text: 'Load newer'
     retryTapIfNoChange: true
diff --git a/.maestro/tests/room/message-markdown-click.yaml b/.maestro/tests/room/message-markdown-click.yaml
new file mode 100644
index 00000000000..3b6bab80b63
--- /dev/null
+++ b/.maestro/tests/room/message-markdown-click.yaml
@@ -0,0 +1,197 @@
+appId: chat.rocket.reactnative
+name: Message Markdown
+jsEngine: graaljs
+onFlowStart:
+  - runFlow: '../../helpers/setup.yaml'
+onFlowComplete:
+  - evalScript: ${output.utils.deleteCreatedUsers()}
+tags:
+  - test-12
+
+---
+- evalScript: ${output.user = output.utils.createUser()}
+
+- runFlow:
+    file: '../../helpers/login-with-deeplink.yaml'
+    env:
+      USERNAME: ${output.user.username}
+      PASSWORD: ${output.user.password}
+- runFlow:
+    file: '../../helpers/search-and-navigate-room.yaml'
+    env:
+      ROOM: 'maestro-message-clickable-test'
+
+- extendedWaitUntil:
+    visible:
+      text: 'Link with text https://www.rocket.chat'
+    timeout: 60000
+- extendedWaitUntil:
+    visible:
+      text: '.*detox-public*.'
+    timeout: 60000
+- extendedWaitUntil:
+    visible:
+      text: '.*e2e_admin*.'
+    timeout: 60000
+- extendedWaitUntil:
+    visible:
+      text: '.*Message with thread*.'
+    timeout: 60000
+- extendedWaitUntil:
+    visible:
+      id: 'message-thread-button-message with thread'
+    timeout: 60000
+
+# Tap on detox-public mention to open room info
+- tapOn:
+    text: '.*detox-public*.'
+
+# Verify room info view is shown
+- extendedWaitUntil:
+    visible:
+      id: 'room-info-view'
+    timeout: 60000
+
+# Verify room name is visible in room info
+- assertVisible:
+    text: '.*detox-public.*'
+
+# Go back to room
+- tapOn:
+    id: custom-header-back
+
+# Wait for room view to be visible again
+- extendedWaitUntil:
+    visible:
+      id: 'room-view-title-maestro-message-clickable-test'
+    timeout: 60000
+
+# Tap on the URL link to open alert
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      - tapOn:
+          text: '.*https://www.rocket.chat.*'
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - tapOn:
+          point: 66%,66%
+
+# Verify alert is shown with the link
+- extendedWaitUntil:
+    visible:
+      text: '.*Link Pressed*.'
+    timeout: 10000
+
+- assertVisible:
+    text: '.*https://www.rocket.chat*.'
+
+# Dismiss the alert
+- tapOn:
+    text: 'OK'
+    optional: true
+
+# Long press on the link to copy to clipboard
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      - longPressOn:
+          text: '.*https://www.rocket.chat.*'
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - longPressOn:
+          point: 66%,66%
+
+# Verify clipboard has the link alert
+- extendedWaitUntil:
+    visible:
+      text: '.*Link Long Pressed*.'
+    timeout: 10000
+
+- assertVisible:
+    text: '.*https://www.rocket.chat*.'
+
+# Dismiss the alert
+- tapOn:
+    text: 'OK'
+    optional: true
+
+# Tap on e2e_admin mention to open user info
+- tapOn:
+    text: '.*e2e_admin*.'
+
+# Verify user info view is shown
+- extendedWaitUntil:
+    visible:
+      text: '.*User info*.'
+    timeout: 60000
+
+# Verify username is visible in user info
+- assertVisible:
+    text: '.*e2e_admin.*'
+
+# Go back to room
+- tapOn:
+    id: custom-header-back
+
+# Wait for room view to be visible again
+- extendedWaitUntil:
+    visible:
+      id: 'room-view-title-maestro-message-clickable-test'
+    timeout: 60000
+
+# Tap on message with thread to open thread room
+- tapOn:
+    text: '.*Message with thread*.'
+
+# Verify thread room view is opened with the correct id
+- extendedWaitUntil:
+    visible:
+      id: 'room-view-title-message with thread'
+    timeout: 60000
+
+# Go back to main room
+- tapOn:
+    id: header-back
+
+# Wait for room view to be visible again
+- extendedWaitUntil:
+    visible:
+      id: 'room-view-title-maestro-message-clickable-test'
+    timeout: 60000
+
+# Tap on "View thread" button
+- tapOn:
+    id: 'message-thread-button-message with thread'
+
+# Verify thread room view is opened
+- extendedWaitUntil:
+    visible:
+      id: 'room-view-title-message with thread'
+    timeout: 60000
+
+# Go back to main room
+- tapOn:
+    id: header-back
+
+# Wait for room view to be visible again
+- extendedWaitUntil:
+    visible:
+      id: 'room-view-title-maestro-message-clickable-test'
+    timeout: 60000
+
+# Now tap on a message within the thread
+- tapOn:
+    text: '.*a message in thread*.'
+
+# Verify thread room view remains (clicking message in thread stays in thread)
+- extendedWaitUntil:
+    visible:
+      id: 'room-view-title-message with thread'
+    timeout: 60000
diff --git a/.maestro/tests/room/room-info.yaml b/.maestro/tests/room/room-info.yaml
index c1ba9dae806..7360de99c59 100644
--- a/.maestro/tests/room/room-info.yaml
+++ b/.maestro/tests/room/room-info.yaml
@@ -290,7 +290,7 @@ tags:
     env:
       id: 'room-info-edit-view-name'
 - inputText: ${output.newroomname}
-- pressKey: Enter
+- runFlow: '../../helpers/hide-keyboard.yaml'
 - scrollUntilVisible:
     element:
       id: 'room-info-edit-view-submit'
@@ -321,6 +321,14 @@ tags:
     timeout: 60000
 
 # should change room description, topic, announcement
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - extendedWaitUntil:
+          notVisible:
+            text: '.*Settings succesfully changed.*'
+          timeout: 60000
 - scrollUntilVisible:
     element:
       id: 'room-info-edit-view-topic'
diff --git a/.maestro/tests/room/room.yaml b/.maestro/tests/room/room.yaml
index fa6c6f983b8..b29ad58be49 100644
--- a/.maestro/tests/room/room.yaml
+++ b/.maestro/tests/room/room.yaml
@@ -253,10 +253,8 @@ tags:
     visible:
       id: 'action-sheet-handle'
     timeout: 60000
-- swipe:
-    from:
-      id: action-sheet-handle
-    direction: DOWN
+- tapOn:
+    id: 'action-sheet-handle'
 - extendedWaitUntil:
     notVisible:
       id: 'reactionsList'
@@ -318,22 +316,23 @@ tags:
     visible:
       text: '.*edit.*'
     timeout: 60000
+- hideKeyboard
 - longPressOn:
     id: 'message-content-edit'
+- waitForAnimationToEnd:
+    timeout: 1000
 - extendedWaitUntil:
     visible:
       id: action-sheet
     timeout: 60000
 - extendedWaitUntil:
     visible:
-      id: action-sheet-handle
-    timeout: 60000
-- extendedWaitUntil:
-    visible:
-      text: 'Edit'
+      id: message-actions-edit
     timeout: 60000
+- waitForAnimationToEnd:
+    timeout: 1000
 - tapOn:
-    text: 'Edit'
+    id: message-actions-edit
 - extendedWaitUntil:
     visible:
       id: message-composer-input
@@ -364,10 +363,10 @@ tags:
     timeout: 60000
 - extendedWaitUntil:
     visible:
-      text: 'Quote'
+      id: message-actions-quote
     timeout: 60000
 - tapOn:
-    text: 'Quote'
+    id: message-actions-quote
 - extendedWaitUntil:
     visible:
       id: message-composer-input
@@ -420,9 +419,9 @@ tags:
     direction: UP
 - scrollUntilVisible:
     element:
-      text: 'Delete'
+      id: message-actions-delete
 - tapOn:
-    text: 'Delete'
+    id: message-actions-delete
 - extendedWaitUntil:
     visible:
       text: '.*You will not be able to recover this message.*'
@@ -472,10 +471,10 @@ tags:
     timeout: 60000
 - extendedWaitUntil:
     visible:
-      text: 'Reply in direct message'
+      id: message-actions-reply-in-dm
     timeout: 60000
 - tapOn:
-    text: 'Reply in direct message'
+    id: message-actions-reply-in-dm
 - extendedWaitUntil:
     visible:
       id: room-view-title-${output.replyUser.username}
@@ -487,7 +486,7 @@ tags:
 - tapOn:
     id: message-composer-input
 - inputText: ${output.replyMessage}
-- hideKeyboard
+- runFlow: '../../helpers/hide-keyboard.yaml'
 - tapOn:
     id: message-composer-send
 - extendedWaitUntil:
@@ -510,7 +509,7 @@ tags:
 - tapOn:
     id: message-composer-input
 - inputText: 'draft'
-- hideKeyboard
+- runFlow: '../../helpers/hide-keyboard.yaml'
 - runFlow: '../../helpers/go-back.yaml'
 - runFlow:
     file: '../../helpers/navigate-to-room.yaml'
@@ -565,7 +564,7 @@ tags:
 - tapOn:
     id: message-composer-input
 - inputText: ${output.draftMessage}
-- hideKeyboard
+- runFlow: '../../helpers/hide-keyboard.yaml'
 - runFlow: '../../helpers/go-back.yaml'
 - runFlow:
     file: '../../helpers/navigate-to-room.yaml'
@@ -586,7 +585,7 @@ tags:
       id: action-sheet
     timeout: 60000
 - tapOn:
-    text: 'Quote'
+    id: message-actions-quote
 - extendedWaitUntil:
     visible:
       id: 'markdown-preview-${output.originalMessage}'
diff --git a/.maestro/tests/room/share-message.yaml b/.maestro/tests/room/share-message.yaml
index 4bbf18fff3e..d7a339a9030 100644
--- a/.maestro/tests/room/share-message.yaml
+++ b/.maestro/tests/room/share-message.yaml
@@ -68,17 +68,15 @@ tags:
 - tapOn:
     id: 'multi-select-search'
 - inputText: ${output.otherUser.username}
-- hideKeyboard
 - extendedWaitUntil:
     visible:
       id: multi-select-item-${output.otherUser.username.toLowerCase()}
     timeout: 60000
 - tapOn:
     id: multi-select-item-${output.otherUser.username.toLowerCase()}
-- swipe:
-    from:
-      id: 'action-sheet-handle'
-    direction: DOWN
+# this is to hide bottom sheet and keyboard together
+- tapOn:
+    point: 5%,10%
 - extendedWaitUntil:
     notVisible:
       id: 'multi-select-search'
diff --git a/.maestro/tests/teams/team.yaml b/.maestro/tests/teams/team.yaml
index 67ba897ffb1..4207534d68c 100644
--- a/.maestro/tests/teams/team.yaml
+++ b/.maestro/tests/teams/team.yaml
@@ -106,12 +106,12 @@ tags:
 - tapOn:
     id: create-channel-name
 - inputText: ${output.privateRoomName}
-- hideKeyboard
-- extendedWaitUntil:
-    visible:
-      id: create-channel-submit
+- runFlow: '../../helpers/hide-keyboard.yaml'
+- scrollUntilVisible:
+    element:
+      id: 'create-channel-submit'
     timeout: 60000
-    label: should have submit button
+    centerElement: true
 - tapOn:
     id: create-channel-submit
 - extendedWaitUntil:
@@ -297,7 +297,7 @@ tags:
 - tapOn:
     id: select-users-view-search
 - inputText: rocket.cat
-- hideKeyboard
+- runFlow: '../../helpers/hide-keyboard.yaml'
 - extendedWaitUntil:
     visible:
       id: select-users-view-item-rocket.cat
@@ -316,7 +316,7 @@ tags:
     id: select-users-view-search
 - eraseText
 - inputText: ${output.secondUser.username}
-- hideKeyboard
+- runFlow: '../../helpers/hide-keyboard.yaml'
 - extendedWaitUntil:
     visible:
       id: select-users-view-item-${output.secondUser.username}
diff --git a/.maestro/tests/teams/utils/close-action-sheet.yaml b/.maestro/tests/teams/utils/close-action-sheet.yaml
index bd6d32cf6a8..8a19f95eebc 100644
--- a/.maestro/tests/teams/utils/close-action-sheet.yaml
+++ b/.maestro/tests/teams/utils/close-action-sheet.yaml
@@ -3,10 +3,8 @@ tags:
   - 'util'
 
 ---
-- swipe:
-    from:
-      id: action-sheet-handle
-    direction: DOWN
+- tapOn:
+    id: action-sheet-handle
 - extendedWaitUntil:
     notVisible:
       id: action-sheet-handle
diff --git a/.maestro/tests/teams/utils/create-channel.yaml b/.maestro/tests/teams/utils/create-channel.yaml
index 679c0c2c8c8..e8f9d91fcb2 100644
--- a/.maestro/tests/teams/utils/create-channel.yaml
+++ b/.maestro/tests/teams/utils/create-channel.yaml
@@ -34,7 +34,7 @@ tags:
 - tapOn:
     id: create-channel-name
 - inputText: ${channelName}
-- hideKeyboard
+- runFlow: '../../../helpers/hide-keyboard.yaml'
 
 - runFlow:
     when:
diff --git a/.maestro/tests/teams/utils/open-action-sheet.yaml b/.maestro/tests/teams/utils/open-action-sheet.yaml
index 5b6083c0515..b3bbd9808aa 100644
--- a/.maestro/tests/teams/utils/open-action-sheet.yaml
+++ b/.maestro/tests/teams/utils/open-action-sheet.yaml
@@ -7,16 +7,16 @@ tags:
     visible:
       id: room-members-view-item-${username}
     timeout: 60000
+- waitForAnimationToEnd:
+    timeout: 2000
 - tapOn:
     id: room-members-view-item-${username}
+- waitForAnimationToEnd:
+    timeout: 2000
 - extendedWaitUntil:
     visible:
       id: action-sheet
     timeout: 60000
-- assertVisible:
-    id: action-sheet-handle
-- tapOn:
-    id: action-sheet-handle
 - extendedWaitUntil:
     visible:
       id: action-sheet
diff --git a/__mocks__/react-native-mmkv.js b/__mocks__/react-native-mmkv.js
index 3288748482c..44b12dcf0c9 100644
--- a/__mocks__/react-native-mmkv.js
+++ b/__mocks__/react-native-mmkv.js
@@ -84,7 +84,7 @@ export class MMKV {
 	}
 
 	notifyListeners(key) {
-		this.listeners.forEach((listener) => {
+		this.listeners.forEach(listener => {
 			try {
 				listener(key);
 			} catch (error) {
@@ -102,7 +102,7 @@ export function useMMKVString(key, mmkvInstance) {
 	const [value, setValue] = useState(() => mmkvInstance.getString(key));
 
 	useEffect(() => {
-		const listener = mmkvInstance.addOnValueChangedListener((changedKey) => {
+		const listener = mmkvInstance.addOnValueChangedListener(changedKey => {
 			if (changedKey === key || changedKey === undefined) {
 				setValue(mmkvInstance.getString(key));
 			}
@@ -110,7 +110,7 @@ export function useMMKVString(key, mmkvInstance) {
 		return () => listener.remove();
 	}, [key, mmkvInstance]);
 
-	const setStoredValue = (newValue) => {
+	const setStoredValue = newValue => {
 		if (newValue === undefined) {
 			mmkvInstance.delete(key);
 		} else {
@@ -126,7 +126,7 @@ export function useMMKVNumber(key, mmkvInstance) {
 	const [value, setValue] = useState(() => mmkvInstance.getNumber(key));
 
 	useEffect(() => {
-		const listener = mmkvInstance.addOnValueChangedListener((changedKey) => {
+		const listener = mmkvInstance.addOnValueChangedListener(changedKey => {
 			if (changedKey === key || changedKey === undefined) {
 				setValue(mmkvInstance.getNumber(key));
 			}
@@ -134,7 +134,7 @@ export function useMMKVNumber(key, mmkvInstance) {
 		return () => listener.remove();
 	}, [key, mmkvInstance]);
 
-	const setStoredValue = (newValue) => {
+	const setStoredValue = newValue => {
 		if (newValue === undefined) {
 			mmkvInstance.delete(key);
 		} else {
@@ -150,7 +150,7 @@ export function useMMKVBoolean(key, mmkvInstance) {
 	const [value, setValue] = useState(() => mmkvInstance.getBoolean(key));
 
 	useEffect(() => {
-		const listener = mmkvInstance.addOnValueChangedListener((changedKey) => {
+		const listener = mmkvInstance.addOnValueChangedListener(changedKey => {
 			if (changedKey === key || changedKey === undefined) {
 				setValue(mmkvInstance.getBoolean(key));
 			}
@@ -158,7 +158,7 @@ export function useMMKVBoolean(key, mmkvInstance) {
 		return () => listener.remove();
 	}, [key, mmkvInstance]);
 
-	const setStoredValue = (newValue) => {
+	const setStoredValue = newValue => {
 		if (newValue === undefined) {
 			mmkvInstance.delete(key);
 		} else {
@@ -177,7 +177,7 @@ export function useMMKVObject(key, mmkvInstance) {
 	});
 
 	useEffect(() => {
-		const listener = mmkvInstance.addOnValueChangedListener((changedKey) => {
+		const listener = mmkvInstance.addOnValueChangedListener(changedKey => {
 			if (changedKey === key || changedKey === undefined) {
 				const stored = mmkvInstance.getString(key);
 				setValue(stored ? JSON.parse(stored) : undefined);
@@ -186,7 +186,7 @@ export function useMMKVObject(key, mmkvInstance) {
 		return () => listener.remove();
 	}, [key, mmkvInstance]);
 
-	const setStoredValue = (newValue) => {
+	const setStoredValue = newValue => {
 		if (newValue === undefined) {
 			mmkvInstance.delete(key);
 		} else {
diff --git a/android/app/build.gradle b/android/app/build.gradle
index 0143ee4d12e..91a523ac0eb 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -152,6 +152,9 @@ dependencies {
     
     // For SecureKeystore (EncryptedSharedPreferences)
     implementation 'androidx.security:security-crypto:1.1.0'
+
+    // For ProcessLifecycleOwner (app foreground detection)
+    implementation 'androidx.lifecycle:lifecycle-process:2.8.7'
 }
 
 apply plugin: 'com.google.gms.google-services'
diff --git a/android/app/src/main/assets/fonts/custom.ttf b/android/app/src/main/assets/fonts/custom.ttf
index b0758f2fa60..ace29c7f232 100644
Binary files a/android/app/src/main/assets/fonts/custom.ttf and b/android/app/src/main/assets/fonts/custom.ttf differ
diff --git a/android/app/src/main/java/chat/rocket/reactnative/notification/CustomPushNotification.java b/android/app/src/main/java/chat/rocket/reactnative/notification/CustomPushNotification.java
index 22339abd691..622c44415b9 100644
--- a/android/app/src/main/java/chat/rocket/reactnative/notification/CustomPushNotification.java
+++ b/android/app/src/main/java/chat/rocket/reactnative/notification/CustomPushNotification.java
@@ -17,6 +17,8 @@
 import android.util.Log;
 
 import androidx.annotation.Nullable;
+import androidx.lifecycle.Lifecycle;
+import androidx.lifecycle.ProcessLifecycleOwner;
 
 import com.google.gson.Gson;
 
@@ -68,6 +70,14 @@ public CustomPushNotification(Context context, Bundle bundle) {
     public static void clearMessages(int notId) {
         notificationMessages.remove(Integer.toString(notId));
     }
+
+    /**
+     * Checks if the app is currently in the foreground.
+     * Uses ProcessLifecycleOwner to reliably detect app state.
+     */
+    public static boolean isAppInForeground() {
+        return ProcessLifecycleOwner.get().getLifecycle().getCurrentState().isAtLeast(Lifecycle.State.RESUMED);
+    }
     
     public void onReceived() {
         String notId = mBundle.getString("notId");
@@ -102,6 +112,11 @@ private void handleNotification() {
             return; // Exit early, notification will be processed in callback
         }
 
+        if (receivedEjson != null && receivedEjson.notificationType != null && receivedEjson.notificationType.equals("voip")) {
+            Log.d(TAG, "Notification is a voip notification, ignoring");
+            return;
+        }
+
         // For non-message-id-only notifications, process immediately
         processNotification();
     }
@@ -228,6 +243,15 @@ private void showNotification(Bundle bundle, Ejson ejson, String notId) {
             if (ENABLE_VERBOSE_LOGS) {
                 Log.d(TAG, "[Before add to notificationMessages] notId=" + notId + ", bundle.message length=" + (bundle.getString("message") != null ? bundle.getString("message").length() : 0) + ", bundle.notificationLoaded=" + bundle.getBoolean("notificationLoaded", false));
             }
+
+            // Don't show notification if app is in foreground
+            if (isAppInForeground()) {
+                if (ENABLE_VERBOSE_LOGS) {
+                    Log.d(TAG, "App is in foreground, skipping native notification");
+                }
+                return;
+            }
+
             notificationMessages.get(notId).add(bundle);
             if (ENABLE_VERBOSE_LOGS) {
                 Log.d(TAG, "[After add] notificationMessages[" + notId + "].size=" + notificationMessages.get(notId).size());
diff --git a/app/containers/ActionSheet/ActionSheet.tsx b/app/containers/ActionSheet/ActionSheet.tsx
index 65f65d551dc..4725bcea93b 100644
--- a/app/containers/ActionSheet/ActionSheet.tsx
+++ b/app/containers/ActionSheet/ActionSheet.tsx
@@ -1,98 +1,53 @@
 import { useBackHandler } from '@react-native-community/hooks';
 import * as Haptics from 'expo-haptics';
-import React, { forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, useState, useCallback } from 'react';
-import { Keyboard, type LayoutChangeEvent, useWindowDimensions } from 'react-native';
-import { Easing, useDerivedValue, useSharedValue } from 'react-native-reanimated';
-import BottomSheet, { BottomSheetBackdrop, type BottomSheetBackdropProps } from '@discord/bottom-sheet';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import React, { forwardRef, isValidElement, useImperativeHandle, useRef, useState } from 'react';
+import { Keyboard, type LayoutChangeEvent, Platform, useWindowDimensions } from 'react-native';
+import { TrueSheet } from '@lodev09/react-native-true-sheet';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 import { useTheme } from '../../theme';
-import { isIOS, isTablet } from '../../lib/methods/helpers';
+import { isAndroid, isIOS } from '../../lib/methods/helpers';
 import { Handle } from './Handle';
 import { type TActionSheetOptions } from './Provider';
 import BottomSheetContent from './BottomSheetContent';
+import { HANDLE_HEIGHT, useActionSheetDetents } from './useActionSheetDetents';
 import styles from './styles';
 
 export const ACTION_SHEET_ANIMATION_DURATION = 250;
-const HANDLE_HEIGHT = 28;
-const CANCEL_HEIGHT = 64;
-
-const ANIMATION_CONFIG = {
-	duration: ACTION_SHEET_ANIMATION_DURATION,
-	// https://easings.net/#easeInOutCubic
-	easing: Easing.bezier(0.645, 0.045, 0.355, 1.0)
-};
 
 const ActionSheet = React.memo(
 	forwardRef(({ children }: { children: React.ReactElement }, ref) => {
 		const { colors } = useTheme();
-		const { height: windowHeight } = useWindowDimensions();
-		const { bottom, right, left } = useSafeAreaInsets();
-		const { fontScale } = useWindowDimensions();
-		const itemHeight = 48 * fontScale;
-		const bottomSheetRef = useRef<BottomSheet>(null);
+		const { height: windowHeight, width: windowWidth, fontScale } = useWindowDimensions();
+		const sheetRef = useRef<TrueSheet>(null);
 		const [data, setData] = useState<TActionSheetOptions>({} as TActionSheetOptions);
-		const [isVisible, setVisible] = useState(false);
-		const animatedContentHeight = useSharedValue(0);
-		const animatedHandleHeight = useSharedValue(0);
-		const animatedDataSnaps = useSharedValue<TActionSheetOptions['snaps']>([]);
-		const animatedSnapPoints = useDerivedValue(() => {
-			if (animatedDataSnaps.value?.length) {
-				return animatedDataSnaps.value;
-			}
-			const contentWithHandleHeight = animatedContentHeight.value + animatedHandleHeight.value;
-			// Bottom sheet requires a default value to work
-			if (contentWithHandleHeight === 0) {
-				return ['25%'];
-			}
-			return [contentWithHandleHeight];
-		}, [data]);
-
-		const handleContentLayout = useCallback(
-			({
-				nativeEvent: {
-					layout: { height }
-				}
-			}: LayoutChangeEvent) => {
-				/**
-				 * This logic is only necessary to prevent the action sheet from
-				 * occupying the entire screen when the dynamic content is too big.
-				 */
-				animatedContentHeight.value = Math.min(height, windowHeight * 0.8);
-			},
-			[animatedContentHeight, windowHeight]
-		);
-
-		const maxSnap = Math.min(
-			(itemHeight + 0.5) * (data?.options?.length || 0) +
-				HANDLE_HEIGHT +
-				// Custom header height
-				(data?.headerHeight || 0) +
-				// Insets bottom height (Notch devices)
-				bottom +
-				// Cancel button height
-				(data?.hasCancel ? CANCEL_HEIGHT : 0),
-			windowHeight * 0.8
-		);
-
-		/*
-		 * if the action sheet cover more than 60% of the screen height,
-		 * we'll provide more one snap of 50%
-		 */
-		const snaps = maxSnap > windowHeight * 0.6 && !data.snaps ? ['50%', maxSnap] : [maxSnap];
+		const [isVisible, setIsVisible] = useState(false);
+		const [contentHeight, setContentHeight] = useState(0);
+		const onCloseSnapshotRef = useRef<TActionSheetOptions['onClose']>(undefined);
+
+		// TrueSheet detects the bottom inset for Android 16 and iOS
+		// To avoid content hiding behind navigation bar on older Android versions
+		const isNewAndroid = isAndroid && Number(Platform.Version) >= 36;
+		const bottom = isIOS || isNewAndroid ? 0 : windowHeight * 0.03;
+		const itemHeight = 48 * fontScale;
 
-		const toggleVisible = () => setVisible(!isVisible);
+		const handleContentLayout = ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
+			setContentHeight(layout.height);
+		};
 
 		const hide = () => {
-			bottomSheetRef.current?.close();
+			sheetRef.current?.dismiss();
+			Keyboard.dismiss();
+			Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
 		};
 
 		const show = (options: TActionSheetOptions) => {
 			setData(options);
-			if (options.snaps?.length) {
-				animatedDataSnaps.value = options.snaps;
-			}
-			toggleVisible();
+			setIsVisible(true);
+			Keyboard.dismiss();
+			Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+			onCloseSnapshotRef.current = options.onClose;
+			sheetRef.current?.present();
 		};
 
 		useBackHandler(() => {
@@ -102,81 +57,83 @@ const ActionSheet = React.memo(
 			return isVisible;
 		});
 
-		useEffect(() => {
-			if (isVisible) {
-				Keyboard.dismiss();
-				Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-			}
-		}, [isVisible]);
-
 		useImperativeHandle(ref, () => ({
 			showActionSheet: show,
 			hideActionSheet: hide
 		}));
 
-		const renderHandle = () => (
-			<>
-				<Handle />
+		const renderHeader = () => (
+			<GestureHandlerRootView style={{ flex: 0 }}>
+				<Handle onPress={hide} />
 				{isValidElement(data?.customHeader) ? data.customHeader : null}
-			</>
+			</GestureHandlerRootView>
 		);
 
-		const onClose = () => {
-			toggleVisible();
-			data?.onClose && data?.onClose();
-			animatedDataSnaps.value = [];
+		const onDidDismiss = () => {
+			setIsVisible(false);
+			// Keep contentHeight to avoid flickering on next show
+			const snapshotOnClose = onCloseSnapshotRef.current;
+			onCloseSnapshotRef.current = undefined;
+			snapshotOnClose?.();
 		};
 
-		const renderBackdrop = useCallback(
-			(props: BottomSheetBackdropProps) => (
-				<BottomSheetBackdrop
-					{...props}
-					appearsOnIndex={0}
-					// Backdrop should be visible all the time bottom sheet is open
-					disappearsOnIndex={-1}
-					opacity={colors.backdropOpacity}
-				/>
-			),
-			[]
-		);
+		const isPortrait = windowHeight > windowWidth;
+		const effectiveSnaps = (isPortrait ? data?.portraitSnaps : data?.landscapeSnaps) || data?.snaps;
+
+		const { detents, maxHeight, scrollEnabled } = useActionSheetDetents({
+			windowHeight,
+			bottomInset: bottom,
+			itemHeight,
+			optionsLength: data?.options?.length || 0,
+			snaps: effectiveSnaps,
+			headerHeight: data?.headerHeight,
+			hasCancel: data?.hasCancel,
+			contentHeight
+		});
 
-		const bottomSheet = isTablet ? styles.bottomSheet : { marginRight: right, marginLeft: left };
+		const hasOptions = !!data?.options?.length;
+		const hasSnaps = !!effectiveSnaps?.length;
+		const disableContentPanning = data?.enableContentPanningGesture === false || (!scrollEnabled && isAndroid);
+		const isScrollable = hasOptions || (hasSnaps && !disableContentPanning);
 
-		// Must need this prop to avoid keyboard dismiss
-		// when is android tablet and the input text is focused
-		const androidTablet: any = isTablet && !isIOS ? { android_keyboardInputMode: 'adjustResize' } : {};
+		const contentMinHeight =
+			data.fullContainer && effectiveSnaps?.length
+				? (() => {
+						const snap = effectiveSnaps[0];
+						const fraction = typeof snap === 'number' ? Math.min(1, Math.max(0.1, snap)) : (parseFloat(String(snap)) || 50) / 100;
+						return Math.max(0, windowHeight * fraction - HANDLE_HEIGHT);
+				  })()
+				: undefined;
 
 		return (
 			<>
 				{children}
-				{isVisible && (
-					<BottomSheet
-						ref={bottomSheetRef}
-						// If data.options exist, we calculate snaps to be precise, otherwise we cal
-						snapPoints={data.options?.length ? snaps : animatedSnapPoints}
-						handleHeight={animatedHandleHeight}
-						// We need undefined to enable vertical swipe gesture inside the bottom sheet like in reaction picker
-						contentHeight={data.snaps?.length || data.options?.length ? undefined : animatedContentHeight}
-						animationConfigs={ANIMATION_CONFIG}
-						animateOnMount={true}
-						backdropComponent={renderBackdrop}
-						handleComponent={renderHandle}
-						enablePanDownToClose
-						style={{ ...styles.container, ...bottomSheet }}
-						backgroundStyle={{ backgroundColor: colors.surfaceLight }}
-						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}
-						{...androidTablet}>
+				<TrueSheet
+					ref={sheetRef}
+					detents={detents}
+					maxHeight={maxHeight}
+					backgroundColor={colors.surfaceLight}
+					cornerRadius={16}
+					dimmed
+					grabber={false}
+					draggable={!disableContentPanning}
+					header={renderHeader()}
+					scrollable={isScrollable}
+					style={styles.container}
+					onDidDismiss={onDidDismiss}>
+					<GestureHandlerRootView style={styles.contentContainer}>
 						<BottomSheetContent
 							options={data?.options}
 							hide={hide}
-							children={data?.children}
 							hasCancel={data?.hasCancel}
 							onLayout={handleContentLayout}
-						/>
-					</BottomSheet>
-				)}
+							fullContainer={data.fullContainer}
+							contentMinHeight={isIOS ? contentMinHeight : undefined}
+							scrollEnabled={scrollEnabled}>
+							{data?.children}
+						</BottomSheetContent>
+					</GestureHandlerRootView>
+				</TrueSheet>
 			</>
 		);
 	})
diff --git a/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx b/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
index d4315d2b375..8ae1f030cc7 100644
--- a/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
+++ b/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
@@ -3,7 +3,6 @@ import { StyleSheet, Text, type TextInputProps, View } from 'react-native';
 
 import { CustomIcon, type TIconsName } from '../../CustomIcon';
 import i18n from '../../../i18n';
-import { isIOS } from '../../../lib/methods/helpers';
 import { useTheme } from '../../../theme';
 import sharedStyles from '../../../views/Styles';
 import Button from '../../Button';
@@ -137,7 +136,6 @@ const ActionSheetContentWithInputAndSubmit = ({
 					inputRef={inputRefs.current[index] as any}
 					testID={`${testID}-input-${inputConfig.key}`}
 					secureTextEntry={inputConfig.secureTextEntry}
-					bottomSheet={isIOS}
 				/>
 			));
 		}
@@ -156,7 +154,6 @@ const ActionSheetContentWithInputAndSubmit = ({
 				autoComplete={autoComplete}
 				testID={`${testID}-input`}
 				secureTextEntry={secureTextEntry}
-				bottomSheet={isIOS}
 				containerStyle={{ marginTop: 12, marginBottom: 36 }}
 			/>
 		);
diff --git a/app/containers/ActionSheet/BottomSheetContent.tsx b/app/containers/ActionSheet/BottomSheetContent.tsx
index 267c4b7a20d..e1a0e0d1d43 100644
--- a/app/containers/ActionSheet/BottomSheetContent.tsx
+++ b/app/containers/ActionSheet/BottomSheetContent.tsx
@@ -1,10 +1,10 @@
-import { Text, useWindowDimensions, type ViewProps } from 'react-native';
+import { FlatList, Text, useWindowDimensions, View, type ViewProps } from 'react-native';
 import React from 'react';
-import { BottomSheetView, BottomSheetFlatList } from '@discord/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import I18n from '../../i18n';
 import { useTheme } from '../../theme';
+import { isAndroid } from '../../lib/methods/helpers';
 import { type IActionSheetItem, Item } from './Item';
 import { type TActionSheetOptionsItem } from './Provider';
 import styles from './styles';
@@ -17,53 +17,71 @@ interface IBottomSheetContentProps {
 	hide: () => void;
 	children?: React.ReactElement | null;
 	onLayout: ViewProps['onLayout'];
+	fullContainer?: boolean;
+	contentMinHeight?: number;
+	scrollEnabled?: boolean;
 }
 
-const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onLayout }: IBottomSheetContentProps) => {
-	'use memo';
+const BottomSheetContent = React.memo(
+	({
+		options,
+		hasCancel,
+		hide,
+		children,
+		onLayout,
+		fullContainer,
+		contentMinHeight,
+		scrollEnabled
+	}: IBottomSheetContentProps) => {
+		'use memo';
 
-	const { colors } = useTheme();
-	const { bottom } = useSafeAreaInsets();
-	const { fontScale } = useWindowDimensions();
-	const height = 48 * fontScale;
+		const { colors } = useTheme();
+		const { bottom } = useSafeAreaInsets();
+		const { fontScale } = useWindowDimensions();
+		const height = 48 * fontScale;
+		const paddingBottom = isAndroid ? bottom + height : bottom;
+		const minHeightStyle = isAndroid || !contentMinHeight ? undefined : { minHeight: contentMinHeight };
 
-	const renderFooter = () =>
-		hasCancel ? (
-			<Touch
-				onPress={hide}
-				style={[styles.button, { backgroundColor: colors.surfaceHover, height }]}
-				accessibilityLabel={I18n.t('Cancel')}>
-				<Text style={[styles.text, { color: colors.fontDefault }]}>{I18n.t('Cancel')}</Text>
-			</Touch>
-		) : null;
+		const renderFooter = () =>
+			hasCancel ? (
+				<Touch
+					onPress={hide}
+					style={[styles.button, { backgroundColor: colors.surfaceHover, height }]}
+					accessibilityLabel={I18n.t('Cancel')}>
+					<Text style={[styles.text, { color: colors.fontDefault }]}>{I18n.t('Cancel')}</Text>
+				</Touch>
+			) : null;
 
-	const renderItem = ({ item }: { item: IActionSheetItem['item'] }) => <Item item={item} hide={hide} />;
+		const renderItem = ({ item }: { item: IActionSheetItem['item'] }) => <Item item={item} hide={hide} />;
 
-	if (options) {
+		if (options) {
+			return (
+				<FlatList
+					testID='action-sheet'
+					data={options}
+					refreshing={false}
+					keyExtractor={item => item.title}
+					bounces={false}
+					renderItem={renderItem}
+					style={{ backgroundColor: colors.strokeExtraDark }}
+					keyboardDismissMode='interactive'
+					indicatorStyle='black'
+					contentContainerStyle={{ paddingBottom, backgroundColor: colors.surfaceLight }}
+					ItemSeparatorComponent={List.Separator}
+					ListHeaderComponent={List.Separator}
+					ListFooterComponent={renderFooter}
+					onLayout={onLayout}
+					scrollEnabled={scrollEnabled}
+					nestedScrollEnabled={scrollEnabled && isAndroid}
+				/>
+			);
+		}
 		return (
-			<BottomSheetFlatList
-				testID='action-sheet'
-				data={options}
-				refreshing={false}
-				keyExtractor={item => item.title}
-				bounces={false}
-				renderItem={renderItem}
-				style={{ backgroundColor: colors.strokeExtraDark }}
-				keyboardDismissMode='interactive'
-				indicatorStyle='black'
-				contentContainerStyle={{ paddingBottom: bottom, backgroundColor: colors.surfaceLight }}
-				ItemSeparatorComponent={List.Separator}
-				ListHeaderComponent={List.Separator}
-				ListFooterComponent={renderFooter}
-				onLayout={onLayout}
-			/>
+			<View testID='action-sheet' style={fullContainer ? [styles.fullContainer, minHeightStyle] : undefined} onLayout={onLayout}>
+				{children}
+			</View>
 		);
 	}
-	return (
-		<BottomSheetView testID='action-sheet' style={styles.contentContainer} onLayout={onLayout}>
-			{children}
-		</BottomSheetView>
-	);
-});
+);
 
 export default BottomSheetContent;
diff --git a/app/containers/ActionSheet/Handle.tsx b/app/containers/ActionSheet/Handle.tsx
index f155de2fafa..fd14f0d2d03 100644
--- a/app/containers/ActionSheet/Handle.tsx
+++ b/app/containers/ActionSheet/Handle.tsx
@@ -1,17 +1,26 @@
 import React from 'react';
 import { View } from 'react-native';
+import { Pressable } from 'react-native-gesture-handler';
 
 import styles from './styles';
 import { themes } from '../../lib/constants/colors';
 import { useTheme } from '../../theme';
 
-export const Handle = React.memo(() => {
+export const Handle = ({ onPress }: { onPress: () => void }) => {
 	'use memo';
 
 	const { theme } = useTheme();
+
+	// We should use Pressable from gesture-handler to avoid issues with the keyboard
 	return (
-		<View style={styles.handle} testID='action-sheet-handle'>
+		<Pressable
+			onPress={onPress}
+			style={styles.handle}
+			testID='action-sheet-handle'
+			accessibilityRole='button'
+			accessibilityLabel='Close action sheet'
+			accessibilityHint='Dismisses the action sheet'>
 			<View style={[styles.handleIndicator, { backgroundColor: themes[theme].fontSecondaryInfo }]} />
-		</View>
+		</Pressable>
 	);
-});
+};
diff --git a/app/containers/ActionSheet/Provider.tsx b/app/containers/ActionSheet/Provider.tsx
index d74043234e3..849924daf1a 100644
--- a/app/containers/ActionSheet/Provider.tsx
+++ b/app/containers/ActionSheet/Provider.tsx
@@ -26,10 +26,15 @@ export type TActionSheetOptions = {
 	hasCancel?: boolean;
 	// children can both use snaps or dynamic
 	children?: React.ReactElement | null;
-	/** Required if your action sheet needs vertical scroll */
+	// Required if your action sheet needs vertical scroll
 	snaps?: (string | number)[];
+	// Optional snaps specifically for portrait orientation
+	portraitSnaps?: (string | number)[];
+	// Optional snaps specifically for landscape orientation
+	landscapeSnaps?: (string | number)[];
 	onClose?: () => void;
 	enableContentPanningGesture?: boolean;
+	fullContainer?: boolean;
 };
 export interface IActionSheetProvider {
 	showActionSheet: (item: TActionSheetOptions) => void;
diff --git a/app/containers/ActionSheet/styles.ts b/app/containers/ActionSheet/styles.ts
index ad9d40831e3..5a98ca3b545 100644
--- a/app/containers/ActionSheet/styles.ts
+++ b/app/containers/ActionSheet/styles.ts
@@ -4,9 +4,7 @@ import sharedStyles from '../../views/Styles';
 
 export default StyleSheet.create({
 	container: {
-		overflow: 'hidden',
-		borderTopLeftRadius: 16,
-		borderTopRightRadius: 16
+		overflow: 'hidden'
 	},
 	item: {
 		paddingHorizontal: 16,
@@ -43,10 +41,6 @@ export default StyleSheet.create({
 	backdrop: {
 		...StyleSheet.absoluteFillObject
 	},
-	bottomSheet: {
-		width: '50%',
-		marginHorizontal: '25%'
-	},
 	button: {
 		marginHorizontal: 16,
 		paddingHorizontal: 14,
@@ -70,6 +64,11 @@ export default StyleSheet.create({
 		marginRight: 8
 	},
 	contentContainer: {
-		flex: 1
+		flex: 0
+	},
+	fullContainer: {
+		width: '100%',
+		height: '100%',
+		flex: 0
 	}
 });
diff --git a/app/containers/ActionSheet/useActionSheetDetents.test.tsx b/app/containers/ActionSheet/useActionSheetDetents.test.tsx
new file mode 100644
index 00000000000..51be4312ffe
--- /dev/null
+++ b/app/containers/ActionSheet/useActionSheetDetents.test.tsx
@@ -0,0 +1,93 @@
+import { renderHook } from '@testing-library/react-native';
+
+import { useActionSheetDetents } from './useActionSheetDetents';
+
+describe('useActionSheetDetents', () => {
+	const windowHeight = 1000;
+
+	it('normalizes custom snaps when provided', () => {
+		const { result } = renderHook(() =>
+			useActionSheetDetents({
+				windowHeight,
+				bottomInset: 0,
+				itemHeight: 0,
+				optionsLength: 0,
+				snaps: [0.3, '80%', 2],
+				headerHeight: 0,
+				hasCancel: false,
+				contentHeight: 0
+			})
+		);
+
+		expect(result.current.detents).toEqual([0.3, 0.8, 1]);
+	});
+
+	it('returns two detents when options content is tall', () => {
+		const { result } = renderHook(() =>
+			useActionSheetDetents({
+				windowHeight,
+				bottomInset: 16,
+				itemHeight: 50,
+				optionsLength: 20,
+				snaps: undefined,
+				headerHeight: 24,
+				hasCancel: true,
+				contentHeight: 0
+			})
+		);
+
+		expect(result.current.maxHeight).toBe(windowHeight * 0.75);
+		expect(result.current.detents).toEqual([0.5, 0.75]);
+	});
+
+	it('returns a single clamped detent when options content is short', () => {
+		const { result } = renderHook(() =>
+			useActionSheetDetents({
+				windowHeight,
+				bottomInset: 10,
+				itemHeight: 20,
+				optionsLength: 3,
+				snaps: undefined,
+				headerHeight: 10,
+				hasCancel: false,
+				contentHeight: 0
+			})
+		);
+
+		expect(result.current.detents).toEqual([0.108]);
+	});
+
+	it('computes detent from content height when there are no options', () => {
+		const { result } = renderHook(() =>
+			useActionSheetDetents({
+				windowHeight,
+				bottomInset: 50,
+				itemHeight: 0,
+				optionsLength: 0,
+				snaps: undefined,
+				headerHeight: 0,
+				hasCancel: false,
+				contentHeight: 300
+			})
+		);
+
+		expect(result.current.detents).toEqual([(300 + 50) / windowHeight]);
+	});
+
+	it('falls back to minimum height when no content or options', () => {
+		const { result } = renderHook(() =>
+			useActionSheetDetents({
+				windowHeight,
+				bottomInset: 0,
+				itemHeight: 0,
+				optionsLength: 0,
+				snaps: undefined,
+				headerHeight: 0,
+				hasCancel: false,
+				contentHeight: 0
+			})
+		);
+
+		expect(result.current.detents).toEqual([0.15]);
+	});
+});
diff --git a/app/containers/ActionSheet/useActionSheetDetents.ts b/app/containers/ActionSheet/useActionSheetDetents.ts
new file mode 100644
index 00000000000..7dd747fa935
--- /dev/null
+++ b/app/containers/ActionSheet/useActionSheetDetents.ts
@@ -0,0 +1,94 @@
+import type { SheetDetent } from '@lodev09/react-native-true-sheet';
+import { useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+
+const ACTION_SHEET_MIN_HEIGHT_FRACTION = 0.15;
+const ACTION_SHEET_MAX_HEIGHT_FRACTION = 0.75;
+const SCROLL_ENABLED_THRESHOLD = 0.6;
+export const HANDLE_HEIGHT = 28;
+
+function normalizeSnapsToDetents(snaps: (string | number)[]): number[] {
+	return snaps
+		.slice(0, 3)
+		.map(snap => {
+			if (typeof snap === 'number') {
+				if (snap <= 0 || snap > 1) return Math.min(1, Math.max(0.1, snap));
+				return snap;
+			}
+			const match = String(snap).match(/^(\d+(?:\.\d+)?)\s*%$/);
+			if (match) return Math.min(1, Math.max(0.1, Number(match[1]) / 100));
+			return 0.5;
+		})
+		.sort((a, b) => a - b);
+}
+
+type UseActionSheetDetentsParams = {
+	windowHeight: number;
+	bottomInset: number;
+	itemHeight: number;
+	optionsLength?: number;
+	snaps?: (string | number)[];
+	headerHeight?: number;
+	hasCancel?: boolean;
+	contentHeight: number;
+};
+
+function heightToDetent(height: number, screenHeight: number): number {
+	return Math.max(0, height / screenHeight);
+}
+
+export function useActionSheetDetents({
+	windowHeight,
+	bottomInset,
+	itemHeight,
+	optionsLength = 0,
+	snaps,
+	headerHeight = 0,
+	hasCancel = false,
+	contentHeight
+}: UseActionSheetDetentsParams): { detents: SheetDetent[]; maxHeight: number; scrollEnabled: boolean } {
+	const { fontScale } = useWindowDimensions();
+	const CANCEL_HEIGHT = 48 * fontScale;
+
+	return useMemo(() => {
+		const maxHeight = windowHeight * ACTION_SHEET_MAX_HEIGHT_FRACTION;
+		const hasOptions = optionsLength > 0;
+
+		const maxSnap = hasOptions
+			? Math.min(
+					(itemHeight + 0.5) * optionsLength + HANDLE_HEIGHT + headerHeight + bottomInset + (hasCancel ? CANCEL_HEIGHT : 0),
+					maxHeight
+			  )
+			: 0;
+
+		let detents: SheetDetent[];
+		let scrollEnabled = false;
+
+		if (snaps?.length) {
+			detents = normalizeSnapsToDetents(snaps);
+		} else if (hasOptions) {
+			if (maxSnap > windowHeight * SCROLL_ENABLED_THRESHOLD) {
+				detents = [0.5, ACTION_SHEET_MAX_HEIGHT_FRACTION];
+				scrollEnabled = true;
+			} else {
+				const measuredHeight =
+					optionsLength * itemHeight + HANDLE_HEIGHT + headerHeight + bottomInset + (hasCancel ? CANCEL_HEIGHT : 0);
+
+				scrollEnabled = false;
+				detents = [heightToDetent(Math.round(measuredHeight), windowHeight)];
+			}
+		} else if (contentHeight > 0) {
+			const rawContentDetent = (contentHeight + bottomInset) / windowHeight;
+			const contentDetent = Math.min(
+				ACTION_SHEET_MAX_HEIGHT_FRACTION,
+				Math.max(ACTION_SHEET_MIN_HEIGHT_FRACTION, rawContentDetent)
+			);
+
+			detents = [contentDetent];
+		} else {
+			detents = [ACTION_SHEET_MIN_HEIGHT_FRACTION];
+		}
+
+		return { detents, maxHeight, scrollEnabled };
+	}, [bottomInset, contentHeight, hasCancel, headerHeight, itemHeight, optionsLength, snaps, windowHeight]);
+}
diff --git a/app/containers/AudioPlayer/Seek.tsx b/app/containers/AudioPlayer/Seek.tsx
index eecd5d444e0..6b70602df0f 100644
--- a/app/containers/AudioPlayer/Seek.tsx
+++ b/app/containers/AudioPlayer/Seek.tsx
@@ -65,7 +65,7 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
 	};
 
 	const onGestureEvent = useAnimatedGestureHandler<PanGestureHandlerGestureEvent, { offsetX: number }>({
-		onStart: (event, ctx) => {
+		onStart: (_event, ctx) => {
 			isPanning.value = true;
 			ctx.offsetX = translateX.value;
 		},
diff --git a/app/containers/Avatar/Avatar.stories.tsx b/app/containers/Avatar/Avatar.stories.tsx
index 0a2503e3c7d..0af49c24552 100644
--- a/app/containers/Avatar/Avatar.stories.tsx
+++ b/app/containers/Avatar/Avatar.stories.tsx
@@ -64,7 +64,7 @@ export const CustomBorderRadius = () => <Avatar text='Avatar' server={server} bo
 
 export const Children = () => (
 	<Avatar text='Avatar' server={server} size={56}>
-		<Status size={24} style={[sharedStyles.status]} status='busy' />
+		<Status size={24} style={sharedStyles.status} status='busy' />
 	</Avatar>
 );
 
diff --git a/app/containers/Avatar/Avatar.tsx b/app/containers/Avatar/Avatar.tsx
index b203f290413..089730b0112 100644
--- a/app/containers/Avatar/Avatar.tsx
+++ b/app/containers/Avatar/Avatar.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
 import { Image } from 'expo-image';
-import Touchable from 'react-native-platform-touchable';
 import { settings as RocketChatSettings } from '@rocket.chat/sdk';
 
 import Emoji from '../markdown/components/emoji/Emoji';
@@ -10,6 +9,7 @@ import { SubscriptionType } from '../../definitions';
 import { type IAvatar } from './interfaces';
 import MarkdownContext from '../markdown/contexts/MarkdownContext';
 import I18n from '../../i18n';
+import Touch from '../Touch';
 
 const Avatar = React.memo(
 	({
@@ -97,9 +97,9 @@ const Avatar = React.memo(
 
 		if (onPress) {
 			image = (
-				<Touchable accessible={accessible} accessibilityLabel={avatarAccessibilityLabel} onPress={onPress}>
+				<Touch accessible={accessible} accessibilityLabel={avatarAccessibilityLabel} onPress={onPress}>
 					{image}
-				</Touchable>
+				</Touch>
 			);
 		}
 
diff --git a/app/containers/Avatar/AvatarContainer.tsx b/app/containers/Avatar/AvatarContainer.tsx
index d9e610eda7b..4e54161efec 100644
--- a/app/containers/Avatar/AvatarContainer.tsx
+++ b/app/containers/Avatar/AvatarContainer.tsx
@@ -58,7 +58,6 @@ const AvatarContainer = ({
 			size={size}
 			borderRadius={borderRadius}
 			type={type}
-			children={children}
 			userId={id}
 			token={token}
 			onPress={onPress}
@@ -72,8 +71,9 @@ const AvatarContainer = ({
 			serverVersion={serverVersion}
 			cdnPrefix={cdnPrefix}
 			accessibilityLabel={accessibilityLabel}
-			accessible={accessible}
-		/>
+			accessible={accessible}>
+			{children}
+		</Avatar>
 	);
 };
 
diff --git a/app/containers/Avatar/AvatarWithEdit.tsx b/app/containers/Avatar/AvatarWithEdit.tsx
index 49c96bd5f47..41767a01f9b 100644
--- a/app/containers/Avatar/AvatarWithEdit.tsx
+++ b/app/containers/Avatar/AvatarWithEdit.tsx
@@ -61,12 +61,12 @@ const AvatarWithEdit = ({
 				size={120}
 				borderRadius={borderRadius}
 				type={type}
-				children={children}
 				onPress={onPress}
 				getCustomEmoji={getCustomEmoji}
 				isStatic={isStatic}
-				rid={rid}
-			/>
+				rid={rid}>
+				{children}
+			</AvatarContainer>
 			{handleEdit && serverVersion && compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '3.6.0') ? (
 				<Button
 					accessibilityLabel={editAccessibilityLabel}
diff --git a/app/containers/Avatar/__snapshots__/Avatar.test.tsx.snap b/app/containers/Avatar/__snapshots__/Avatar.test.tsx.snap
index 0a0d7df4ae6..a4fe18c8b84 100644
--- a/app/containers/Avatar/__snapshots__/Avatar.test.tsx.snap
+++ b/app/containers/Avatar/__snapshots__/Avatar.test.tsx.snap
@@ -456,14 +456,12 @@ exports[`Story Snapshots: Children should match snapshot 1`] = `
               "textAlignVertical": "center",
               "width": 24,
             },
-            [
-              {
-                "borderRadius": 10,
-                "bottom": -2,
-                "position": "absolute",
-                "right": -2,
-              },
-            ],
+            {
+              "borderRadius": 10,
+              "bottom": -2,
+              "position": "absolute",
+              "right": -2,
+            },
           ],
         ],
         {
@@ -665,15 +663,13 @@ exports[`Story Snapshots: Emoji should match snapshot 1`] = `
 >
   <View
     style={
-      [
-        {
-          "transform": [
-            {
-              "translateY": 0,
-            },
-          ],
-        },
-      ]
+      {
+        "transform": [
+          {
+            "translateY": 0,
+          },
+        ],
+      }
     }
   >
     <ViewManagerAdapter_ExpoImage
@@ -839,78 +835,103 @@ exports[`Story Snapshots: Touchable should match snapshot 1`] = `
   }
   testID="avatar"
 >
-  <View
-    accessibilityLabel="Avatar's avatar"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
+  <RNGestureHandlerButton
+    activeOpacity={1}
     collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+    delayLongPress={600}
+    enabled={true}
+    handlerTag={1}
+    handlerType="NativeViewGestureHandler"
+    innerRef={null}
+    onActiveStateChange={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onPress={[Function]}
+    rippleColor="#E4E7EA"
     style={
-      {
-        "opacity": 1,
-      }
+      [
+        {
+          "backgroundColor": undefined,
+          "borderRadius": undefined,
+          "margin": undefined,
+          "marginBottom": undefined,
+          "marginEnd": undefined,
+          "marginHorizontal": undefined,
+          "marginLeft": undefined,
+          "marginRight": undefined,
+          "marginStart": undefined,
+          "marginTop": undefined,
+          "marginVertical": undefined,
+        },
+        {
+          "cursor": undefined,
+        },
+      ]
     }
+    underlayColor="#E4E7EA"
   >
-    <ViewManagerAdapter_ExpoImage
-      borderRadius={4}
-      containerViewRef={"[React.ref]"}
-      contentFit="cover"
-      contentPosition={
-        {
-          "left": "50%",
-          "top": "50%",
-        }
-      }
-      height={56}
-      nativeViewRef={"[React.ref]"}
-      onError={[Function]}
-      onLoad={[Function]}
-      onLoadStart={[Function]}
-      onProgress={[Function]}
-      placeholder={[]}
-      priority="high"
-      source={
-        [
-          {
-            "headers": undefined,
-            "uri": "https://open.rocket.chat/avatar/Avatar?format=png&size=112",
-          },
-        ]
-      }
+    <View
+      collapsable={false}
       style={
         {
-          "borderRadius": 4,
-          "height": 56,
-          "width": 56,
+          "backgroundColor": "#E4E7EA",
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "bottom": 0,
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         }
       }
-      transition={null}
-      width={56}
     />
-  </View>
+    <View
+      accessibilityLabel="Avatar's avatar"
+      accessible={true}
+      style={{}}
+    >
+      <ViewManagerAdapter_ExpoImage
+        borderRadius={4}
+        containerViewRef={"[React.ref]"}
+        contentFit="cover"
+        contentPosition={
+          {
+            "left": "50%",
+            "top": "50%",
+          }
+        }
+        height={56}
+        nativeViewRef={"[React.ref]"}
+        onError={[Function]}
+        onLoad={[Function]}
+        onLoadStart={[Function]}
+        onProgress={[Function]}
+        placeholder={[]}
+        priority="high"
+        source={
+          [
+            {
+              "headers": undefined,
+              "uri": "https://open.rocket.chat/avatar/Avatar?format=png&size=112",
+            },
+          ]
+        }
+        style={
+          {
+            "borderRadius": 4,
+            "height": 56,
+            "width": 56,
+          }
+        }
+        transition={null}
+        width={56}
+      />
+    </View>
+  </RNGestureHandlerButton>
 </View>
 `;
 
diff --git a/app/containers/Button/Button.test.tsx b/app/containers/Button/Button.test.tsx
index c8e30d229fb..1f63f7d4976 100644
--- a/app/containers/Button/Button.test.tsx
+++ b/app/containers/Button/Button.test.tsx
@@ -32,6 +32,10 @@ const TestButton = ({ loading = false, disabled = false }) => (
 );
 
 describe('ButtonTests', () => {
+	beforeEach(() => {
+		onPressMock.mockClear();
+	});
+
 	test('rendered', async () => {
 		const { findByTestId } = render(<TestButton />);
 		const Button = await findByTestId(testProps.testID);
@@ -57,11 +61,12 @@ describe('ButtonTests', () => {
 		expect(ButtonTitle).toBeNull();
 	});
 
-	test('should not trigger onPress on disabled button', async () => {
+	test('disabled button is in disabled state', async () => {
 		const { findByTestId } = render(<TestButton disabled={true} />);
-		const Button = await findByTestId(testProps.testID);
-		fireEvent.press(Button);
-		expect(onPressMock).not.toHaveBeenCalled();
+		const button = await findByTestId(testProps.testID);
+		// In the test environment, RNGH Pressable may still invoke onPress when disabled,
+		// so we assert the button is in a disabled state (enabled={false}).
+		expect(button.props.enabled).toBe(false);
 	});
 
 	test('should trigger onPress function on button press', async () => {
diff --git a/app/containers/Button/__snapshots__/Button.test.tsx.snap b/app/containers/Button/__snapshots__/Button.test.tsx.snap
index 3561980dd0b..4c0bdb49306 100644
--- a/app/containers/Button/__snapshots__/Button.test.tsx.snap
+++ b/app/containers/Button/__snapshots__/Button.test.tsx.snap
@@ -1,49 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Story Snapshots: CustomButton should match snapshot 1`] = `
-<View
+<RNGestureHandlerButton
   accessibilityLabel="Press me!"
   accessibilityRole="button"
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": undefined,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
+  collapsable={false}
+  enabled={true}
+  hitSlop={
     {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
+      "bottom": 0,
+      "left": 0,
+      "right": 0,
+      "top": 0,
     }
   }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
+  rippleColor="transparent"
   style={
-    {
-      "backgroundColor": "purple",
-      "borderRadius": 4,
-      "justifyContent": "center",
-      "marginBottom": 12,
-      "opacity": 1,
-      "padding": 10,
-      "paddingHorizontal": 16,
-      "paddingVertical": 14,
-    }
+    [
+      {},
+      [
+        {
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 14,
+        },
+        {
+          "borderRadius": 4,
+          "marginBottom": 12,
+        },
+        {
+          "backgroundColor": "purple",
+        },
+        {},
+        {
+          "padding": 10,
+        },
+      ],
+    ]
   }
   testID="testButton"
+  testOnly_onPress={[Function]}
 >
   <Text
     style={
@@ -68,52 +64,47 @@ exports[`Story Snapshots: CustomButton should match snapshot 1`] = `
   >
     Press me!
   </Text>
-</View>
+</RNGestureHandlerButton>
 `;
 
 exports[`Story Snapshots: DisabledButton should match snapshot 1`] = `
-<View
+<RNGestureHandlerButton
   accessibilityLabel="Press me!"
   accessibilityRole="button"
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": true,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
+  collapsable={false}
+  enabled={false}
+  hitSlop={
     {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
+      "bottom": 0,
+      "left": 0,
+      "right": 0,
+      "top": 0,
     }
   }
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
+  rippleColor="transparent"
   style={
-    {
-      "backgroundColor": "#D1EBFE",
-      "borderRadius": 4,
-      "justifyContent": "center",
-      "marginBottom": 12,
-      "opacity": 1,
-      "paddingHorizontal": 16,
-      "paddingVertical": 14,
-    }
+    [
+      {},
+      [
+        {
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 14,
+        },
+        {
+          "borderRadius": 4,
+          "marginBottom": 12,
+        },
+        {
+          "backgroundColor": "#D1EBFE",
+        },
+        {},
+        undefined,
+      ],
+    ]
   }
   testID="testButton"
+  testOnly_onPress={[Function]}
 >
   <Text
     style={
@@ -134,52 +125,47 @@ exports[`Story Snapshots: DisabledButton should match snapshot 1`] = `
   >
     Press me!
   </Text>
-</View>
+</RNGestureHandlerButton>
 `;
 
 exports[`Story Snapshots: DisabledLoadingButton should match snapshot 1`] = `
-<View
+<RNGestureHandlerButton
   accessibilityLabel="Press me!"
   accessibilityRole="button"
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": true,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
+  collapsable={false}
+  enabled={false}
+  hitSlop={
     {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
+      "bottom": 0,
+      "left": 0,
+      "right": 0,
+      "top": 0,
     }
   }
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
+  rippleColor="transparent"
   style={
-    {
-      "backgroundColor": "#D1EBFE",
-      "borderRadius": 4,
-      "justifyContent": "center",
-      "marginBottom": 12,
-      "opacity": 1,
-      "paddingHorizontal": 16,
-      "paddingVertical": 14,
-    }
+    [
+      {},
+      [
+        {
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 14,
+        },
+        {
+          "borderRadius": 4,
+          "marginBottom": 12,
+        },
+        {
+          "backgroundColor": "#D1EBFE",
+        },
+        {},
+        undefined,
+      ],
+    ]
   }
   testID="testButton"
+  testOnly_onPress={[Function]}
 >
   <ActivityIndicator
     color="#FFFFFF"
@@ -189,52 +175,47 @@ exports[`Story Snapshots: DisabledLoadingButton should match snapshot 1`] = `
       }
     }
   />
-</View>
+</RNGestureHandlerButton>
 `;
 
 exports[`Story Snapshots: LoadingButton should match snapshot 1`] = `
-<View
+<RNGestureHandlerButton
   accessibilityLabel="Press me!"
   accessibilityRole="button"
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": true,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
+  collapsable={false}
+  enabled={false}
+  hitSlop={
     {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
+      "bottom": 0,
+      "left": 0,
+      "right": 0,
+      "top": 0,
     }
   }
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
+  rippleColor="transparent"
   style={
-    {
-      "backgroundColor": "#D1EBFE",
-      "borderRadius": 4,
-      "justifyContent": "center",
-      "marginBottom": 12,
-      "opacity": 1,
-      "paddingHorizontal": 16,
-      "paddingVertical": 14,
-    }
+    [
+      {},
+      [
+        {
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 14,
+        },
+        {
+          "borderRadius": 4,
+          "marginBottom": 12,
+        },
+        {
+          "backgroundColor": "#D1EBFE",
+        },
+        {},
+        undefined,
+      ],
+    ]
   }
   testID="testButton"
+  testOnly_onPress={[Function]}
 >
   <ActivityIndicator
     color="#FFFFFF"
@@ -244,52 +225,47 @@ exports[`Story Snapshots: LoadingButton should match snapshot 1`] = `
       }
     }
   />
-</View>
+</RNGestureHandlerButton>
 `;
 
 exports[`Story Snapshots: PrimaryButton should match snapshot 1`] = `
-<View
+<RNGestureHandlerButton
   accessibilityLabel="Press me!"
   accessibilityRole="button"
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": undefined,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
+  collapsable={false}
+  enabled={true}
+  hitSlop={
     {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
+      "bottom": 0,
+      "left": 0,
+      "right": 0,
+      "top": 0,
     }
   }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
+  rippleColor="transparent"
   style={
-    {
-      "backgroundColor": "#156FF5",
-      "borderRadius": 4,
-      "justifyContent": "center",
-      "marginBottom": 12,
-      "opacity": 1,
-      "paddingHorizontal": 16,
-      "paddingVertical": 14,
-    }
+    [
+      {},
+      [
+        {
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 14,
+        },
+        {
+          "borderRadius": 4,
+          "marginBottom": 12,
+        },
+        {
+          "backgroundColor": "#156FF5",
+        },
+        {},
+        undefined,
+      ],
+    ]
   }
   testID="testButton"
+  testOnly_onPress={[Function]}
 >
   <Text
     style={
@@ -310,52 +286,47 @@ exports[`Story Snapshots: PrimaryButton should match snapshot 1`] = `
   >
     Press me!
   </Text>
-</View>
+</RNGestureHandlerButton>
 `;
 
 exports[`Story Snapshots: SecondaryButton should match snapshot 1`] = `
-<View
+<RNGestureHandlerButton
   accessibilityLabel="Press me!"
   accessibilityRole="button"
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": undefined,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
+  collapsable={false}
+  enabled={true}
+  hitSlop={
     {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
+      "bottom": 0,
+      "left": 0,
+      "right": 0,
+      "top": 0,
     }
   }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
+  rippleColor="transparent"
   style={
-    {
-      "backgroundColor": "#E4E7EA",
-      "borderRadius": 4,
-      "justifyContent": "center",
-      "marginBottom": 12,
-      "opacity": 1,
-      "paddingHorizontal": 16,
-      "paddingVertical": 14,
-    }
+    [
+      {},
+      [
+        {
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 14,
+        },
+        {
+          "borderRadius": 4,
+          "marginBottom": 12,
+        },
+        {
+          "backgroundColor": "#E4E7EA",
+        },
+        {},
+        undefined,
+      ],
+    ]
   }
   testID="testButton"
+  testOnly_onPress={[Function]}
 >
   <Text
     style={
@@ -376,52 +347,47 @@ exports[`Story Snapshots: SecondaryButton should match snapshot 1`] = `
   >
     Press me!
   </Text>
-</View>
+</RNGestureHandlerButton>
 `;
 
 exports[`Story Snapshots: SmallButton should match snapshot 1`] = `
-<View
+<RNGestureHandlerButton
   accessibilityLabel="Press me!"
   accessibilityRole="button"
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": undefined,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
+  collapsable={false}
+  enabled={true}
+  hitSlop={
     {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
+      "bottom": 0,
+      "left": 0,
+      "right": 0,
+      "top": 0,
     }
   }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
+  rippleColor="transparent"
   style={
-    {
-      "alignSelf": "center",
-      "backgroundColor": "#156FF5",
-      "borderRadius": 4,
-      "marginBottom": 12,
-      "opacity": 1,
-      "paddingHorizontal": 12,
-      "paddingVertical": 8,
-    }
+    [
+      {},
+      [
+        {
+          "alignSelf": "center",
+          "paddingHorizontal": 12,
+          "paddingVertical": 8,
+        },
+        {
+          "borderRadius": 4,
+          "marginBottom": 12,
+        },
+        {
+          "backgroundColor": "#156FF5",
+        },
+        {},
+        undefined,
+      ],
+    ]
   }
   testID="testButton"
+  testOnly_onPress={[Function]}
 >
   <Text
     style={
@@ -444,5 +410,5 @@ exports[`Story Snapshots: SmallButton should match snapshot 1`] = `
   >
     Press me!
   </Text>
-</View>
+</RNGestureHandlerButton>
 `;
diff --git a/app/containers/Button/index.tsx b/app/containers/Button/index.tsx
index 1fe25724e81..2417157d8ae 100644
--- a/app/containers/Button/index.tsx
+++ b/app/containers/Button/index.tsx
@@ -1,13 +1,12 @@
 import React from 'react';
 import { type StyleProp, StyleSheet, Text, type TextStyle, type ViewStyle } from 'react-native';
-import Touchable, { type PlatformTouchableProps } from 'react-native-platform-touchable';
+import { Pressable, type PressableProps } from 'react-native-gesture-handler';
 
 import { useTheme } from '../../theme';
 import sharedStyles from '../../views/Styles';
 import ActivityIndicator from '../ActivityIndicator';
 
-// @ts-ignore
-interface IButtonProps extends PlatformTouchableProps {
+interface IButtonProps extends PressableProps {
 	title: string;
 	onPress: () => void;
 	type?: 'primary' | 'secondary';
@@ -88,16 +87,15 @@ const Button: React.FC<IButtonProps> = ({
 	];
 
 	return (
-		<Touchable
+		<Pressable
 			onPress={onPress}
 			disabled={isDisabled}
-			// @ts-ignore
 			style={containerStyle}
 			accessibilityLabel={title}
 			accessibilityRole='button'
 			{...otherProps}>
 			{loading ? <ActivityIndicator color={resolvedTextColor} style={{ padding: 0 }} /> : <Text style={textStyle}>{title}</Text>}
-		</Touchable>
+		</Pressable>
 	);
 };
 
diff --git a/app/containers/CallHeader.tsx b/app/containers/CallHeader.tsx
index 64f937fa00e..320752a38ae 100644
--- a/app/containers/CallHeader.tsx
+++ b/app/containers/CallHeader.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import Touchable from 'react-native-platform-touchable';
 import { A11y } from 'react-native-a11y-order';
 
 import { useAppSelector } from '../lib/hooks/useAppSelector';
@@ -12,6 +11,7 @@ import AvatarContainer from './Avatar';
 import StatusContainer from './Status';
 import DotsLoader from './DotsLoader';
 import I18n from '../i18n';
+import Touch from './Touch';
 
 type TCallHeader = {
 	mic: boolean;
@@ -49,24 +49,24 @@ export const CallHeader = ({ mic, cam, setCam, setMic, title, avatar, uid, name,
 					</View>
 					<View style={style.actionSheetHeaderButtons}>
 						<A11y.Index index={1}>
-							<Touchable
+							<Touch
 								accessibilityLabel={cam ? I18n.t('Turn_camera_off') : I18n.t('Turn_camera_on')}
 								onPress={() => setCam(!cam)}
 								style={[style.iconCallContainerRight, { backgroundColor: handleColors(cam).button }]}
 								hitSlop={BUTTON_HIT_SLOP}
-								disabled={calling}>
+								enabled={!calling}>
 								<CustomIcon name={cam ? 'camera' : 'camera-disabled'} size={24} color={handleColors(cam).icon} />
-							</Touchable>
+							</Touch>
 						</A11y.Index>
 						<A11y.Index index={2}>
-							<Touchable
+							<Touch
 								accessibilityLabel={mic ? I18n.t('Turn_mic_off') : I18n.t('Turn_mic_on')}
 								onPress={() => setMic(!mic)}
 								style={[style.iconCallContainer, { backgroundColor: handleColors(mic).button }]}
 								hitSlop={BUTTON_HIT_SLOP}
-								disabled={calling}>
+								enabled={!calling}>
 								<CustomIcon name={mic ? 'microphone' : 'microphone-disabled'} size={24} color={handleColors(mic).icon} />
-							</Touchable>
+							</Touch>
 						</A11y.Index>
 					</View>
 				</View>
diff --git a/app/containers/CustomIcon/mappedIcons.js b/app/containers/CustomIcon/mappedIcons.js
index 1bf3d4d5429..7bec155622e 100644
--- a/app/containers/CustomIcon/mappedIcons.js
+++ b/app/containers/CustomIcon/mappedIcons.js
@@ -160,9 +160,10 @@ export const mappedIcons = {
 	'percentage': 59777,
 	'phone': 59806,
 	'phone-disabled': 59804,
-	'phone-end': 59805,
 	'phone-in': 59809,
-	'phone-issue': 59835,
+	'phone-issue': 59879,
+	'phone-off': 59805,
+	'phone-question-mark': 59835,
 	'pin': 59808,
 	'pin-map': 59807,
 	'play': 59811,
diff --git a/app/containers/CustomIcon/selection.json b/app/containers/CustomIcon/selection.json
index ee13b9c0d91..5e7ce4077e3 100644
--- a/app/containers/CustomIcon/selection.json
+++ b/app/containers/CustomIcon/selection.json
@@ -1 +1 @@
-{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M727.050 406.195c12.259-12.73 11.878-32.986-0.854-45.245-12.73-12.259-32.986-11.878-45.245 0.854l-254.285 264.061-115.615-120.061c-12.259-12.733-32.516-13.114-45.247-0.854s-13.113 32.515-0.854 45.245l138.666 144c6.032 6.266 14.355 9.805 23.050 9.805 8.698 0 17.021-3.539 23.053-9.805l277.331-288z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["check-single"],"grid":0},"attrs":[{}],"properties":{"order":1151,"id":0,"name":"check-single","prevSize":32,"code":59876},"setIdx":0,"setId":6,"iconIdx":0},{"icon":{"paths":["M599.050 406.195c12.259-12.73 11.878-32.986-0.854-45.245-12.73-12.259-32.986-11.878-45.245 0.854l-254.284 264.061-115.616-120.061c-12.259-12.733-32.516-13.114-45.247-0.854s-13.113 32.515-0.854 45.245l138.667 144c6.032 6.266 14.354 9.805 23.050 9.805s17.018-3.539 23.052-9.805l277.331-288z","M887.021 406.227c12.275-12.714 11.92-32.973-0.794-45.248s-32.973-11.92-45.248 0.794l-255.040 264.157-50.918-52.739c-12.275-12.714-32.534-13.069-45.248-0.794s-13.069 32.534-0.794 45.248l73.939 76.582c6.029 6.246 14.339 9.773 23.021 9.773s16.992-3.526 23.021-9.773l278.061-288z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{},{}]},"tags":["check-double"],"grid":0},"attrs":[{},{}],"properties":{"order":1150,"id":1,"name":"check-double","prevSize":32,"code":59875},"setIdx":0,"setId":6,"iconIdx":1},{"icon":{"paths":["M511.997 256c35.347 0 64-28.654 64-64s-28.653-64-64-64c-35.344 0-64 28.654-64 64s28.656 64 64 64zM639.997 192c0 70.692-57.306 128-128 128-70.691 0-128-57.308-128-128s57.309-128 128-128c70.694 0 128 57.308 128 128z","M192.859 431.645c0.669 1.446 2.097 3.488 5.957 5.232 18.33 8.272 67.426 22.054 115.377 34.39 23.244 5.981 45.187 11.366 61.327 15.261 8.067 1.946 14.672 3.517 19.258 4.598l7.078 1.664c0 0 0.026 0.003-0.218 1.046l0.218-1.046c8.33 1.933 15.562 7.123 20.042 14.406 4.48 7.28 5.859 16.054 3.834 24.358l-83.856 343.437c-0.483 1.984-1.155 3.914-2.006 5.77-1.155 2.509-1.242 5.302-0.272 7.853 0.982 2.573 3.053 4.893 6.006 6.237 2.976 1.357 6.438 1.523 9.568 0.435 3.114-1.082 5.44-3.238 6.688-5.754 0.362-0.73 0.749-1.443 1.165-2.144l121.434-204.461c5.766-9.706 16.224-15.658 27.514-15.658 11.293 0 21.747 5.952 27.514 15.658l121.437 204.461c0.413 0.701 0.803 1.414 1.165 2.144 1.245 2.515 3.571 4.672 6.685 5.754 3.13 1.088 6.592 0.922 9.568-0.435 2.957-1.344 5.027-3.664 6.006-6.237 0.97-2.55 0.883-5.344-0.269-7.853-0.854-1.856-1.526-3.786-2.010-5.77l-83.853-343.437c-2.029-8.304-0.65-17.075 3.83-24.358 4.48-7.28 11.686-12.467 20.013-14.4l0.266 1.139c-0.262-1.139-0.266-1.139-0.266-1.139l1.821-0.426 5.283-1.245c4.582-1.082 11.184-2.653 19.248-4.598 16.138-3.894 38.074-9.28 61.312-15.261 47.936-12.333 97.046-26.118 115.424-34.4 3.888-1.75 5.322-3.802 5.994-5.248 0.813-1.763 1.155-4.179 0.557-6.861-0.602-2.678-1.974-4.858-3.629-6.259-1.402-1.187-3.76-2.499-8.109-2.499h-615.975c-4.316 0-6.656 1.302-8.052 2.486-1.647 1.402-3.026 3.581-3.628 6.272s-0.26 5.12 0.556 6.886zM172.486 495.21c-75.805-34.218-48.392-143.21 31.498-143.21h615.975c79.907 0 107.44 108.989 31.478 143.216-24.554 11.066-79.939 26.24-125.766 38.032-21.494 5.533-41.85 10.554-57.651 14.384l75.597 309.616c6.986 17.306 7.216 36.614 0.538 54.147-7.085 18.598-21.283 33.501-39.283 41.699-17.978 8.189-38.474 9.126-57.123 2.64-18.234-6.342-33.469-19.36-42.39-36.566l-93.386-157.232-93.386 157.232c-8.918 17.206-24.157 30.224-42.387 36.566-18.653 6.486-39.146 5.549-57.126-2.64-18-8.198-32.198-23.101-39.282-41.699-6.678-17.533-6.449-36.842 0.539-54.147l75.595-309.613c-15.808-3.83-36.172-8.854-57.676-14.387-45.829-11.789-101.229-26.966-125.761-38.038z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{},{}]},"tags":["accessibility"],"grid":0},"attrs":[{},{}],"properties":{"order":1147,"id":2,"name":"accessibility","prevSize":32,"code":59874},"setIdx":0,"setId":6,"iconIdx":2},{"icon":{"paths":["M512 928c-229.75 0-416-186.246-416-416 0-229.75 186.25-416 416-416 229.754 0 416 186.25 416 416 0 229.754-186.246 416-416 416zM678.176 433.884c12.742-12.247 13.139-32.504 0.896-45.246-12.25-12.742-32.506-13.143-45.247-0.896l-207.030 198.991-68.644-65.834c-12.755-12.232-33.012-11.809-45.245 0.946s-11.809 33.012 0.946 45.245l90.819 87.1c12.39 11.885 31.948 11.872 44.324-0.026l229.183-220.28z"],"attrs":[{"fill":"rgb(20, 134, 96)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":0}]},"tags":["success-circle"],"grid":0},"attrs":[{"fill":"rgb(20, 134, 96)"}],"properties":{"order":1143,"id":3,"name":"success-circle","prevSize":32,"code":59869},"setIdx":0,"setId":6,"iconIdx":3},{"icon":{"paths":["M928 512c0-229.75-186.246-416-416-416-229.75 0-416 186.25-416 416 0 229.754 186.25 416 416 416 229.754 0 416-186.246 416-416zM662.63 361.373c12.493 12.497 12.493 32.758 0 45.254l-105.375 105.373 105.375 105.373c12.493 12.497 12.493 32.758 0 45.258-12.499 12.493-32.761 12.493-45.258 0l-105.373-105.375-105.373 105.375c-12.497 12.493-32.758 12.493-45.254 0-12.497-12.499-12.497-32.761 0-45.258l105.372-105.373-105.372-105.373c-12.497-12.497-12.497-32.758 0-45.254s32.758-12.497 45.254 0l105.373 105.372 105.373-105.372c12.497-12.497 32.758-12.497 45.258 0z"],"attrs":[{"fill":"rgb(212, 12, 38)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":1}]},"tags":["error-circle"],"grid":0},"attrs":[{"fill":"rgb(212, 12, 38)"}],"properties":{"order":1144,"id":4,"name":"error-circle","prevSize":32,"code":59873},"setIdx":0,"setId":6,"iconIdx":4},{"icon":{"paths":["M512 819.2c169.661 0 307.2-137.539 307.2-307.2s-137.539-307.2-307.2-307.2c-169.662 0-307.2 137.538-307.2 307.2s137.538 307.2 307.2 307.2z","M1024 512c0-282.77-229.228-512-512-512-282.77 0-512 229.23-512 512 0 282.772 229.23 512 512 512 282.772 0 512-229.228 512-512zM921.6 512c0 226.217-183.383 409.6-409.6 409.6-226.216 0-409.6-183.383-409.6-409.6 0-226.215 183.384-409.6 409.6-409.6 226.217 0 409.6 183.385 409.6 409.6z"],"attrs":[{"fill":"rgb(21, 111, 245)"},{"fill":"rgb(21, 111, 245)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912111124512431405712431908124569921291162451452241651":[{"f":2},{"f":2}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":4},{"f":4}]},"tags":["radio-checked"],"grid":0},"attrs":[{"fill":"rgb(21, 111, 245)"},{"fill":"rgb(21, 111, 245)"}],"properties":{"order":5,"id":5,"name":"radio-checked","prevSize":32,"code":59855},"setIdx":0,"setId":6,"iconIdx":5},{"icon":{"paths":["M512 0c282.767 0 512 229.23 512 512 0 282.767-229.233 512-512 512-282.77 0-512-229.233-512-512 0-282.77 229.23-512 512-512zM512 921.6c226.217 0 409.6-183.383 409.6-409.6 0-226.216-183.383-409.6-409.6-409.6-226.216 0-409.6 183.384-409.6 409.6 0 226.217 183.384 409.6 409.6 409.6z"],"attrs":[{"fill":"rgb(158, 162, 168)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912111124512431405712431908124569921291162451452241651":[{"f":7}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":9}]},"tags":["radio-unchecked"],"grid":0},"attrs":[{"fill":"rgb(158, 162, 168)"}],"properties":{"order":4,"id":6,"name":"radio-unchecked","prevSize":32,"code":59867},"setIdx":0,"setId":6,"iconIdx":6},{"icon":{"paths":["M678.736 135.922c7.414-5.157 16.23-7.922 25.264-7.922s17.85 2.764 25.264 7.922c7.414 5.157 13.075 12.46 16.218 20.928l0.074 0.2 32.371 89.024 89.226 32.445c8.467 3.143 15.77 8.803 20.928 16.219 5.155 7.415 7.92 16.231 7.92 25.264 0 9.034-2.765 17.85-7.92 25.264-5.158 7.414-12.461 13.075-20.931 16.218l-0.198 0.074-89.024 32.371-32.445 89.226c-3.142 8.467-8.803 15.77-16.218 20.928-7.414 5.155-16.23 7.92-25.264 7.92s-17.85-2.765-25.264-7.92c-7.414-5.158-13.075-12.461-16.218-20.931l-0.074-0.198-32.371-89.024-89.226-32.445c-8.467-3.142-15.77-8.803-20.928-16.218-5.155-7.414-7.92-16.23-7.92-25.264 0-9.032 2.765-17.848 7.92-25.264 5.158-7.415 12.461-13.075 20.931-16.218l0.198-0.074 89.024-32.372 32.445-89.224c3.142-8.468 8.803-15.771 16.218-20.928zM713.437 384l7.533-20.717c2.224-6.029 5.725-11.504 10.269-16.045 4.541-4.544 10.016-8.045 16.045-10.269l0.128-0.045 46.541-16.925-46.669-16.971c-6.029-2.221-11.504-5.724-16.045-10.267-4.544-4.542-8.045-10.017-10.269-16.044l-0.045-0.128-16.925-46.541-16.97 46.669c-2.221 6.028-5.725 11.502-10.269 16.044-4.541 4.543-10.016 8.045-16.045 10.267l-0.128 0.047-46.541 16.924 46.669 16.97c6.029 2.221 11.504 5.725 16.045 10.269 4.544 4.541 8.045 10.016 10.269 16.045l0.045 0.128 16.925 46.541 9.437-25.952z","M323.091 265.629c8.256-6.153 18.346-9.629 28.909-9.629s20.653 3.477 28.909 9.629c8.224 6.127 14.17 14.542 17.402 23.873l0.067 0.191 47.674 140.467 130.595 50.883c9.696 3.856 17.67 10.64 23.126 19.046 5.44 8.381 8.227 18.118 8.227 27.91s-2.787 19.53-8.227 27.91c-5.456 8.406-13.434 15.19-23.126 19.046l-0.208 0.083-130.387 50.8-47.741 140.659c-3.232 9.328-9.178 17.744-17.402 23.872-8.256 6.15-18.346 9.629-28.909 9.629s-20.653-3.478-28.909-9.629c-8.223-6.128-14.17-14.544-17.402-23.875l-0.066-0.189-47.673-140.467-130.596-50.883c-9.694-3.856-17.669-10.64-23.125-19.046-5.442-8.381-8.228-18.118-8.228-27.91s2.787-19.53 8.228-27.91c5.456-8.406 13.431-15.19 23.125-19.046l0.208-0.083 130.388-50.8 47.739-140.658c3.233-9.331 9.18-17.746 17.403-23.873zM381.222 617.712l6.314-18.602c2.291-6.659 5.958-12.874 10.88-18.147 4.928-5.28 11.014-9.507 17.917-12.23l0.134-0.054 104.41-40.678-104.544-40.733c-6.902-2.723-12.989-6.95-17.917-12.23-4.922-5.274-8.589-11.488-10.88-18.147l-0.042-0.125-35.494-104.579-35.536 104.704c-2.291 6.659-5.959 12.874-10.881 18.147-4.929 5.28-11.015 9.507-17.916 12.23l-0.133 0.054-104.411 40.678 104.544 40.733c6.901 2.723 12.988 6.95 17.916 12.23 4.923 5.274 8.59 11.488 10.881 18.147l0.042 0.125 35.494 104.579 29.222-86.102z","M704 544c-9.034 0-17.85 2.765-25.264 7.92-7.414 5.158-13.075 12.461-16.218 20.928l-32.445 89.226-89.222 32.445c-8.47 3.142-15.773 8.803-20.931 16.218-5.155 7.414-7.92 16.23-7.92 25.264s2.765 17.85 7.92 25.264c5.158 7.414 12.461 13.075 20.928 16.218l89.226 32.445 32.445 89.222c3.142 8.47 8.803 15.773 16.218 20.931 7.414 5.155 16.23 7.92 25.264 7.92s17.85-2.765 25.264-7.92c7.414-5.158 13.075-12.461 16.218-20.928l32.445-89.226 89.222-32.445c8.47-3.142 15.773-8.803 20.931-16.218 5.155-7.414 7.92-16.23 7.92-25.264s-2.765-17.85-7.92-25.264c-5.158-7.414-12.461-13.075-20.928-16.218l-89.226-32.445-32.445-89.222c-3.142-8.47-8.803-15.773-16.218-20.931-7.414-5.155-16.23-7.92-25.264-7.92zM720.97 779.283l-6.829 18.784-10.141 27.885-16.97-46.669c-2.224-6.029-5.725-11.504-10.269-16.045-4.541-4.544-10.016-8.048-16.045-10.269l-46.669-16.97 46.669-16.97c6.029-2.221 11.504-5.725 16.045-10.269 4.544-4.541 8.048-10.016 10.269-16.045l16.97-46.669 16.97 46.669c2.224 6.029 5.725 11.504 10.269 16.045 4.541 4.544 10.016 8.048 16.045 10.269l46.669 16.97-46.669 16.97c-6.029 2.224-11.504 5.725-16.045 10.269-4.544 4.541-8.045 10.016-10.269 16.045z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{},{},{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{},{},{}]},"tags":["stars"],"grid":0},"attrs":[{},{},{}],"properties":{"order":1139,"id":7,"name":"stars","prevSize":32,"code":59845},"setIdx":0,"setId":6,"iconIdx":7},{"icon":{"paths":["M810.666 512c0.022 8.358-2.173 16.579-6.371 23.862-4.195 7.283-10.253 13.382-17.581 17.706l-454.067 271.187c-7.658 4.576-16.425 7.075-25.4 7.235-8.975 0.163-17.832-2.016-25.656-6.314-7.749-4.23-14.205-10.397-18.702-17.872-4.498-7.472-6.875-15.981-6.888-24.65v-542.311c0.013-8.668 2.39-17.176 6.888-24.649s10.953-13.642 18.702-17.872c7.824-4.297 16.681-6.477 25.656-6.315s17.743 2.661 25.4 7.237l454.067 271.186c7.328 4.323 13.386 10.422 17.581 17.706 4.198 7.283 6.394 15.504 6.371 23.862z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["play-shape-filled"],"grid":0},"attrs":[{}],"properties":{"order":4,"id":8,"name":"play-shape-filled","prevSize":32,"code":59842},"setIdx":0,"setId":6,"iconIdx":8},{"icon":{"paths":["M832 245.333v533.332c0 14.147-5.693 27.712-15.824 37.712-10.131 10.003-23.872 15.622-38.202 15.622h-135.066c-14.33 0-28.070-5.619-38.202-15.622-10.131-10-15.824-23.565-15.824-37.712v-533.332c0-14.145 5.693-27.71 15.824-37.712s23.872-15.621 38.202-15.621h135.066c14.33 0 28.070 5.619 38.202 15.621s15.824 23.567 15.824 37.712zM381.091 192h-135.065c-14.329 0-28.070 5.619-38.202 15.621s-15.824 23.567-15.824 37.712v533.332c0 14.147 5.692 27.712 15.824 37.712 10.132 10.003 23.874 15.622 38.202 15.622h135.065c14.33 0 28.070-5.619 38.202-15.622 10.131-10 15.824-23.565 15.824-37.712v-533.332c0-14.145-5.693-27.71-15.824-37.712s-23.872-15.621-38.202-15.621z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["pause-shape-filled"],"grid":0},"attrs":[{}],"properties":{"order":3,"id":9,"name":"pause-shape-filled","prevSize":32,"code":59843},"setIdx":0,"setId":6,"iconIdx":9},{"icon":{"paths":["M593.158 920.006c-80.698 16.051-164.342 7.814-240.355-23.674-76.014-31.485-140.984-84.806-186.695-153.216s-70.108-148.842-70.108-231.117h64c0 69.619 20.644 137.674 59.323 195.562 38.678 57.885 93.653 103.002 157.973 129.645 64.32 26.64 135.094 33.613 203.376 20.029 68.282-13.581 131.002-47.107 180.23-96.333 49.226-49.229 82.752-111.949 96.333-180.23 13.584-68.282 6.611-139.056-20.029-203.376-26.643-64.32-71.76-119.295-129.645-157.973-57.888-38.678-125.942-59.323-195.562-59.323v-64c82.278 0 162.707 24.398 231.117 70.109s121.731 110.681 153.216 186.695v0c31.488 76.013 39.725 159.658 23.674 240.355-16.051 80.694-55.67 154.819-113.85 212.998s-132.304 97.798-212.998 113.85z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["loading"],"grid":0},"attrs":[{}],"properties":{"order":2,"id":10,"name":"loading","prevSize":32,"code":59844},"setIdx":0,"setId":6,"iconIdx":10},{"icon":{"paths":["M544 208c0-17.673-14.326-32-32-32s-32 14.327-32 32v271.997h-271.998c-17.673 0-32 14.326-32 32s14.327 32 32 32h271.998v272.003c0 17.674 14.326 32 32 32s32-14.326 32-32v-272.003l272-0.003c17.674 0 32-14.326 32-32s-14.326-32-32-32l-272 0.003v-271.997z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["add"],"defaultCode":59872,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":923,"name":"add","prevSize":32,"id":11,"code":59872},"setIdx":0,"setId":6,"iconIdx":11},{"icon":{"paths":["M512 928c-14.218 0-28.275-0.714-42.144-2.112-16.694-1.68-30.557-12.528-36.688-27.395l-40.538-98.304-98.162 40.838c-14.837 6.173-32.3 4.048-45.292-6.554-21.838-17.818-41.831-37.811-59.65-59.648-10.601-12.992-12.726-30.454-6.553-45.293l40.839-98.16-98.307-40.541c-14.864-6.131-25.714-19.994-27.395-36.688-1.396-13.869-2.111-27.926-2.111-42.144 0-14.214 0.714-28.275 2.11-42.141 1.681-16.694 12.531-30.557 27.395-36.688l98.308-40.541-40.84-98.163c-6.173-14.837-4.047-32.3 6.553-45.292 17.818-21.838 37.81-41.83 59.648-59.648 12.992-10.6 30.455-12.726 45.292-6.553l98.165 40.84 40.541-98.309c6.128-14.865 19.994-25.714 36.688-27.395 13.866-1.396 27.926-2.11 42.141-2.11s28.275 0.714 42.141 2.11c16.694 1.681 30.56 12.531 36.688 27.395l40.541 98.309 98.163-40.84c14.838-6.173 32.301-4.047 45.293 6.553 21.837 17.818 41.83 37.81 59.648 59.648 10.602 12.992 12.726 30.455 6.554 45.292l-40.842 98.163 98.31 40.541c14.864 6.131 25.712 19.994 27.392 36.688 1.398 13.866 2.112 27.926 2.112 42.141 0 14.218-0.714 28.275-2.112 42.144-1.68 16.694-12.528 30.557-27.395 36.688l-98.307 40.541 40.842 98.16c6.173 14.838 4.045 32.301-6.554 45.293-17.821 21.837-37.811 41.83-59.651 59.648-12.992 10.602-30.454 12.726-45.29 6.554l-98.163-40.838-40.538 98.304c-6.131 14.867-19.994 25.715-36.688 27.395-13.869 1.398-27.93 2.112-42.144 2.112zM444.451 757.984l43.386 105.2c7.981 0.541 16.038 0.816 24.163 0.816s16.182-0.275 24.163-0.816l43.382-105.2c9.456-22.925 35.731-33.808 58.627-24.285l105.056 43.709c12.157-10.602 23.578-22.022 34.179-34.179l-43.709-105.056c-9.526-22.893 1.36-49.171 24.282-58.624l105.203-43.386c0.541-7.978 0.816-16.038 0.816-24.163s-0.275-16.182-0.816-24.16l-105.203-43.386c-22.922-9.453-33.808-35.731-24.282-58.624l43.709-105.060c-10.602-12.156-22.022-23.577-34.176-34.177l-105.059 43.708c-22.896 9.525-49.171-1.359-58.627-24.283l-43.382-105.204c-7.981-0.54-16.038-0.815-24.163-0.815s-16.182 0.275-24.163 0.815l-43.386 105.204c-9.453 22.924-35.728 33.808-58.624 24.283l-105.058-43.708c-12.156 10.6-23.577 22.021-34.177 34.177l43.708 105.059c9.525 22.893-1.359 49.171-24.284 58.624l-105.203 43.386c-0.54 7.978-0.815 16.035-0.815 24.16 0 8.128 0.275 16.186 0.815 24.163l105.203 43.386c22.924 9.453 33.809 35.731 24.284 58.624l-43.708 105.056c10.601 12.157 22.022 23.578 34.178 34.179l105.056-43.709c22.896-9.523 49.171 1.36 58.624 24.285zM416 512c0-53.021 42.979-96 96-96s96 42.979 96 96c0 53.021-42.979 96-96 96s-96-42.979-96-96zM512 352c-88.365 0-160 71.635-160 160s71.635 160 160 160c88.365 0 160-71.635 160-160s-71.635-160-160-160z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["administration"],"defaultCode":59662,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":924,"name":"administration","prevSize":32,"id":12,"code":59662},"setIdx":0,"setId":6,"iconIdx":12},{"icon":{"paths":["M878.739 567.622c-41.853-41.136-161.235-29.824-220.925-22.282-59.005-35.997-98.458-85.706-126.243-158.73 13.379-55.194 34.646-139.185 18.525-191.98-14.41-89.82-129.674-80.907-146.141-20.227-15.094 55.195-1.373 131.988 24.013 230.034-34.304 81.936-85.421 191.984-121.441 255.062-68.611 35.312-161.235 89.821-174.957 158.384-11.321 54.166 89.194 189.238 261.063-106.96 76.845-25.37 160.547-56.566 234.65-68.909 64.835 34.97 140.65 58.282 191.421 58.282 87.478 0 96.054-96.678 60.035-132.675zM199.152 834.342c17.496-46.97 84.048-101.133 104.288-119.99-65.18 103.875-104.288 122.39-104.288 119.99zM479.082 180.918c25.386 0 22.986 110.047 6.176 139.873-15.094-47.653-14.752-139.873-6.176-139.873zM395.379 649.216c33.274-57.936 61.747-126.845 84.733-187.526 28.474 51.766 64.838 93.251 103.258 121.706-71.354 14.739-133.446 44.909-187.99 65.821zM846.835 632.074c0 0-17.152 20.57-127.958-26.739 120.413-8.912 140.307 18.512 127.958 26.739z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["adobe-reader-monochromatic"],"defaultCode":59663,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":925,"name":"adobe-reader-monochromatic","prevSize":32,"id":13,"code":59663},"setIdx":0,"setId":6,"iconIdx":13},{"icon":{"paths":["M512 192c-13.056 0-25.578 5.187-34.813 14.419-9.232 9.233-14.419 21.755-14.419 34.812v162.462c0 12.122-6.848 23.2-17.686 28.621l-253.082 126.541v49.498l232.493-46.499c9.402-1.882 19.149 0.554 26.563 6.63 7.414 6.080 11.712 15.162 11.712 24.749v108.307c0 8.486-3.37 16.624-9.373 22.627l-44.781 44.781v47.789l91.501-36.602c7.629-3.050 16.141-3.050 23.77 0l91.501 36.602v-47.789l-44.781-44.781c-6.003-6.003-9.373-14.141-9.373-22.627v-108.307c0-9.587 4.298-18.669 11.712-24.749 7.414-6.077 17.162-8.512 26.563-6.63l232.493 46.499v-49.498l-253.082-126.541c-10.838-5.421-17.686-16.499-17.686-28.621v-162.462c0-13.057-5.187-25.579-14.419-34.812-9.235-9.232-21.757-14.419-34.813-14.419zM431.933 161.164c21.235-21.235 50.035-33.164 80.067-33.164s58.832 11.93 80.067 33.164c21.235 21.235 33.165 50.036 33.165 80.066v142.686l253.078 126.538c10.842 5.421 17.69 16.502 17.69 28.624v108.307c0 9.587-4.298 18.669-11.712 24.746s-17.162 8.512-26.563 6.63l-232.493-46.496v56.019l44.781 44.781c6 6 9.373 14.141 9.373 22.627v108.307c0 10.618-5.267 20.544-14.061 26.499-8.794 5.952-19.965 7.155-29.824 3.213l-123.501-49.402-123.501 49.402c-9.859 3.942-21.030 2.739-29.824-3.213-8.794-5.955-14.061-15.882-14.061-26.499v-108.307c0-8.486 3.373-16.627 9.373-22.627l44.781-44.781v-56.019l-232.492 46.496c-9.401 1.882-19.149-0.554-26.564-6.63s-11.712-15.158-11.712-24.746v-108.307c0-12.122 6.848-23.203 17.689-28.624l253.079-126.538v-142.686c0-30.031 11.93-58.831 33.165-80.066z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["airplane"],"defaultCode":59815,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":926,"id":14,"name":"airplane","prevSize":32,"code":59815},"setIdx":0,"setId":6,"iconIdx":14},{"icon":{"paths":["M448 188.865c0 33.615 27.251 60.865 60.864 60.865 33.616 0 60.867-27.25 60.867-60.865s-27.251-60.865-60.867-60.865c-33.613 0-60.864 27.25-60.864 60.865zM384 188.865c0 59.026 40.957 108.485 96 121.512v77.745c-44.314 11.69-78.986 47.13-89.578 91.878h-80.045c-13.027-55.043-62.486-96-121.512-96-68.961 0-124.865 55.904-124.865 124.864 0 68.963 55.904 124.867 124.865 124.867 56.762 0 104.678-37.875 119.854-89.731h83.361c12.227 41.773 45.696 74.47 87.92 85.61v77.744c-55.043 13.027-96 62.486-96 121.51 0 68.963 55.904 124.867 124.864 124.867 68.963 0 124.867-55.904 124.867-124.867 0-56.762-37.875-104.675-89.731-119.853v-79.437c42.163-11.171 75.578-43.846 87.789-85.574h77.222c15.178 51.856 63.091 89.731 119.853 89.731 68.963 0 124.867-55.904 124.867-124.867 0-68.96-55.904-124.864-124.867-124.864-59.024 0-108.483 40.957-121.51 96h-73.907c-10.579-44.707-45.194-80.122-89.446-91.843v-79.438c51.856-15.176 89.731-63.092 89.731-119.854 0-68.961-55.904-124.865-124.867-124.865-68.96 0-124.864 55.904-124.864 124.865zM828.864 569.731c-33.613 0-60.864-27.251-60.864-60.867 0-33.613 27.251-60.864 60.864-60.864 33.616 0 60.867 27.251 60.867 60.864 0 33.616-27.251 60.867-60.867 60.867zM188.865 569.731c-33.615 0-60.865-27.251-60.865-60.867 0-33.613 27.25-60.864 60.865-60.864s60.865 27.251 60.865 60.864c0 33.616-27.25 60.867-60.865 60.867zM451.069 508.864c0 33.616 27.251 60.867 60.867 60.867 33.613 0 60.864-27.251 60.864-60.867 0-33.613-27.251-60.864-60.864-60.864-33.616 0-60.867 27.251-60.867 60.864zM508.864 889.731c-33.613 0-60.864-27.251-60.864-60.867 0-33.613 27.251-60.864 60.864-60.864 33.616 0 60.867 27.251 60.867 60.864 0 33.616-27.251 60.867-60.867 60.867z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["all-contacts-in-channels"],"defaultCode":59664,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":927,"name":"all-contacts-in-channels","prevSize":32,"id":15,"code":59664},"setIdx":0,"setId":6,"iconIdx":15},{"icon":{"paths":["M861.437 160c17.67 0 32 14.327 32 32s-14.33 32-32 32h-384c-17.674 0-32-14.327-32-32s14.326-32 32-32h384zM334.717 442.397c-24.962 0-45.197-20.237-45.197-45.2 0-24.96 20.236-45.197 45.197-45.197 24.963 0 45.2 20.237 45.2 45.197 0 24.963-20.237 45.2-45.2 45.2zM334.717 506.397c-60.308 0-109.197-48.89-109.197-109.2 0-60.307 48.89-109.197 109.197-109.197 60.31 0 109.2 48.89 109.2 109.197 0 60.31-48.89 109.2-109.2 109.2zM456.278 535.504c-18.288-4.899-37.504-5.2-55.939-0.88l-45.005 10.547c-13.194 3.091-26.947 2.877-40.036-0.63l-31.676-8.483c-19.669-5.27-40.384-5.562-60.154-0.928-55.68 13.050-95.468 62.781-95.468 120.179v34.752c0 42.906 34.783 77.686 77.689 77.686h258.057c42.906 0 77.69-34.781 77.69-77.686v-43.587c0-52-34.928-97.514-85.158-110.97zM414.944 596.934c8.166-1.914 16.675-1.779 24.774 0.39 22.246 5.958 37.718 26.118 37.718 49.149v43.587c0 7.558-6.131 13.686-13.69 13.686h-258.057c-7.56 0-13.689-6.128-13.689-13.686v-34.752c0-27.469 19.123-51.552 46.072-57.869 9.556-2.24 19.564-2.086 28.99 0.438l31.676 8.483c23.277 6.237 47.738 6.621 71.2 1.12l45.005-10.547zM893.437 512c0-17.674-14.33-32-32-32h-224c-17.674 0-32 14.326-32 32s14.326 32 32 32h224c17.67 0 32-14.326 32-32zM861.437 640c17.67 0 32 14.326 32 32s-14.33 32-32 32h-192c-17.674 0-32-14.326-32-32s14.326-32 32-32h192zM893.437 352c0-17.674-14.33-32-32-32h-288c-17.674 0-32 14.326-32 32s14.326 32 32 32h288c17.67 0 32-14.326 32-32zM861.437 800c17.67 0 32 14.326 32 32s-14.33 32-32 32h-256c-17.674 0-32-14.326-32-32s14.326-32 32-32h256z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["all-contacts-in-queue"],"defaultCode":59665,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":928,"name":"all-contacts-in-queue","prevSize":32,"id":16,"code":59665},"setIdx":0,"setId":6,"iconIdx":16},{"icon":{"paths":["M523.571 295.385c33.133 0 74.669-22.133 99.402-51.645 22.4-26.745 38.733-64.095 38.733-101.445 0-5.072-0.467-10.144-1.402-14.294-36.864 1.383-81.2 24.439-107.798 55.334-21.002 23.517-40.134 60.406-40.134 98.218 0 5.533 0.934 11.067 1.402 12.911 2.333 0.461 6.067 0.922 9.798 0.922zM406.906 853.334c45.267 0 65.334-29.974 121.798-29.974 57.402 0 70 29.050 120.4 29.050 49.469 0 82.602-45.187 113.869-89.456 34.998-50.72 49.466-100.522 50.4-102.829-3.267-0.922-98-39.194-98-146.634 0-93.146 74.666-135.107 78.867-138.333-49.469-70.090-124.602-71.935-145.136-71.935-55.533 0-100.8 33.199-129.264 33.199-30.8 0-71.402-31.354-119.469-31.354-91.466 0-184.333 74.701-184.333 215.802 0 87.61 34.533 180.294 77 240.24 36.402 50.723 68.133 92.224 113.867 92.224z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["apple-monochromatic"],"defaultCode":59666,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":929,"name":"apple-monochromatic","prevSize":32,"id":17,"code":59666},"setIdx":0,"setId":6,"iconIdx":17},{"icon":{"paths":["M498.694 141.561l-298.666 136.533c-11.39 5.207-18.696 16.58-18.696 29.103v386.844c0 11.818 6.513 22.675 16.941 28.237l298.667 159.286c9.411 5.021 20.707 5.021 30.118 0l298.666-159.286c10.429-5.562 16.941-16.419 16.941-28.237v-386.844c0-12.524-7.306-23.896-18.694-29.103l-298.666-136.533c-8.451-3.862-18.16-3.862-26.611 0zM245.333 357.011l234.667 107.277v335.709l-234.667-125.155v-317.83zM544 799.997l234.666-125.155v-317.83l-234.666 107.277v335.709zM512 408.544l-221.7-101.347 221.7-101.348 221.699 101.348-221.699 101.347z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["apps"],"defaultCode":59667,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":930,"name":"apps","prevSize":32,"id":18,"code":59667},"setIdx":0,"setId":6,"iconIdx":18},{"icon":{"paths":["M374.627 297.372c-12.496-12.497-32.758-12.497-45.254 0l-192 192c-12.497 12.496-12.497 32.758 0 45.254l192 192c12.496 12.496 32.758 12.496 45.254 0s12.496-32.758 0-45.254l-137.372-137.373h578.745v128c0 17.674 14.326 32 32 32s32-14.326 32-32v-160c0-17.674-14.326-32-32-32h-610.745l137.372-137.373c12.496-12.496 12.496-32.758 0-45.255z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-back"],"defaultCode":59668,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":931,"name":"arrow-back","prevSize":32,"id":19,"code":59668},"setIdx":0,"setId":6,"iconIdx":19},{"icon":{"paths":["M551.392 242.502c0.189-17.672 14.669-31.845 32.339-31.656 17.674 0.189 31.846 14.668 31.658 32.34l-1.318 123.489 193.44-193.439c12.496-12.497 32.755-12.497 45.254 0 12.496 12.497 12.496 32.758 0 45.255l-193.44 193.439 123.488-1.318c17.674-0.189 32.154 13.984 32.339 31.654 0.189 17.674-13.984 32.154-31.654 32.342l-201.92 2.154c-8.605 0.093-16.886-3.283-22.97-9.37-6.086-6.083-9.462-14.365-9.373-22.97l2.157-201.92zM475.981 782.147c-0.189 17.674-14.669 31.846-32.339 31.658-17.674-0.189-31.846-14.669-31.658-32.342l1.318-123.488-193.438 193.44c-12.497 12.496-32.758 12.496-45.255 0s-12.497-32.758 0-45.254l193.438-193.44-123.488 1.318c-17.672 0.189-32.151-13.984-32.34-31.654-0.189-17.674 13.984-32.154 31.656-32.342l201.922-2.154c8.605-0.093 16.883 3.283 22.966 9.37 6.086 6.083 9.462 14.365 9.373 22.97l-2.157 201.92z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-collapse"],"defaultCode":59669,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":932,"name":"arrow-collapse","prevSize":32,"id":20,"code":59669},"setIdx":0,"setId":6,"iconIdx":20},{"icon":{"paths":["M576 672c-17.674 0-32 14.326-32 32s14.326 32 32 32h224c17.674 0 32-14.326 32-32v-208c0-17.674-14.326-32-32-32s-32 14.326-32 32v130.746l-233.373-233.373c-12.496-12.496-32.758-12.496-45.254 0l-73.373 73.373-169.372-169.373c-12.497-12.497-32.758-12.497-45.255 0s-12.497 32.759 0 45.255l192 192c12.496 12.496 32.758 12.496 45.254 0l73.373-73.373 210.746 210.746h-146.746z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-decrease"],"defaultCode":59670,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":933,"name":"arrow-decrease","prevSize":32,"id":21,"code":59670},"setIdx":0,"setId":6,"iconIdx":21},{"icon":{"paths":["M726.88 526.064c12.355 12.637 12.128 32.896-0.509 45.254l-191.968 187.715c-12.438 12.163-32.31 12.163-44.746 0l-191.97-187.715c-12.636-12.358-12.863-32.618-0.507-45.254 12.356-12.634 32.615-12.861 45.252-0.506l137.597 134.55v-372.109c0-17.673 14.33-32 32-32 17.674 0 32 14.327 32 32v372.109l137.6-134.55c12.634-12.355 32.896-12.128 45.251 0.506z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-down"],"defaultCode":59673,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":934,"name":"arrow-down","prevSize":32,"id":22,"code":59673},"setIdx":0,"setId":6,"iconIdx":22},{"icon":{"paths":["M329.373 550.627c-12.497-12.496-12.497-32.758 0-45.254s32.758-12.496 45.254 0l105.373 105.373v-418.746c0-17.673 14.326-32 32-32s32 14.327 32 32v418.746l105.373-105.373c12.496-12.496 32.758-12.496 45.254 0s12.496 32.758 0 45.254l-160 160c-12.496 12.496-32.758 12.496-45.254 0l-160-160zM112 864c0 17.674 14.327 32 32 32h768c17.674 0 32-14.326 32-32v-512c0-17.674-14.326-32-32-32h-96c-17.674 0-32 14.326-32 32s14.326 32 32 32h64v448h-704v-448h64c17.673 0 32-14.326 32-32s-14.327-32-32-32h-96c-17.673 0-32 14.326-32 32v512z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-down-box"],"defaultCode":59671,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":935,"name":"arrow-down-box","prevSize":32,"id":23,"code":59671},"setIdx":0,"setId":6,"iconIdx":23},{"icon":{"paths":["M866.49 512c0-194.404-157.802-352-352.464-352-194.661 0-352.465 157.596-352.465 352s157.804 352 352.465 352c194.662 0 352.464-157.597 352.464-352zM930.576 512c0 229.75-186.496 416-416.55 416s-416.549-186.25-416.549-416c0-229.75 186.495-416 416.549-416s416.55 186.25 416.55 416zM696.525 571.37c12.682-12.33 12.957-32.589 0.611-45.251-12.342-12.666-32.63-12.938-45.309-0.611l-105.789 102.842v-276.349c0-17.674-14.346-32-32.045-32-17.696 0-32.042 14.326-32.042 32v276.349l-105.789-102.842c-12.678-12.326-32.966-12.054-45.309 0.611-12.344 12.662-12.071 32.922 0.608 45.251l160.182 155.715c12.438 12.093 32.259 12.093 44.701 0l160.179-155.715z"],"width":1056,"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124319081245699212911624514522416519902101":[{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["arrow-down-circle"],"defaultCode":59672,"grid":0},"attrs":[{}],"properties":{"order":936,"name":"arrow-down-circle","prevSize":32,"id":24,"code":59672},"setIdx":0,"setId":6,"iconIdx":24},{"icon":{"paths":["M859.978 398.15c-0.189 17.67-14.666 31.843-32.339 31.654-17.67-0.189-31.846-14.666-31.658-32.339l1.318-123.488-193.437 193.437c-12.496 12.499-32.758 12.499-45.254 0-12.496-12.496-12.496-32.755 0-45.254l193.437-193.437-123.488 1.318c-17.67 0.189-32.15-13.984-32.339-31.656s13.984-32.151 31.658-32.34l201.92-2.156c8.605-0.092 16.883 3.286 22.97 9.371 6.083 6.085 9.462 14.364 9.37 22.969l-2.157 201.922zM167.394 626.522c0.189-17.674 14.668-31.846 32.34-31.658s31.845 14.669 31.657 32.339l-1.319 123.488 193.438-193.437c12.496-12.499 32.758-12.499 45.254 0 12.496 12.496 12.496 32.758 0 45.254l-193.438 193.437 123.489-1.318c17.67-0.189 32.15 13.984 32.339 31.658 0.189 17.67-13.984 32.15-31.658 32.339l-201.92 2.157c-8.605 0.093-16.884-3.286-22.969-9.37-6.085-6.086-9.463-14.365-9.371-22.97l2.156-201.92z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-expand"],"defaultCode":59674,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":937,"name":"arrow-expand","prevSize":32,"id":25,"code":59674},"setIdx":0,"setId":6,"iconIdx":25},{"icon":{"paths":["M623.488 420.944h-129.030c-146.778 0-279.962 128.675-298.822 309.533 98.511-81.834 219.072-127.946 345.446-127.946h82.406v123.408l188.595-214.202-188.595-214.2v123.406zM888.045 501.165c5.322 6.045 5.325 15.104 0 21.149l-300.547 341.354c-9.747 11.069-28.010 4.176-28.010-10.573v-186.563h-18.406c-15.286 0-30.496 0.774-45.594 2.298-112.397 11.35-218.514 64.397-302.132 150.954-2.078 2.15-4.142 4.32-6.191 6.512-7.238 7.741-14.299 15.738-21.173 23.984-2.611 3.133-5.195 6.301-7.751 9.504l-0.376 0.474c-9.438 11.834-28.508 5.158-28.508-9.978v-75.606c0-230.707 163.46-417.728 365.102-417.728h65.030v-186.56c0-14.749 18.262-21.643 28.010-10.573l300.547 341.354z"],"width":1056,"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["arrow-forward"],"defaultCode":59841,"grid":0},"attrs":[{}],"properties":{"order":938,"id":26,"name":"arrow-forward","prevSize":32,"code":59841},"setIdx":0,"setId":6,"iconIdx":26},{"icon":{"paths":["M576 352c-17.674 0-32-14.326-32-32s14.326-32 32-32h224c17.674 0 32 14.327 32 32v208c0 17.674-14.326 32-32 32s-32-14.326-32-32v-130.746l-233.373 233.373c-12.496 12.496-32.758 12.496-45.254 0l-73.373-73.373-169.372 169.373c-12.497 12.496-32.758 12.496-45.255 0s-12.497-32.758 0-45.254l192-192c12.496-12.496 32.758-12.496 45.254 0l73.373 73.373 210.746-210.746h-146.746z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-increase"],"defaultCode":59675,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":939,"name":"arrow-increase","prevSize":32,"id":27,"code":59675},"setIdx":0,"setId":6,"iconIdx":27},{"icon":{"paths":["M297.766 105.372c12.513-12.497 32.801-12.497 45.316 0 12.512 12.497 12.512 32.758 0 45.255l-105.513 105.372h611.551c17.699 0 32.045 14.327 32.045 32v112c0 17.674-14.346 32-32.045 32-17.696 0-32.042-14.326-32.042-32v-80h-579.51l105.513 105.373c12.512 12.496 12.512 32.758 0 45.254-12.515 12.496-32.803 12.496-45.316 0l-160.212-160c-12.513-12.497-12.513-32.758 0-45.255l160.212-160zM711.568 918.627c-12.515 12.496-32.803 12.496-45.315 0-12.515-12.496-12.515-32.758 0-45.254l105.51-105.373h-611.552c-17.696 0-32.042-14.326-32.042-32v-112c0-17.674 14.346-32 32.042-32s32.042 14.326 32.042 32v80h579.509l-105.51-105.373c-12.515-12.496-12.515-32.758 0-45.254 12.512-12.496 32.8-12.496 45.315 0l160.211 160c12.512 12.496 12.512 32.758 0 45.254l-160.211 160z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-looping"],"defaultCode":59677,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":940,"name":"arrow-looping","prevSize":32,"id":28,"code":59677},"setIdx":0,"setId":6,"iconIdx":28},{"icon":{"paths":["M374.627 769.296c-12.496 12.496-32.758 12.496-45.254 0l-192-192c-12.497-12.496-12.497-32.758 0-45.254l192-192c12.496-12.499 32.758-12.499 45.254 0 12.496 12.496 12.496 32.758 0 45.254l-137.372 137.373h578.745v-192h-192c-17.674 0-32-14.328-32-32.001s14.326-32 32-32h224c17.674 0 32 14.327 32 32v256.001c0 17.674-14.326 32-32 32h-610.745l137.372 137.373c12.496 12.496 12.496 32.758 0 45.254z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-return"],"defaultCode":59678,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":941,"name":"arrow-return","prevSize":32,"id":29,"code":59678},"setIdx":0,"setId":6,"iconIdx":29},{"icon":{"paths":["M526.064 297.121c12.637-12.356 32.896-12.129 45.254 0.507l187.715 191.969c12.163 12.438 12.163 32.31 0 44.746l-187.715 191.971c-12.358 12.634-32.618 12.861-45.254 0.506-12.634-12.355-12.861-32.614-0.506-45.251l134.55-137.597h-372.109c-17.673 0-32-14.33-32-32 0-17.674 14.327-32 32-32h372.109l-134.55-137.6c-12.355-12.634-12.128-32.894 0.506-45.251z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124319081245699212911624514522416519902101":[{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["arrow-right"],"defaultCode":59838,"grid":0},"attrs":[{}],"properties":{"order":942,"id":30,"name":"arrow-right","prevSize":32,"code":59838},"setIdx":0,"setId":6,"iconIdx":30},{"icon":{"paths":["M297.181 498.090c-12.356-12.634-12.129-32.896 0.507-45.251l191.97-187.717c12.435-12.161 32.307-12.161 44.746 0l191.968 187.717c12.637 12.355 12.864 32.618 0.509 45.251-12.355 12.637-32.618 12.864-45.251 0.509l-137.6-134.55v372.109c0 17.674-14.326 32-32 32-17.67 0-32-14.326-32-32v-372.109l-137.597 134.55c-12.637 12.355-32.895 12.128-45.251-0.509z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-up"],"defaultCode":59680,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":943,"name":"arrow-up","prevSize":32,"id":31,"code":59680},"setIdx":0,"setId":6,"iconIdx":31},{"icon":{"paths":["M694.627 473.373c12.496 12.496 12.496 32.758 0 45.254s-32.758 12.496-45.254 0l-105.373-105.373v418.746c0 17.674-14.326 32-32 32s-32-14.326-32-32v-418.746l-105.373 105.373c-12.496 12.496-32.758 12.496-45.254 0s-12.497-32.758 0-45.254l160-160c12.496-12.497 32.758-12.497 45.254 0l160 160zM912 160c0-17.673-14.326-32-32-32h-768c-17.673 0-32 14.327-32 32v512c0 17.674 14.327 32 32 32h96c17.673 0 32-14.326 32-32s-14.327-32-32-32h-64v-448h704v448h-64c-17.674 0-32 14.326-32 32s14.326 32 32 32h96c17.674 0 32-14.326 32-32v-512z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-up-box"],"defaultCode":59679,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":944,"name":"arrow-up-box","prevSize":32,"id":32,"code":59679},"setIdx":0,"setId":6,"iconIdx":32},{"icon":{"paths":["M649.427 192c-26.454 0-52.016 10.804-71.005 30.343l-305.1 313.906c-31.48 32.387-49.322 76.506-49.322 122.694 0 46.186 17.842 90.304 49.322 122.694 31.451 32.355 73.91 50.362 117.984 50.362s86.531-18.006 117.981-50.362l305.101-313.907c12.317-12.672 32.576-12.96 45.248-0.643 12.675 12.317 12.963 32.576 0.646 45.251l-305.101 313.904c-43.302 44.554-102.23 69.757-163.875 69.757s-120.574-25.203-163.877-69.757c-43.273-44.522-67.428-104.717-67.428-167.299s24.155-122.781 67.428-167.302l305.1-313.905c30.845-31.735 72.874-49.737 116.899-49.737s86.054 18.002 116.899 49.737c30.816 31.704 47.971 74.514 47.971 118.968s-17.155 87.263-47.971 118.969l-305.43 313.904c-0.003 0.006 0.003-0.003 0 0-18.384 18.909-43.523 29.718-69.923 29.718-26.406 0-51.539-10.8-69.923-29.718-18.356-18.883-28.512-44.31-28.512-70.634 0-26.326 10.156-51.754 28.512-70.637l281.872-289.668c12.326-12.666 32.586-12.942 45.251-0.617s12.941 32.585 0.618 45.251l-281.846 289.638c-6.557 6.752-10.406 16.106-10.406 26.032 0 9.93 3.843 19.277 10.406 26.029 6.531 6.72 15.194 10.323 24.029 10.323s17.498-3.603 24.029-10.323l305.43-313.907c19.024-19.568 29.866-46.301 29.866-74.361 0-28.059-10.842-54.791-29.866-74.362-18.989-19.54-44.55-30.343-71.005-30.343z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["attach"],"defaultCode":59676,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":945,"name":"attach","prevSize":32,"id":33,"code":59676},"setIdx":0,"setId":6,"iconIdx":33},{"icon":{"paths":["M300.1 631.12h-113.433v-280.89h113.433l12.366-48.048c11.054-42.953 50.123-74.619 96.423-74.619h58.666v526.223h-58.666c-46.301 0-85.37-31.667-96.423-74.621l-12.366-48.045zM163.556 695.12h86.931c18.156 70.541 82.192 122.666 158.403 122.666h81.776c22.582 0 40.89-18.307 40.89-40.89v-572.444c0-22.582-18.307-40.889-40.89-40.889h-81.776c-76.211 0-140.247 52.124-158.403 122.667h-86.931c-22.582 0-40.889 18.306-40.889 40.89v327.11c0 22.582 18.307 40.89 40.889 40.89zM646.461 316.515c17.146-4.286 34.518 6.138 38.806 23.284l11.136 44.55c20.81 83.229 20.81 170.301 0 253.533l-11.136 44.55c-4.288 17.146-21.661 27.568-38.806 23.283-17.146-4.288-27.571-21.661-23.283-38.806l11.136-44.55c18.262-73.040 18.262-149.45 0.003-222.486l-11.139-44.55c-4.288-17.146 6.138-34.522 23.283-38.807zM807.472 235.936c-5.197-16.892-23.104-26.372-39.994-21.174-16.893 5.197-26.371 23.104-21.174 39.996l35.536 115.489c28.112 91.37 26.976 189.242-3.254 279.933l-32.054 96.16c-5.59 16.765 3.472 34.886 20.237 40.477 16.768 5.587 34.89-3.472 40.48-20.24l32.051-96.16c34.448-103.344 35.747-214.87 3.709-318.989l-35.536-115.491z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["audio"],"defaultCode":59683,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":946,"name":"audio","prevSize":32,"id":34,"code":59683},"setIdx":0,"setId":6,"iconIdx":34},{"icon":{"paths":["M866.128 153.127c-12.496-12.497-32.758-12.497-45.254 0l-668.246 668.245c-12.497 12.496-12.497 32.758 0 45.254s32.758 12.496 45.255 0l668.246-668.245c12.496-12.497 12.496-32.758 0-45.255zM674.643 480.358l55.92-55.923c16.259 79.565 14.515 161.866-5.229 240.842l-11.622 46.49c-4.288 17.146-21.661 27.571-38.806 23.283-17.146-4.285-27.568-21.661-23.283-38.806l11.622-46.486c13.875-55.507 17.677-112.874 11.398-169.398zM817.162 385.923l-11.312-36.771 51.203-51.206 21.28 69.155c33.344 108.368 31.994 224.445-3.859 332.010l-33.45 100.342c-5.587 16.765-23.709 25.827-40.477 20.24-16.765-5.59-25.827-23.712-20.237-40.48l33.446-100.339c31.635-94.912 32.826-197.334 3.405-292.95zM490.666 664.333l64-64v210.346c0 23.562-19.101 42.666-42.666 42.666h-85.334c-35.459 0-68.394-10.816-95.683-29.325l46.611-46.611c14.701 7.629 31.395 11.936 49.072 11.936h64v-125.011zM128 682.678c0 19.738 13.403 36.346 31.604 41.216l62.552-62.55h-30.156v-298.666h118.99l12.367-48.049c11.843-46.020 53.696-79.953 103.309-79.953h64v158.155l64-64v-115.488c0-23.564-19.101-42.667-42.666-42.667h-85.334c-79.523 0-146.343 54.39-165.289 128h-90.71c-23.564 0-42.667 19.102-42.667 42.667v341.334z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["audio-disabled"],"defaultCode":59681,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":947,"name":"audio-disabled","prevSize":32,"id":35,"code":59681},"setIdx":0,"setId":6,"iconIdx":35},{"icon":{"paths":["M310.99 661.344h-118.99v-298.666h118.99l12.367-48.049c11.843-46.020 53.696-79.953 103.309-79.953h64v554.667h-64c-49.613 0-91.466-33.933-103.309-79.952l-12.367-48.048zM170.667 725.344h90.71c18.946 73.61 85.766 128 165.289 128h85.334c23.565 0 42.666-19.104 42.666-42.666v-597.335c0-23.564-19.101-42.667-42.666-42.667h-85.334c-79.523 0-146.343 54.39-165.289 128h-90.71c-23.564 0-42.667 19.102-42.667 42.667v341.334c0 23.562 19.103 42.666 42.667 42.666zM886.627 393.373c12.496 12.496 12.496 32.758 0 45.254l-73.373 73.373 73.373 73.373c12.496 12.496 12.496 32.758 0 45.254s-32.758 12.496-45.254 0l-73.373-73.373-73.373 73.373c-12.496 12.496-32.758 12.496-45.254 0s-12.496-32.758 0-45.254l73.373-73.373-73.373-73.373c-12.496-12.496-12.496-32.758 0-45.254s32.758-12.496 45.254 0l73.373 73.373 73.373-73.373c12.496-12.496 32.758-12.496 45.254 0z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["audio-unavailable"],"defaultCode":59682,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":948,"name":"audio-unavailable","prevSize":32,"id":36,"code":59682},"setIdx":0,"setId":6,"iconIdx":36},{"icon":{"paths":["M418.704 128c-35.344 0-64 28.654-64 64v226.637c20.774-2.822 42.134-3.456 64-1.526v-225.11h176v180.707c0 35.344 28.656 64 64 64h176v331.293h-120.554c-17.155 22.179-36.323 43.869-57.312 64h177.866c35.347 0 64-28.653 64-64v-363.293c0-6.413-1.923-12.675-5.526-17.978l-156.63-230.681c-11.914-17.544-31.741-28.049-52.947-28.049h-264.896zM658.704 372.707v-180.707h24.896l122.698 180.707h-147.594zM167.939 668.547c120.524 156.138 218.24 174.586 285.133 158.739 73.293-17.36 139.232-81.648 183.466-151.763-115.155-155.869-211.581-174.589-279.149-158.915-74.362 17.251-142.707 81.683-189.45 151.939zM104.428 649.037c100.621-162.8 337.62-357.19 593.252 1.789 9.072 12.739 10.32 29.818 2.422 43.315-95.27 162.854-326.394 358.346-593.234-0.224-9.745-13.094-11.022-30.995-2.44-44.88zM401.664 735.994c31.514 0 60.269-26.858 60.269-64 0-37.146-28.755-64-60.269-64-31.51 0-60.266 26.854-60.266 64 0 37.142 28.755 64 60.266 64zM401.664 799.994c68.634 0 124.269-57.309 124.269-128 0-70.694-55.635-128-124.269-128-68.63 0-124.267 57.306-124.267 128 0 70.691 55.636 128 124.267 128z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["auditing"],"defaultCode":59684,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":949,"name":"auditing","prevSize":32,"id":37,"code":59684},"setIdx":0,"setId":6,"iconIdx":37},{"icon":{"paths":["M224 224c-17.673 0-32 14.327-32 32v544c0 17.674 14.327 32 32 32h544c17.674 0 32-14.326 32-32v-544c0-17.673-14.326-32-32-32h-544zM128 256c0-53.019 42.981-96 96-96h544c53.021 0 96 42.981 96 96v544c0 53.021-42.979 96-96 96h-544c-53.019 0-96-42.979-96-96v-544zM608 460.813c0 41.798-26.714 77.357-64 90.538v133.462h-64v-133.462c-37.286-13.181-64-48.739-64-90.538 0-53.021 42.979-96 96-96s96 42.979 96 96zM608 588.826c38.861-29.19 64-75.667 64-128.013 0-88.365-71.635-160-160-160s-160 71.636-160 160c0 52.346 25.139 98.822 64 128.013v127.987c0 17.674 14.326 32 32 32h128c17.674 0 32-14.326 32-32v-127.987z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["auth"],"defaultCode":59685,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":950,"name":"auth","prevSize":32,"id":38,"code":59685},"setIdx":0,"setId":6,"iconIdx":38},{"icon":{"paths":["M513.35 554.019c66.467 0 120.349-52.493 120.349-117.242 0-64.752-53.882-117.243-120.349-117.243-66.464 0-120.346 52.491-120.346 117.243 0 64.749 53.882 117.242 120.346 117.242zM513.35 490.019c-32.704 0-56.346-25.405-56.346-53.242 0-27.84 23.642-53.242 56.346-53.242 32.707 0 56.349 25.402 56.349 53.242 0 27.837-23.642 53.242-56.349 53.242z","M365.478 894.144h-172.126c-17.673 0-32-14.33-32-32v-702.144c0-17.673 14.327-32 32-32h640.001c17.674 0 32 14.327 32 32v702.144c0 17.67-14.326 32-32 32h-172.128c-6.24 1.274-12.701 1.942-19.318 1.942h-257.11c-6.618 0-13.078-0.669-19.318-1.942zM225.353 830.144h68.244c-3.114-9.456-4.799-19.558-4.799-30.058v-93.446c0-56.109 37.881-105.142 92.172-119.309 19.171-5.002 39.264-5.312 58.579-0.902l42.778 9.766c20.051 4.579 40.909 4.259 60.81-0.934l28.070-7.325c20.694-5.398 42.384-5.734 63.232-0.973 60.534 13.821 103.469 67.664 103.469 129.754v83.37c0 10.499-1.686 20.602-4.8 30.058h68.246v-638.144h-576.001v638.144zM652.918 830.144c12.246-4.49 20.989-16.253 20.989-30.058v-83.37c0-32.234-22.288-60.186-53.715-67.36-10.822-2.47-22.083-2.298-32.826 0.506l-28.070 7.325c-29.853 7.789-61.139 8.272-91.216 1.405l-42.774-9.766c-9.293-2.122-18.957-1.974-28.176 0.432-26.112 6.813-44.333 30.397-44.333 57.382v93.446c0 13.805 8.742 25.568 20.989 30.058h279.133z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["avatar"],"defaultCode":59686,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":951,"name":"avatar","prevSize":32,"id":39,"code":59686},"setIdx":0,"setId":6,"iconIdx":39},{"icon":{"paths":["M737.779 361.376c12.499 12.496 12.499 32.758 0 45.254l-110.947 110.95 110.947 110.947c12.499 12.496 12.499 32.758 0 45.254-12.496 12.499-32.758 12.499-45.254 0l-110.947-110.947-110.95 110.947c-12.496 12.499-32.758 12.499-45.254 0-12.496-12.496-12.496-32.758 0-45.254l110.95-110.947-110.95-110.95c-12.496-12.496-12.496-32.758 0-45.254s32.758-12.496 45.254 0l110.95 110.95 110.947-110.95c12.496-12.496 32.758-12.496 45.254 0z","M312.246 218.073c12.061-16.393 31.2-26.073 51.552-26.073h468.202c35.347 0 64 28.654 64 64v512c0 35.347-28.653 64-64 64h-468.202c-20.352 0-39.491-9.68-51.552-26.074l-188.343-256c-16.598-22.56-16.598-53.293 0-75.853l188.343-256.001zM363.798 256l-188.343 256 188.343 256h468.202v-512h-468.202z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["backspace"],"defaultCode":59687,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":952,"name":"backspace","prevSize":32,"id":40,"code":59687},"setIdx":0,"setId":6,"iconIdx":40},{"icon":{"paths":["M896 512c0-212.077-171.923-384-384-384s-384 171.923-384 384c0 212.077 171.923 384 384 384s384-171.923 384-384zM480 544v286.419c-56.483-5.606-108.646-25.904-152.618-57.011 46.403-78.992 67.251-156.97 71.734-229.408h80.883zM334.8 544c-4.282 58.995-21.005 122.198-56.631 186.458-46.616-49.875-77.462-114.678-84.589-186.458h141.22zM398.954 480c-6.192-93.13-37.366-173.574-70.627-230.072 43.773-30.733 95.594-50.78 151.674-56.348v286.42h-81.046zM279.095 292.556c26.251 47.457 50.118 112.532 55.644 187.444h-141.159c7.174-72.253 38.381-137.437 85.515-187.444zM544 544h80.883c4.483 72.438 25.331 150.416 71.734 229.408-43.971 31.107-96.134 51.405-152.618 57.011v-286.419zM830.419 544c-7.126 71.779-37.971 136.582-84.589 186.458-35.626-64.259-52.349-127.462-56.63-186.458h141.219zM830.419 480h-141.158c5.526-74.912 29.395-139.987 55.645-187.444 47.133 50.008 78.339 115.192 85.514 187.444zM544 193.58c56.080 5.568 107.901 25.614 151.674 56.348-33.261 56.499-64.435 136.943-70.627 230.072h-81.046v-286.42z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["basketball"],"defaultCode":59776,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":953,"id":41,"name":"basketball","prevSize":32,"code":59776},"setIdx":0,"setId":6,"iconIdx":41},{"icon":{"paths":["M233.358 169.364c6.002-6.001 14.141-9.372 22.629-9.372l304.020 0.020c0 0 0.003 0 0 0 46.678 0 91.446 18.543 124.451 51.549 33.008 33.006 51.549 77.772 51.549 124.452s-18.541 91.443-51.549 124.451c-0.803 0.803-1.616 1.6-2.435 2.387 22.867 9.552 43.888 23.533 61.75 41.395 36.006 36.006 56.234 84.845 56.234 135.766s-20.227 99.757-56.234 135.763c-36.006 36.006-84.845 56.237-135.766 56.237l-352.024-0.019c-17.673-0.003-31.998-14.33-31.998-32v-608.001c0-8.487 3.372-16.627 9.373-22.628zM560.006 448.013c29.706 0 58.192-11.802 79.197-32.806 21.005-21.002 32.803-49.491 32.803-79.194 0-29.705-11.798-58.193-32.803-79.197s-49.491-32.804-79.197-32.804l-272.022-0.018v224.019h272.022zM287.984 512.013v255.981l320.022 0.019c0 0 0.003 0 0 0 33.949 0 66.506-13.488 90.512-37.491 24.003-24.006 37.488-56.563 37.488-90.509 0-33.949-13.485-66.506-37.488-90.512-24.006-24.003-56.563-37.488-90.512-37.488h-320.022z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124319081245699212911624514522416519902101":[{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["bold"],"defaultCode":59688,"grid":0},"attrs":[{}],"properties":{"order":954,"name":"bold","prevSize":32,"id":42,"code":59688},"setIdx":0,"setId":6,"iconIdx":42},{"icon":{"paths":["M352 445.437c0-17.67 14.326-32 32-32h256c17.674 0 32 14.33 32 32 0 17.674-14.326 32-32 32h-256c-17.674 0-32-14.326-32-32z","M352 322.557c0-17.672 14.326-31.999 32-31.999h256c17.674 0 32 14.327 32 31.999 0 17.674-14.326 32-32 32h-256c-17.674 0-32-14.326-32-32z","M864 679.68c0 17.674-14.326 32-32 32h-18.509c-8.218 40.547-8.218 82.333 0 122.88h19.789c16.966 0 30.72 13.754 30.72 30.72s-13.754 30.72-30.72 30.72h-545.28c-70.692 0-128-55.014-128-122.88v-453.12c0-106.038 85.961-192 192-192h480c17.674 0 32 14.327 32 32v519.68zM748.419 834.56c-6.787-40.678-6.787-82.202 0-122.88h-460.419c-35.346 0-64 27.507-64 61.44s28.654 61.44 64 61.44h460.419zM224 647.68h576v-455.68h-448c-70.692 0-128 57.308-128 128v327.68z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["book"],"defaultCode":59689,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":955,"name":"book","prevSize":32,"id":43,"code":59689},"setIdx":0,"setId":6,"iconIdx":43},{"icon":{"paths":["M193.603 416h-33.603c-17.673 0-32 14.326-32 32s14.327 32 32 32h704c17.674 0 32-14.326 32-32s-14.326-32-32-32h-33.603c-7.347-73.117-39.702-141.853-92.122-194.274-60.013-60.012-141.405-93.726-226.275-93.726s-166.262 33.714-226.274 93.726c-52.421 52.421-84.777 121.157-92.123 194.274zM330.979 266.981c48.010-48.010 113.126-74.981 181.021-74.981s133.011 26.971 181.021 74.981c40.403 40.404 65.907 92.923 72.973 149.019h-507.987c7.066-56.096 32.57-108.615 72.972-149.019z","M877.242 605.133c16.090-7.315 23.203-26.285 15.891-42.374-7.315-16.090-26.285-23.203-42.374-15.891l-127.558 57.981-127.558-57.981c-8.413-3.824-18.070-3.824-26.483 0l-127.558 57.981-127.558-57.981c-8.413-3.824-18.070-3.824-26.483 0l-140.8 64c-16.089 7.315-23.203 26.285-15.89 42.374s26.284 23.203 42.373 15.891l18.758-8.528v29.68c0 38.102 15.908 74.31 43.672 100.752 27.712 26.394 64.978 40.963 103.528 40.963h345.6c38.55 0 75.814-14.57 103.526-40.963 27.766-26.442 43.674-62.65 43.674-100.752v-64.589l45.242-20.563zM736.442 669.133l31.558-14.346v35.498c0 20.093-8.368 39.699-23.811 54.41-15.494 14.758-36.832 23.306-59.389 23.306h-345.6c-22.556 0-43.893-8.547-59.39-23.306-15.444-14.71-23.81-34.317-23.81-54.41v-58.771l44.8-20.362 127.558 57.981c8.413 3.824 18.070 3.824 26.483 0l127.558-57.981 127.558 57.981c8.413 3.824 18.070 3.824 26.483 0z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["burger"],"defaultCode":59813,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":956,"id":44,"name":"burger","prevSize":32,"code":59813},"setIdx":0,"setId":6,"iconIdx":44},{"icon":{"paths":["M224 224h320v576h-96v-112c0-8.835-7.165-16-16-16h-96c-8.835 0-16 7.165-16 16v112h-96v-576zM608 448h192v352h-192v-352zM832 384h-224v-192c0-17.673-14.326-32-32-32h-384c-17.673 0-32 14.327-32 32v640c0 17.674 14.327 32 32 32h640c17.674 0 32-14.326 32-32v-416c0-17.674-14.326-32-32-32zM304 288c-8.836 0-16 7.164-16 16v32c0 8.835 7.164 16 16 16h32c8.835 0 16-7.165 16-16v-32c0-8.836-7.165-16-16-16h-32zM288 432c0-8.835 7.164-16 16-16h32c8.835 0 16 7.165 16 16v32c0 8.835-7.165 16-16 16h-32c-8.836 0-16-7.165-16-16v-32zM304 544c-8.836 0-16 7.165-16 16v32c0 8.835 7.164 16 16 16h32c8.835 0 16-7.165 16-16v-32c0-8.835-7.165-16-16-16h-32zM416 304c0-8.836 7.165-16 16-16h32c8.835 0 16 7.164 16 16v32c0 8.835-7.165 16-16 16h-32c-8.835 0-16-7.165-16-16v-32zM432 416c-8.835 0-16 7.165-16 16v32c0 8.835 7.165 16 16 16h32c8.835 0 16-7.165 16-16v-32c0-8.835-7.165-16-16-16h-32zM416 560c0-8.835 7.165-16 16-16h32c8.835 0 16 7.165 16 16v32c0 8.835-7.165 16-16 16h-32c-8.835 0-16-7.165-16-16v-32zM688 512c-8.835 0-16 7.165-16 16v32c0 8.835 7.165 16 16 16h32c8.835 0 16-7.165 16-16v-32c0-8.835-7.165-16-16-16h-32zM672 656c0-8.835 7.165-16 16-16h32c8.835 0 16 7.165 16 16v32c0 8.835-7.165 16-16 16h-32c-8.835 0-16-7.165-16-16v-32z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["business"],"defaultCode":59690,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":957,"name":"business","prevSize":32,"id":45,"code":59690},"setIdx":0,"setId":6,"iconIdx":45},{"icon":{"paths":["M277.831 157.44c0-16.259 13.181-29.44 29.44-29.44s29.439 13.181 29.439 29.44v58.876h353.28v-58.876c0-16.259 13.181-29.44 29.44-29.44s29.44 13.181 29.44 29.44v58.876h85.76c17.674 0 32 14.327 32 32v583.68c0 17.674-14.326 32-32 32h-642.559c-17.673 0-32-14.326-32-32v-583.68c0-1.105 0.056-2.196 0.165-3.272 1.639-16.136 15.266-28.728 31.835-28.728h85.76v-58.876zM802.63 392.957h-578.559v407.040h578.559v-407.040zM425.034 644.474c0-8.835 7.162-16 16-16h26.88c8.835 0 16 7.165 16 16v26.88c0 8.838-7.165 16-16 16h-26.88c-8.838 0-16-7.162-16-16v-26.88zM323.27 510.72c-8.836 0-15.999 7.162-15.999 16v26.88c0 8.835 7.163 16 15.999 16h26.88c8.838 0 16-7.165 16-16v-26.88c0-8.838-7.162-16-16-16h-26.88zM542.79 526.72c0-8.835 7.165-16 16-16h26.88c8.838 0 16 7.165 16 16v26.88c0 8.835-7.162 16-16 16h-26.88c-8.835 0-16-7.165-16-16v-26.88zM323.27 628.474c-8.835 0-15.999 7.165-15.999 16v26.88c0 8.838 7.164 16 15.999 16h26.88c8.838 0 16-7.162 16-16v-26.88c0-8.835-7.162-16-16-16h-26.88zM542.79 644.474c0-8.835 7.165-16 16-16h26.88c8.838 0 16 7.165 16 16v26.88c0 8.838-7.162 16-16 16h-26.88c-8.835 0-16-7.162-16-16v-26.88zM441.030 510.72c-8.835 0-16 7.165-16 16v26.88c0 8.835 7.165 16 16 16h26.88c8.838 0 16-7.165 16-16v-26.88c0-8.835-7.162-16-16-16h-26.88zM660.55 526.72c0-8.835 7.165-16 16-16h26.88c8.838 0 16 7.165 16 16v26.88c0 8.835-7.162 16-16 16h-26.88c-8.835 0-16-7.165-16-16v-26.88zM676.55 628.474c-8.835 0-16 7.165-16 16v26.88c0 8.838 7.165 16 16 16h26.88c8.838 0 16-7.162 16-16v-26.88c0-8.835-7.162-16-16-16h-26.88z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["calendar"],"defaultCode":59691,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":958,"name":"calendar","prevSize":32,"id":46,"code":59691},"setIdx":0,"setId":6,"iconIdx":46},{"icon":{"paths":["M256 202.672c0-17.673 19.102-32 42.667-32h255.999c23.565 0 42.669 14.327 42.669 32s-19.104 32-42.669 32h-255.999c-23.564 0-42.667-14.327-42.667-32zM160 383.994c0-5.891 4.776-10.666 10.667-10.666h511.999c5.891 0 10.669 4.774 10.669 10.666v85.334c0 11.376 6.038 21.894 15.859 27.632s21.949 5.83 31.856 0.243l97.83-55.165c2.531-1.427 4.858-3.19 6.912-5.248 6.72-6.717 18.208-1.958 18.208 7.546v263.318c0 9.504-11.488 14.262-18.208 7.542-2.054-2.054-4.381-3.818-6.912-5.245l-97.83-55.165c-9.907-5.587-22.035-5.494-31.856 0.243s-15.859 16.256-15.859 27.632v85.331c0 5.891-4.778 10.669-10.669 10.669h-511.999c-5.891 0-10.667-4.778-10.667-10.669v-384zM170.667 309.328c-41.237 0-74.667 33.43-74.667 74.666v384c0 41.238 33.429 74.669 74.667 74.669h511.999c41.238 0 74.669-33.43 74.669-74.669v-30.55l46.778 26.374c47.418 41.99 123.888 8.701 123.888-56.163v-263.318c0-64.864-76.47-98.157-123.888-56.166l-46.778 26.378v-30.554c0-41.235-33.43-74.666-74.669-74.666h-511.999z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["camera"],"defaultCode":59696,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":959,"name":"camera","prevSize":32,"id":47,"code":59696},"setIdx":0,"setId":6,"iconIdx":47},{"icon":{"paths":["M866.128 153.126c-12.496-12.497-32.758-12.497-45.254 0l-668.246 668.246c-12.497 12.496-12.497 32.758 0 45.254s32.758 12.496 45.255 0l668.246-668.246c12.496-12.497 12.496-32.758 0-45.255zM298.667 170.671c-23.564 0-42.667 14.327-42.667 32s19.102 32 42.667 32h255.999c23.565 0 42.669-14.327 42.669-32s-19.104-32-42.669-32h-255.999zM574.173 309.327h-403.506c-41.237 0-74.667 33.428-74.667 74.667v384c0 6.010 0.71 11.856 2.051 17.453l61.949-61.949v-339.504c0-5.891 4.776-10.666 10.667-10.666h339.506l64-64.001zM376.339 778.659h306.326c5.891 0 10.669-4.774 10.669-10.666v-85.334c0-11.373 6.038-21.891 15.859-27.629s21.949-5.83 31.856-0.243l97.83 55.162c2.531 1.427 4.858 3.194 6.912 5.248 6.72 6.72 18.208 1.962 18.208-7.542v-263.322c0-9.501-11.488-14.262-18.208-7.542-2.054 2.054-4.381 3.821-6.912 5.248l-97.83 55.162c-9.907 5.587-22.035 5.494-31.856-0.243-9.821-5.734-15.859-16.256-15.859-27.629v-7.661l110.778-73.498c47.418-41.99 123.888-8.701 123.888 56.163v263.322c0 64.864-76.47 98.154-123.888 56.163l-46.778-26.378v30.554c0 41.238-33.43 74.666-74.669 74.666h-370.327l64.001-64z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["camera-disabled"],"defaultCode":59692,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":960,"name":"camera-disabled","prevSize":32,"id":48,"code":59692},"setIdx":0,"setId":6,"iconIdx":48},{"icon":{"paths":["M288 224c-17.673 0-32 14.327-32 32s14.327 32 32 32h256c17.674 0 32-14.327 32-32s-14.326-32-32-32h-256z","M170.667 341.328c-23.564 0-42.667 19.104-42.667 42.666v384c0 23.565 19.102 42.669 42.667 42.669h511.999c23.565 0 42.669-19.104 42.669-42.669v-128l97.83 97.83c26.877 26.88 72.835 7.843 72.835-30.17v-263.318c0-38.013-45.958-57.050-72.835-30.173l-97.83 97.83v-128c0-23.562-19.104-42.666-42.669-42.666h-511.999z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["camera-filled"],"defaultCode":59693,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":961,"name":"camera-filled","prevSize":32,"id":49,"code":59693},"setIdx":0,"setId":6,"iconIdx":49},{"icon":{"paths":["M196.731 191.997c0-15.807 12.814-28.622 28.622-28.622h128.001c15.805 0 28.621 12.814 28.621 28.622s-12.816 28.621-28.621 28.621h-128.001c-15.807 0-28.622-12.814-28.622-28.621z","M737.354 559.997c0 97.203-78.8 176-176 176-97.203 0-176-78.797-176-176s78.797-176 176-176c97.2 0 176 78.797 176 176zM673.354 559.997c0-61.856-50.144-112-112-112s-112 50.144-112 112c0 61.856 50.144 112 112 112s112-50.144 112-112z","M193.353 255.997c-35.346 0-64 28.654-64 64v448c0 35.347 28.654 64 64 64h640.001c35.344 0 64-28.653 64-64v-448c0-35.346-28.656-64-64-64h-640.001zM833.354 319.997v448h-640.001v-448h640.001z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["camera-photo"],"defaultCode":59694,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":962,"name":"camera-photo","prevSize":32,"id":50,"code":59694},"setIdx":0,"setId":6,"iconIdx":50},{"icon":{"paths":["M298.667 170.672c-23.564 0-42.667 14.327-42.667 32s19.102 32 42.667 32h255.999c23.565 0 42.669-14.327 42.669-32s-19.104-32-42.669-32h-255.999z","M545.712 503.453c11.267-11.267 11.19-29.61-0.17-40.97s-29.706-11.437-40.973-0.17l-71.402 71.402-71.994-71.997c-11.363-11.36-29.706-11.437-40.973-0.17s-11.19 29.61 0.17 40.97l71.997 71.997-71.402 71.402c-11.266 11.267-11.19 29.61 0.17 40.97 11.363 11.36 29.706 11.437 40.973 0.17l71.402-71.402 71.997 71.997c11.36 11.36 29.702 11.437 40.97 0.17s11.19-29.61-0.17-40.97l-71.997-71.997 71.402-71.402z","M96 383.994c0-41.235 33.429-74.666 74.667-74.666h511.999c41.238 0 74.669 33.43 74.669 74.666v30.554l46.778-26.378c47.418-41.99 123.888-8.698 123.888 56.166v263.318c0 64.864-76.47 98.154-123.888 56.163l-46.778-26.374v30.55c0 41.238-33.43 74.669-74.669 74.669h-511.999c-41.237 0-74.667-33.43-74.667-74.669v-384zM170.667 373.328c-5.891 0-10.667 4.774-10.667 10.666v384c0 5.891 4.776 10.669 10.667 10.669h511.999c5.891 0 10.669-4.778 10.669-10.669v-85.331c0-11.376 6.038-21.894 15.859-27.632s21.949-5.83 31.856-0.243l97.83 55.165c2.531 1.427 4.858 3.19 6.912 5.245 6.72 6.72 18.208 1.962 18.208-7.542v-263.318c0-9.504-11.488-14.262-18.208-7.546-2.054 2.058-4.381 3.821-6.912 5.248l-97.83 55.165c-9.907 5.587-22.035 5.494-31.856-0.243s-15.859-16.256-15.859-27.632v-85.334c0-5.891-4.778-10.666-10.669-10.666h-511.999z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["camera-unavailable"],"defaultCode":59695,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":963,"name":"camera-unavailable","prevSize":32,"id":51,"code":59695},"setIdx":0,"setId":6,"iconIdx":51},{"icon":{"paths":["M224.248 304.026c-49.642 68.947-66.502 152.646-66.502 207.968v1.453l-0.132 1.446c-9.702 106.717 28.59 181.93 90.135 234.006 62.938 53.254 152.152 83.731 244.197 93.958 91.965 10.218 193.27 1.446 273.306-15.482 40.022-8.461 73.616-18.733 97.443-29.075 9.245-4.013 16.438-7.786 21.734-11.126-2.464-1.565-5.446-3.306-9.002-5.197-9.222-4.912-19.779-9.578-30.733-14.368l-1.914-0.835c-9.667-4.221-20.47-8.941-28.656-13.517-14.835-8.298-29.389-17.734-40.006-27.776-5.222-4.941-11.165-11.571-15.146-19.827-4.208-8.742-7.226-21.792-1.306-35.597 31.978-74.621 47.178-115.494 54.538-142.483 6.874-25.2 6.874-37.888 6.874-58.064v-0.182c0-16.035-9.318-89.517-55.811-158.032-45.018-66.338-125.99-129.968-274.854-129.968-134.637 0-215.698 55.382-264.165 122.698zM172.309 266.63c60.333-83.796 160.606-149.302 316.103-149.302 171.136 0 271.494 75.037 327.811 158.032 54.842 80.819 66.854 167.338 66.854 193.968 0 22.384-0.022 41.696-9.126 75.088-8.131 29.805-23.485 70.928-51.946 137.923 5.261 4.166 13.072 9.306 23.36 15.062 5.315 2.97 13.485 6.55 24.963 11.568 10.653 4.659 23.437 10.266 35.174 16.515 11.258 5.994 24.416 14.029 34.202 24.538 10.234 10.992 20.973 29.846 13.299 52.864-5.056 15.168-16.794 25.939-26.576 33.094-10.63 7.776-23.818 14.762-38.253 21.030-29.008 12.589-67.030 23.962-109.683 32.982-85.309 18.038-193.581 27.587-293.616 16.474-99.955-11.107-202.74-44.634-278.468-108.71-76.833-65.011-123.811-159.994-112.66-287.222 0.286-65.549 19.841-162.349 78.561-243.904zM493.744 320c17.674 0 32 14.326 32 32v224c0 17.674-14.326 32-32 32s-32-14.326-32-32v-224c0-17.674 14.326-32 32-32zM525.744 672c0-17.674-14.326-32-32-32s-32 14.326-32 32c0 17.674 14.326 32 32 32s32-14.326 32-32z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["canned-response"],"defaultCode":59697,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":964,"name":"canned-response","prevSize":32,"id":52,"code":59697},"setIdx":0,"setId":6,"iconIdx":52},{"icon":{"paths":["M193.352 181.331c-53.020 0-96 42.981-96 96v469.335c0 53.018 42.98 96 96 96h639.999c53.021 0 96-42.982 96-96v-469.335c0-53.019-42.979-96-96-96h-639.999zM161.352 277.331c0-17.673 14.327-32 32-32h639.999c17.674 0 32 14.327 32 32v202.673h-703.999v-202.673zM161.352 544.003h703.999v202.662c0 17.67-14.326 32-32 32h-639.999c-17.673 0-32-14.33-32-32v-202.662zM812.016 661.331c0-35.347-28.653-64-64-64-35.344 0-64 28.653-64 64s28.656 64 64 64c35.347 0 64-28.653 64-64z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["card"],"defaultCode":59698,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":965,"name":"card","prevSize":32,"id":53,"code":59698},"setIdx":0,"setId":6,"iconIdx":53},{"icon":{"paths":["M368 182.4c0-17.673-14.326-32-32-32s-32 14.327-32 32v144h-144c-17.673 0-32 14.326-32 32s14.327 32 32 32h144v288h-144c-17.673 0-32 14.326-32 32s14.327 32 32 32h144v144c0 17.674 14.327 32 32 32s32-14.326 32-32v-144h288v144c0 17.674 14.326 32 32 32s32-14.326 32-32v-144h144c17.674 0 32-14.326 32-32s-14.326-32-32-32h-144v-80h-64v80h-288v-288h80v-64h-80v-144z","M640.515 327.283c-15.328-3.59-31.306-3.338-46.512 0.733-41.763 11.187-70.803 49.030-70.803 92.269v35.539c0 36.003 29.187 65.194 65.194 65.194h210.413c36.006 0 65.194-29.19 65.194-65.194v-28.336c0-47.667-33.040-88.957-79.27-99.792-16.413-3.846-33.613-3.603-49.946 0.771l-25.827 6.918c-10.381 2.781-21.286 2.95-31.747 0.499l-36.694-8.602z","M782.637 217.037c0 49.174-39.862 89.037-89.037 89.037s-89.037-39.863-89.037-89.037c0-49.174 39.862-89.037 89.037-89.037s89.037 39.863 89.037 89.037z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["channel-auto-join"],"defaultCode":59746,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":966,"name":"channel-auto-join","prevSize":32,"id":54,"code":59746},"setIdx":0,"setId":6,"iconIdx":54},{"icon":{"paths":["M236.709 162.578c11.779-5.037 25.426-2.564 34.688 6.286l150.709 144c6.32 6.037 9.894 14.396 9.894 23.136s-3.574 17.101-9.894 23.136l-150.709 144c-9.262 8.851-22.909 11.325-34.688 6.288s-19.419-16.614-19.419-29.424v-112h-73.29c-17.673 0-32-14.326-32-32 0-17.672 14.327-31.999 32-31.999h73.29v-112c0-12.81 7.64-24.386 19.419-29.423zM320 368.179v-0.179h0.189l-0.189 0.179zM320.189 304.001h-0.189v-0.179l0.189 0.179z","M492.899 303.258c8.762-9.388 21.245-15.258 35.101-15.258 26.509 0 48 21.49 48 48s-21.491 48-48 48c-16.582 0-31.203-8.41-39.824-21.197l-43.098 48.483c20.49 22.554 50.051 36.714 82.922 36.714 61.856 0 112-50.144 112-112s-50.144-112-112-112c-25.549 0-49.098 8.554-67.942 22.955l32.842 56.303z","M145.615 483.229l32.174 64.349c-0.861 3.040-1.318 6.23-1.318 9.501v44.688c0 17.674 14.327 32 32 32h79.53v64h-79.53c-53.019 0-96-42.979-96-96v-44.688c0-28.848 12.515-55.488 33.144-73.85z","M625.267 640h-0.797c0.259 0.598 0.525 1.194 0.797 1.786v-1.786z","M424.714 640h-0.797v1.786c0.272-0.592 0.538-1.187 0.797-1.786z","M477.901 494.515c-28.56-10.957-60.291-10.211-88.307 2.067-42.282 18.534-69.594 60.326-69.594 106.49v132.928c0 53.021 42.979 96 96 96h224c53.021 0 96-42.979 96-96v-125.062c0-51.162-31.536-97.034-79.306-115.354-30.352-11.642-64.067-10.851-93.84 2.198l-2.070 0.909c-21.523 9.434-45.901 10.006-67.843 1.59l-15.040-5.766zM415.286 555.2c12.595-5.52 26.858-5.856 39.699-0.931l15.040 5.77c37.664 14.445 79.504 13.462 116.451-2.73l2.070-0.909c14.349-6.288 30.602-6.669 45.229-1.059 23.024 8.829 38.224 30.938 38.224 55.597v125.062c0 17.674-14.326 32-32 32h-224c-17.674 0-32-14.326-32-32v-132.928c0-20.752 12.278-39.539 31.286-47.872z","M864 320c0-53.019-42.979-96-96-96s-96 42.981-96 96c0 53.021 42.979 96 96 96s96-42.979 96-96zM800 320c0 17.674-14.326 32-32 32s-32-14.326-32-32c0-17.673 14.326-32 32-32s32 14.327 32 32z","M840.714 697.766h-72.714v-64h72.714c17.674 0 32-14.326 32-32v-44.688c0-15.050-9.664-28.394-23.958-33.091-7.536-2.474-15.69-2.304-23.114 0.483l-4.554 1.709c-19.77 7.421-40.89 9.978-61.619 7.632-12.438-31.683-37.722-57.549-70.774-70.227-1.754-0.672-3.52-1.302-5.296-1.894 18.058-5.312 37.36-5.040 55.344 0.867l14.182 4.659c14.886 4.893 30.998 4.554 45.667-0.954l4.554-1.709c21.069-7.91 44.205-8.394 65.581-1.37 40.566 13.325 67.987 51.197 67.987 93.894v44.688c0 53.021-42.982 96-96 96z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["channel-move-to-team"],"defaultCode":59747,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":967,"name":"channel-move-to-team","prevSize":32,"id":55,"code":59747},"setIdx":0,"setId":6,"iconIdx":55},{"icon":{"paths":["M368 160c0-17.673-14.326-32-32-32s-32 14.327-32 32v144h-144c-17.673 0-32 14.327-32 32s14.327 32 32 32h144v288h-144c-17.673 0-32 14.326-32 32s14.327 32 32 32h144v144c0 17.674 14.327 32 32 32s32-14.326 32-32v-144h288v144c0 17.674 14.326 32 32 32s32-14.326 32-32v-144h144c17.674 0 32-14.326 32-32s-14.326-32-32-32h-144v-80h-58.666c-1.786 0-3.565-0.042-5.334-0.118v80.118h-288v-288h168.79c-0.522-5.264-0.79-10.602-0.79-16v-48h-168v-144z","M760 96c-57.437 0-104 46.562-104 104v56h-24c-17.674 0-32 14.327-32 32v192c0 17.674 14.326 32 32 32h256c17.674 0 32-14.326 32-32v-192c0-17.673-14.326-32-32-32h-24v-56c0-57.438-46.563-104-104-104zM800 255.238h-80v-55.238c0-22.092 17.907-40 40-40s40 17.908 40 40v55.238z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["channel-private"],"defaultCode":59699,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":968,"name":"channel-private","prevSize":32,"id":56,"code":59699},"setIdx":0,"setId":6,"iconIdx":56},{"icon":{"paths":["M336 128c17.674 0 32 14.327 32 32v144h288v-144c0-17.673 14.326-32 32-32s32 14.327 32 32v144h144c17.674 0 32 14.327 32 32s-14.326 32-32 32h-144v288h144c17.674 0 32 14.326 32 32s-14.326 32-32 32h-144v144c0 17.674-14.326 32-32 32s-32-14.326-32-32v-144h-288v144c0 17.674-14.326 32-32 32s-32-14.326-32-32v-144h-144c-17.673 0-32-14.326-32-32s14.327-32 32-32h144v-288h-144c-17.673 0-32-14.326-32-32s14.327-32 32-32h144v-144c0-17.673 14.327-32 32-32zM368 368v288h288v-288h-288z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["channel-public"],"defaultCode":59700,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":969,"name":"channel-public","prevSize":32,"id":57,"code":59700},"setIdx":0,"setId":6,"iconIdx":57},{"icon":{"paths":["M886.627 105.372c12.496 12.497 12.496 32.758 0 45.255l-89.373 89.372 89.373 89.373c12.496 12.496 12.496 32.758 0 45.254s-32.758 12.496-45.254 0l-89.373-89.372-89.373 89.372c-12.496 12.496-32.758 12.496-45.254 0s-12.496-32.758 0-45.254l89.373-89.373-89.373-89.372c-12.496-12.497-12.496-32.758 0-45.255s32.758-12.497 45.254 0l89.373 89.373 89.373-89.373c12.496-12.497 32.758-12.497 45.254 0zM226.501 304.042c-49.642 68.947-66.502 152.646-66.502 207.968v1.453l-0.132 1.446c-9.701 106.717 28.59 181.93 90.135 234.006 62.938 53.254 152.151 83.731 244.196 93.958 91.968 10.218 193.27 1.446 273.309-15.482 40.019-8.461 73.613-18.733 97.44-29.075 9.245-4.013 16.438-7.786 21.738-11.126-2.467-1.565-5.446-3.306-9.005-5.2-9.222-4.909-19.776-9.574-30.733-14.365l-1.917-0.838c-9.667-4.221-20.47-8.938-28.653-13.517-14.835-8.294-29.389-17.731-40.003-27.773-5.226-4.941-11.168-11.571-15.146-19.827-4.211-8.742-7.226-21.792-1.309-35.6 42.086-98.205 54.957-137.722 59.219-163.318 2.906-17.434 19.392-29.21 36.822-26.307 17.434 2.906 29.213 19.389 26.307 36.822-5.453 32.749-20.333 76.41-58.006 165.088 5.261 4.166 13.069 9.306 23.357 15.059 5.315 2.973 13.485 6.554 24.963 11.571 10.656 4.656 23.437 10.266 35.174 16.515 11.261 5.994 24.419 14.029 34.202 24.538 10.234 10.992 20.973 29.846 13.299 52.864-5.053 15.168-16.794 25.939-26.576 33.094-10.627 7.776-23.814 14.762-38.253 21.027-29.005 12.592-67.027 23.965-109.68 32.986-85.312 18.038-193.584 27.587-293.616 16.47-99.955-11.104-202.742-44.63-278.471-108.707-76.833-65.014-123.811-159.997-112.66-287.222 0.286-65.549 19.841-162.349 78.561-243.904 60.333-83.796 160.605-149.302 316.103-149.302 17.674 0 32 14.327 32 32s-14.326 32-32 32c-134.637 0-215.697 55.382-264.164 122.698z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["chat-close"],"defaultCode":59701,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":970,"name":"chat-close","prevSize":32,"id":58,"code":59701},"setIdx":0,"setId":6,"iconIdx":58},{"icon":{"paths":["M778 93.833c-11.795-13.162-32.026-14.271-45.187-2.477s-14.272 32.025-2.477 45.187l81.222 90.645h-216.358c-17.674 0-32 14.327-32 32s14.326 32 32 32h216.358l-81.222 90.646c-11.795 13.162-10.685 33.392 2.477 45.187 13.162 11.792 33.392 10.685 45.187-2.477l129.030-144.001c10.893-12.154 10.893-30.556 0-42.71l-129.030-144zM159.999 512.010c0-55.322 16.86-139.021 66.502-207.968 48.467-67.316 129.527-122.698 264.164-122.698 17.674 0 32-14.327 32-32s-14.326-32-32-32c-155.498 0-255.77 65.507-316.102 149.302-58.72 81.555-78.275 178.355-78.561 243.904-11.151 127.229 35.827 222.211 112.66 287.222 75.729 64.077 178.516 97.603 278.471 108.707 100.032 11.117 208.304 1.568 293.616-16.47 42.653-9.021 80.675-20.394 109.68-32.982 14.438-6.269 27.626-13.254 38.253-21.030 9.782-7.155 21.523-17.926 26.579-33.094 7.67-23.018-3.069-41.872-13.302-52.864-9.782-10.509-22.941-18.544-34.202-24.538-11.738-6.25-24.518-11.859-35.171-16.515-11.482-5.018-19.651-8.598-24.966-11.571-10.288-5.754-18.096-10.89-23.357-15.059 37.674-88.678 52.554-132.339 58.010-165.088 2.902-17.43-8.877-33.917-26.31-36.822-17.43-2.902-33.917 8.877-36.822 26.307-4.262 25.597-17.133 65.114-59.219 163.318-5.917 13.808-2.902 26.858 1.309 35.6 3.978 8.256 9.92 14.886 15.146 19.827 10.614 10.042 25.171 19.478 40.003 27.776 8.186 4.576 18.989 9.296 28.656 13.517v0l1.914 0.835c10.957 4.79 21.51 9.456 30.733 14.368 3.558 1.891 6.541 3.632 9.005 5.197-5.299 3.341-12.493 7.114-21.738 11.126-23.827 10.342-57.421 20.614-97.44 29.075-80.038 16.928-181.341 25.699-273.309 15.482-92.045-10.227-181.258-40.704-244.196-93.958-61.545-52.077-99.836-127.29-90.135-234.006l0.132-1.446v-1.453z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["chat-forward"],"defaultCode":59702,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":971,"name":"chat-forward","prevSize":32,"id":59,"code":59702},"setIdx":0,"setId":6,"iconIdx":59},{"icon":{"paths":["M854.506 233.252c12.563 12.429 12.672 32.691 0.243 45.254l-474.877 480c-6.013 6.077-14.208 9.498-22.755 9.494-8.55-0.003-16.742-3.427-22.752-9.507l-165.126-167.088c-12.423-12.57-12.303-32.832 0.268-45.254s32.831-12.304 45.254 0.269l142.375 144.067 452.115-456.992c12.429-12.564 32.691-12.672 45.254-0.243z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["check"],"defaultCode":59703,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":972,"name":"check","prevSize":32,"id":60,"code":59703},"setIdx":0,"setId":6,"iconIdx":60},{"icon":{"paths":["M204.8 128h614.4c42.416 0 76.8 34.385 76.8 76.8v614.4c0 42.416-34.384 76.8-76.8 76.8h-614.4c-42.415 0-76.8-34.384-76.8-76.8v-614.4c0-42.415 34.385-76.8 76.8-76.8zM769.062 336.88c9.322-9.424 9.238-24.619-0.182-33.941-9.424-9.322-24.621-9.241-33.942 0.182l-339.085 342.745-106.782-108.051c-9.317-9.43-24.513-9.52-33.94-0.202s-9.518 24.512-0.201 33.939l123.842 125.318c4.509 4.56 10.653 7.126 17.066 7.13s12.557-2.563 17.069-7.12l356.157-360z"],"attrs":[{"fill":"rgb(29, 116, 245)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":5}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":4}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":6}]},"tags":["checkbox-checked"],"defaultCode":59654,"grid":0},"attrs":[{"fill":"rgb(29, 116, 245)"}],"properties":{"order":973,"name":"checkbox-checked","prevSize":32,"id":61,"code":59654},"setIdx":0,"setId":6,"iconIdx":61},{"icon":{"paths":["M819.2 204.8v614.4h-614.4v-614.4h614.4zM204.8 128c-42.415 0-76.8 34.385-76.8 76.8v614.4c0 42.416 34.385 76.8 76.8 76.8h614.4c42.416 0 76.8-34.384 76.8-76.8v-614.4c0-42.415-34.384-76.8-76.8-76.8h-614.4z"],"attrs":[{"fill":"rgb(203, 206, 209)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":8}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":8}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":10}]},"tags":["checkbox-unchecked"],"defaultCode":59653,"grid":0},"attrs":[{"fill":"rgb(203, 206, 209)"}],"properties":{"order":974,"name":"checkbox-unchecked","prevSize":32,"id":62,"code":59653},"setIdx":0,"setId":6,"iconIdx":62},{"icon":{"paths":["M281.372 436.042c12.497-12.499 32.758-12.499 45.255 0l185.373 185.373 185.373-185.373c12.496-12.499 32.758-12.499 45.254 0 12.496 12.496 12.496 32.758 0 45.254l-208 208c-12.496 12.496-32.758 12.496-45.254 0l-208-208c-12.497-12.496-12.497-32.758 0-45.254z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["chevron-down"],"defaultCode":59704,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":975,"name":"chevron-down","prevSize":32,"id":63,"code":59704},"setIdx":0,"setId":6,"iconIdx":63},{"icon":{"paths":["M587.962 281.372c12.496 12.497 12.496 32.758 0 45.255l-185.373 185.373 185.373 185.373c12.496 12.496 12.496 32.758 0 45.254-12.499 12.496-32.758 12.496-45.258 0l-208-208c-12.496-12.496-12.496-32.758 0-45.254l208-208c12.499-12.497 32.758-12.497 45.258 0z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["chevron-left"],"defaultCode":59706,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":976,"name":"chevron-left","prevSize":32,"id":64,"code":59706},"setIdx":0,"setId":6,"iconIdx":64},{"icon":{"paths":["M670.17 183.165c16.662 16.662 16.662 43.677 0 60.34l-268.496 268.495 268.496 268.499c16.662 16.662 16.662 43.677 0 60.339s-43.677 16.662-60.339 0l-298.668-298.669c-8.002-8-12.497-18.851-12.497-30.17 0-11.315 4.495-22.166 12.497-30.17l298.668-298.666c16.662-16.662 43.677-16.662 60.339 0z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["chevron-left-big"],"defaultCode":59705,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":977,"name":"chevron-left-big","prevSize":32,"id":65,"code":59705},"setIdx":0,"setId":6,"iconIdx":65},{"icon":{"paths":["M436.038 742.627c-12.496-12.496-12.496-32.758 0-45.254l185.373-185.373-185.373-185.373c-12.496-12.497-12.496-32.758 0-45.254 12.499-12.497 32.758-12.497 45.254 0l208 208c12.499 12.496 12.499 32.758 0 45.254l-207.997 208c-12.499 12.496-32.758 12.496-45.258 0z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["chevron-right"],"defaultCode":59707,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":978,"name":"chevron-right","prevSize":32,"id":66,"code":59707},"setIdx":0,"setId":6,"iconIdx":66},{"icon":{"paths":["M742.627 587.958c-12.496 12.499-32.758 12.499-45.254 0l-185.373-185.373-185.373 185.373c-12.496 12.499-32.758 12.499-45.254 0-12.497-12.496-12.497-32.758 0-45.254l208-208c12.496-12.496 32.758-12.496 45.254 0l208 208c12.496 12.496 12.496 32.758 0 45.254z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["chevron-up"],"defaultCode":59708,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":979,"name":"chevron-up","prevSize":32,"id":67,"code":59708},"setIdx":0,"setId":6,"iconIdx":67},{"icon":{"paths":["M512 864c194.403 0 352-157.597 352-352 0-46.522-9.024-90.931-25.418-131.581l48.518-48.518c26.211 54.496 40.899 115.581 40.899 180.099 0 229.75-186.25 416-416 416s-416-186.25-416-416c0-229.75 186.25-416 416-416 95.376 0 183.254 32.096 253.424 86.076l-45.712 45.712c-58.221-42.623-130.029-67.788-207.712-67.788-194.404 0-352 157.596-352 352s157.596 352 352 352zM902.63 230.623c12.496-12.499 12.493-32.76-0.006-45.255s-32.762-12.491-45.254 0.008l-345.386 345.503-105.341-105.491c-12.486-12.506-32.749-12.522-45.254-0.032-12.506 12.486-12.522 32.749-0.032 45.254l127.971 128.157c6 6.006 14.144 9.386 22.634 9.389 8.493 0 16.637-3.373 22.64-9.376l368.029-368.157z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["circle-check"],"defaultCode":59709,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":980,"name":"circle-check","prevSize":32,"id":68,"code":59709},"setIdx":0,"setId":6,"iconIdx":68},{"icon":{"paths":["M608 192c0-53.019-42.979-96-96-96s-96 42.981-96 96h-192c-17.673 0-32 14.327-32 32v672c0 17.674 14.327 32 32 32h576c17.674 0 32-14.326 32-32v-672c0-17.673-14.326-32-32-32h-192zM256 864v-608h96v64c0 17.674 14.326 32 32 32h256c17.674 0 32-14.326 32-32v-64h96v608h-512zM512 224c17.674 0 32-14.327 32-32s-14.326-32-32-32c-17.674 0-32 14.327-32 32s14.326 32 32 32z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["clipboard"],"defaultCode":59710,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":981,"name":"clipboard","prevSize":32,"id":69,"code":59710},"setIdx":0,"setId":6,"iconIdx":69},{"icon":{"paths":["M864 512c0 194.403-157.597 352-352 352s-352-157.597-352-352c0-194.404 157.596-352 352-352s352 157.596 352 352zM928 512c0-229.75-186.25-416-416-416s-416 186.25-416 416c0 229.75 186.25 416 416 416s416-186.25 416-416zM544 288c0-17.673-14.326-32-32-32s-32 14.327-32 32v224c0 8.486 3.373 16.627 9.373 22.627l96 96c12.496 12.496 32.758 12.496 45.254 0s12.496-32.758 0-45.254l-86.627-86.627v-210.746z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["clock"],"defaultCode":59711,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":982,"name":"clock","prevSize":32,"id":70,"code":59711},"setIdx":0,"setId":6,"iconIdx":70},{"icon":{"paths":["M806.627 262.628c12.496-12.497 12.496-32.758 0-45.255s-32.758-12.497-45.254 0l-249.373 249.373-249.372-249.373c-12.497-12.497-32.758-12.497-45.255 0s-12.497 32.758 0 45.255l249.373 249.372-249.373 249.373c-12.497 12.496-12.497 32.758 0 45.254s32.758 12.496 45.255 0l249.372-249.373 249.373 249.373c12.496 12.496 32.758 12.496 45.254 0s12.496-32.758 0-45.254l-249.373-249.373 249.373-249.372z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["close"],"defaultCode":59712,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":983,"name":"close","prevSize":32,"id":71,"code":59712},"setIdx":0,"setId":6,"iconIdx":71},{"icon":{"paths":["M273.129 356.678c6.747-28.298 25.696-52.004 51.21-67.152 25.6-15.2 56.323-20.858 84.698-14.53 27.642 6.163 55.117 24.12 74.874 60.339l22.541 41.325 30.134-36.16c27.238-32.689 85.126-39.713 134.714-14.064 23.562 12.186 42.208 30.618 52.064 53.488 9.654 22.406 12.112 51.898-1.434 89.149l-15.616 42.938h45.686c53.606 0 82.419 15.882 97.642 33.75 15.651 18.374 21.898 44.646 18.557 74.714-3.344 30.083-16.054 60.518-33.456 82.89-17.939 23.066-36.646 32.646-50.742 32.646h-543.998c-18.791 0-37.068-10.362-52.195-31.578-15.217-21.344-24.978-51.050-25.818-81.312-0.84-30.227 7.237-57.914 23.733-77.491 15.796-18.746 42.268-33.619 86.279-33.619h59.791l-33.165-49.75c-27.882-41.824-32.118-77.814-25.498-105.581zM518.218 272.084c-26.339-32.073-59.667-51.619-95.251-59.554-45.626-10.174-92.902-0.833-131.301 21.965-38.487 22.85-69.538 60.142-80.791 107.342-8.278 34.72-5.369 72.758 10.731 111.77-35.67 8.464-64.099 26.186-84.825 50.784-29.004 34.422-39.927 78.733-38.766 120.506 1.159 41.738 14.399 84.032 37.682 116.688 23.373 32.784 59.097 58.426 104.306 58.426h543.999c41.907 0 77.2-26.419 101.261-57.354 24.598-31.629 41.888-73.197 46.544-115.114 4.659-41.933-3.094-87.658-33.443-123.283-24.106-28.301-59.504-46.774-105.616-53.456 5.83-35.194 1.686-67.674-10.605-96.205-16.646-38.628-46.998-67.197-81.437-85.010-54.902-28.397-128.733-32.652-182.486 2.495zM512 437.331c17.674 0 32 14.33 32 32v53.328h53.334c17.674 0 32 14.33 32 32 0 17.674-14.326 32-32 32h-53.334v53.341c0 17.674-14.326 32-32 32s-32-14.326-32-32v-53.341h-53.331c-17.674 0-32-14.326-32-32 0-17.67 14.326-32 32-32h53.331v-53.328c0-17.67 14.326-32 32-32z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["cloud-connectivity"],"defaultCode":59713,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":984,"name":"cloud-connectivity","prevSize":32,"id":72,"code":59713},"setIdx":0,"setId":6,"iconIdx":72},{"icon":{"paths":["M630.157 204.798c16.493 6.344 24.723 24.859 18.378 41.355l-213.331 554.667c-6.346 16.496-24.861 24.723-41.357 18.381-16.493-6.346-24.723-24.861-18.378-41.357l213.331-554.666c6.346-16.495 24.861-24.724 41.357-18.38zM321.296 361.37c12.496 12.499 12.496 32.758 0 45.258l-105.373 105.37 105.373 105.373c12.496 12.499 12.496 32.758 0 45.258-12.497 12.496-32.759 12.496-45.255 0l-128-128c-12.497-12.499-12.497-32.758 0-45.258l128-128c12.497-12.496 32.758-12.496 45.255 0zM702.707 361.37c12.496-12.496 32.758-12.496 45.254 0l128 128c12.496 12.499 12.496 32.758 0 45.258l-128 128c-12.496 12.496-32.758 12.496-45.254 0-12.496-12.499-12.496-32.758 0-45.258l105.373-105.373-105.373-105.37c-12.496-12.499-12.496-32.758 0-45.258z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124319081245699212911624514522416519902101":[{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["code"],"defaultCode":59714,"grid":0},"attrs":[{}],"properties":{"order":985,"name":"code","prevSize":32,"id":73,"code":59714},"setIdx":0,"setId":6,"iconIdx":73},{"icon":{"paths":["M507.488 130.134c16.496 6.344 24.723 24.859 18.378 41.354l-160 416c-6.342 16.496-24.858 24.723-41.354 18.381-16.494-6.346-24.723-24.861-18.379-41.357l160.002-415.998c6.342-16.495 24.858-24.724 41.354-18.38z","M278.628 249.373c12.497 12.497 12.497 32.758 0 45.255l-73.373 73.372 73.373 73.373c12.497 12.496 12.497 32.758 0 45.254-12.497 12.499-32.758 12.499-45.255 0l-96-96c-6.001-6-9.372-14.141-9.372-22.627s3.372-16.624 9.372-22.627l96-95.999c12.497-12.497 32.758-12.497 45.255 0z","M553.373 249.373c12.496-12.497 32.758-12.497 45.254 0l96 95.999c6 6.003 9.373 14.141 9.373 22.627s-3.373 16.627-9.373 22.627l-96 96c-12.496 12.499-32.758 12.499-45.254 0-12.496-12.496-12.496-32.758 0-45.254l73.373-73.373-73.373-73.372c-12.496-12.497-12.496-32.758 0-45.255z","M672 160c0-17.673 14.326-32 32-32h96c53.021 0 96 42.981 96 96v576c0 53.021-42.979 96-96 96h-576c-53.020 0-96-42.979-96-96v-160c0-17.674 14.327-32 32-32s32 14.326 32 32v192h640v-640h-128c-17.674 0-32-14.327-32-32z"],"attrs":[{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124319081245699212911624514522416519902101":[{},{},{},{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{},{},{},{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{},{},{},{}]},"tags":["code-block"],"defaultCode":59840,"grid":0},"attrs":[{},{},{},{}],"properties":{"order":986,"id":74,"name":"code-block","prevSize":32,"code":59840},"setIdx":0,"setId":6,"iconIdx":74},{"icon":{"paths":["M770.704 224c17.674 0 32 14.327 32 32v544c0 17.674-14.326 32-32 32h-543.999c-17.673 0-32-14.326-32-32v-128c17.673 0 32-14.326 32-32s-14.327-32-32-32v-192c17.673 0 32-14.326 32-32s-14.327-32-32-32v-96c0-17.673 14.327-32 32-32h543.999zM130.705 608c-17.673 0-32 14.326-32 32s14.327 32 32 32v128c0 53.021 42.981 96 96 96h543.999c53.021 0 96-42.979 96-96v-544c0-53.019-42.979-96-96-96h-543.999c-53.019 0-96 42.981-96 96v96c-17.673 0-32 14.326-32 32s14.327 32 32 32v192zM427.91 514.266c13.315-3.568 27.309-3.789 40.73-0.643l31.52 7.389c8.73 2.045 17.83 1.904 26.49-0.416l22.186-5.942c14.285-3.827 29.328-4.042 43.683-0.675 40.429 9.475 69.325 45.584 69.325 87.277v24.336c0 31.811-25.789 57.6-57.6 57.6h-180.739c-31.811 0-57.6-25.789-57.6-57.6v-30.525c0-37.862 25.434-71.005 62.006-80.8zM456.957 563.472c-5.206-1.219-10.634-1.133-15.798 0.25-14.189 3.798-24.054 16.656-24.054 31.344v30.525c0 3.536 2.867 6.4 6.4 6.4h180.739c3.533 0 6.4-2.864 6.4-6.4v-24.336c0-17.75-12.365-33.341-29.808-37.427-6.186-1.45-12.662-1.35-18.752 0.282l-22.186 5.942c-16.813 4.502-34.474 4.781-51.421 0.81l-31.52-7.389zM539.155 420.48c0-13.962-11.318-25.28-25.28-25.28s-25.283 11.318-25.283 25.28c0 13.962 11.322 25.28 25.283 25.28s25.28-11.318 25.28-25.28zM590.355 420.48c0 42.24-34.243 76.48-76.48 76.48-42.24 0-76.483-34.24-76.483-76.48s34.243-76.48 76.483-76.48c42.237 0 76.48 34.24 76.48 76.48z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["contacts"],"defaultCode":59715,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":987,"name":"contacts","prevSize":32,"id":75,"code":59715},"setIdx":0,"setId":6,"iconIdx":75},{"icon":{"paths":["M464 272c-35.347 0-64 28.654-64 64v480c0 35.347 28.653 64 64 64h352c35.347 0 64-28.653 64-64v-304c0-6.509-1.984-12.864-5.69-18.214l-134.458-194.215c-11.952-17.267-31.619-27.571-52.621-27.571h-223.232zM464 336h144v144c0 35.347 28.653 64 64 64h144v272h-352v-480zM672 480v-144h15.232l99.693 144h-114.925zM144 208c0-35.346 28.654-64 64-64h241.844c18.032 0 35.229 7.607 47.357 20.949l39.136 43.051h-328.336v480h128v64h-128c-35.346 0-64-28.653-64-64v-480z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["copy"],"defaultCode":59716,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":988,"name":"copy","prevSize":32,"id":76,"code":59716},"setIdx":0,"setId":6,"iconIdx":76},{"icon":{"paths":["M824.682 183.521c-37.19-37.986-98.202-38.583-136.131-1.333l-348.48 342.237c-12.739 12.512-21.733 28.32-25.976 45.654l-23.681 96.749c-6.94 28.355 16.754 54.845 45.747 51.142l90.691-11.578c20.224-2.582 39.104-11.52 53.907-25.52l360.486-340.922c38.986-36.868 40.173-98.482 2.637-136.82l-19.2-19.61zM733.485 227.821c12.643-12.417 32.979-12.218 45.376 0.444l19.2 19.61c12.512 12.78 12.115 33.317-0.88 45.607l-69.965 66.169-63.446-63.364 69.715-68.466zM618.074 341.162l62.592 62.512-243.971 230.73c-4.934 4.666-11.229 7.645-17.968 8.506l-58.307 7.443 15.926-65.075c1.414-5.779 4.413-11.046 8.659-15.219l233.069-228.896zM193.608 265.602c0-17.673 14.346-32 32.042-32h281.332c17.696 0 32.042-14.327 32.042-32s-14.346-32-32.042-32h-281.332c-53.089 0-96.127 42.981-96.127 96v534.402c0 53.018 43.037 95.997 96.127 95.997h529.764c53.091 0 96.128-42.979 96.128-96v-279.414c0-17.67-14.346-32-32.042-32s-32.042 14.33-32.042 32v279.414c0 17.674-14.346 32-32.045 32h-529.764c-17.696 0-32.042-14.326-32.042-31.997v-534.402z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["create"],"defaultCode":59717,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":989,"name":"create","prevSize":32,"id":77,"code":59717},"setIdx":0,"setId":6,"iconIdx":77},{"icon":{"paths":["M717.373 298.663c0-17.673-14.326-32-32-32s-32 14.327-32 32v426.665c0 17.674 14.326 32 32 32s32-14.326 32-32v-426.665z","M514.704 394.672c17.674 0 32 14.326 32 32v298.666c0 17.674-14.326 32-32 32s-32-14.326-32-32v-298.666c0-17.674 14.326-32 32-32z","M376.038 554.672c0-17.674-14.326-32-32-32s-32 14.326-32 32v170.669c0 17.67 14.327 32 32 32s32-14.33 32-32v-170.669z","M130.705 199.556v624.889c0 39.52 32.036 71.555 71.556 71.555h624.888c39.52 0 71.555-32.035 71.555-71.555v-624.889c0-39.519-32.035-71.556-71.555-71.556h-624.888c-39.519 0-71.556 32.036-71.556 71.556zM202.26 192h624.888c4.173 0 7.555 3.383 7.555 7.556v624.889c0 4.173-3.382 7.555-7.555 7.555h-624.888c-4.173 0-7.556-3.382-7.556-7.555v-624.889c0-4.173 3.383-7.556 7.556-7.556z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["dashboard"],"defaultCode":59718,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":990,"name":"dashboard","prevSize":32,"id":78,"code":59718},"setIdx":0,"setId":6,"iconIdx":78},{"icon":{"paths":["M739.68 864v-448h-448.593v448h448.593zM227.003 864v-448c-35.393 0-64.084-28.653-64.084-64v-128c0-35.346 28.692-64 64.084-64h224.297c0-35.346 28.691-64 64.083-64 35.395 0 64.086 28.654 64.086 64h224.294c35.395 0 64.086 28.654 64.086 64v128c0 35.347-28.691 64-64.086 64v448c0 35.347-28.691 64-64.083 64h-448.593c-35.393 0-64.085-28.653-64.085-64zM803.763 224h-576.761v128h576.761v-128zM419.258 544v192c0 17.674 14.346 32 32.042 32s32.042-14.326 32.042-32v-192c0-17.674-14.346-32-32.042-32s-32.042 14.326-32.042 32zM579.469 512c17.696 0 32.042 14.326 32.042 32v192c0 17.674-14.346 32-32.042 32s-32.042-14.326-32.042-32v-192c0-17.674 14.346-32 32.042-32z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["delete"],"defaultCode":59719,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":991,"name":"delete","prevSize":32,"id":79,"code":59719},"setIdx":0,"setId":6,"iconIdx":79},{"icon":{"paths":["M341.334 778.672c-17.674 0-32 14.326-32 32s14.327 32 32 32h341.334c17.67 0 32-14.326 32-32s-14.33-32-32-32h-341.334z","M85.334 298.672c0-70.692 57.308-128 128-128h597.335c70.691 0 128 57.308 128 128v298.666c0 70.694-57.309 128-128 128h-597.335c-70.692 0-128-57.306-128-128v-298.666zM213.334 234.672c-35.346 0-64 28.654-64 64v298.666c0 35.347 28.654 64 64 64h597.335c35.344 0 64-28.653 64-64v-298.666c0-35.347-28.656-64-64-64h-597.335z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["desktop"],"defaultCode":59720,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":992,"name":"desktop","prevSize":32,"id":80,"code":59720},"setIdx":0,"setId":6,"iconIdx":80},{"icon":{"paths":["M325.837 160c0-17.673-14.347-32-32.043-32h-64.085c-17.696 0-32.042 14.327-32.042 32v64c0 17.673 14.346 32 32.042 32h64.085c17.696 0 32.043-14.327 32.043-32v-64zM325.837 586.666c0-17.674-14.347-32-32.043-32h-64.085c-17.696 0-32.042 14.326-32.042 32v64c0 17.674 14.346 32 32.042 32h64.085c17.696 0 32.043-14.326 32.043-32v-64zM454.006 160c0-17.673 14.346-32 32.042-32h64.083c17.696 0 32.042 14.327 32.042 32v64c0 17.673-14.346 32-32.042 32h-64.083c-17.696 0-32.042-14.327-32.042-32v-64zM582.173 373.334c0-17.674-14.346-32-32.042-32h-64.083c-17.696 0-32.042 14.326-32.042 32v64c0 17.674 14.346 32 32.042 32h64.083c17.696 0 32.042-14.326 32.042-32v-64zM454.006 586.666c0-17.674 14.346-32 32.042-32h64.083c17.696 0 32.042 14.326 32.042 32v64c0 17.674-14.346 32-32.042 32h-64.083c-17.696 0-32.042-14.326-32.042-32v-64zM582.173 800c0-17.674-14.346-32-32.042-32h-64.083c-17.696 0-32.042 14.326-32.042 32v64c0 17.674 14.346 32 32.042 32h64.083c17.696 0 32.042-14.326 32.042-32v-64zM710.342 160c0-17.673 14.346-32 32.045-32h64.083c17.696 0 32.042 14.327 32.042 32v64c0 17.673-14.346 32-32.042 32h-64.083c-17.699 0-32.045-14.327-32.045-32v-64zM838.512 373.334c0-17.674-14.346-32-32.042-32h-64.083c-17.699 0-32.045 14.326-32.045 32v64c0 17.674 14.346 32 32.045 32h64.083c17.696 0 32.042-14.326 32.042-32v-64zM710.342 586.666c0-17.674 14.346-32 32.045-32h64.083c17.696 0 32.042 14.326 32.042 32v64c0 17.674-14.346 32-32.042 32h-64.083c-17.699 0-32.045-14.326-32.045-32v-64zM325.837 373.334c0-17.674-14.347-32-32.043-32h-64.085c-17.696 0-32.042 14.326-32.042 32v64c0 17.674 14.346 32 32.042 32h64.085c17.696 0 32.043-14.326 32.043-32v-64z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["dialpad"],"defaultCode":59721,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":993,"name":"dialpad","prevSize":32,"id":81,"code":59721},"setIdx":0,"setId":6,"iconIdx":81},{"icon":{"paths":["M478.65 672c-17.674 0-32-14.326-32-32v-32h-32c-17.674 0-32-14.326-32-32s14.326-32 32-32h32v-58.88h-32c-17.674 0-32-14.326-32-32s14.326-32 32-32h32v-37.12c0-17.674 14.326-32 32-32 17.67 0 32 14.326 32 32v37.12h58.88v-37.12c0-17.674 14.326-32 32-32s32 14.326 32 32v37.12h37.12c17.67 0 32 14.326 32 32s-14.33 32-32 32h-37.12v58.88h37.12c17.67 0 32 14.326 32 32s-14.33 32-32 32h-37.12v32c0 17.674-14.326 32-32 32s-32-14.326-32-32v-32h-58.88v32c0 17.674-14.33 32-32 32zM510.65 544h58.88v-58.88h-58.88v58.88z","M158.648 672h-32c-17.673 0-32-14.326-32-32s14.327-32 32-32h32v-192h-32c-17.673 0-32-14.326-32-32s14.327-32 32-32h32v-160c0-35.346 28.654-64 64-64h608.001c35.344 0 64 28.654 64 64v640c0 35.347-28.656 64-64 64h-608.001c-35.346 0-64-28.653-64-64v-160zM830.65 192h-608.001v160h32c17.673 0 32 14.326 32 32s-14.327 32-32 32h-32v192h32c17.673 0 32 14.326 32 32s-14.327 32-32 32h-32v160h608.001v-640z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["directory"],"defaultCode":59648,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":994,"id":82,"name":"directory","prevSize":32,"code":59648},"setIdx":0,"setId":6,"iconIdx":82},{"icon":{"paths":["M833.35 128c10.285 0 20 2.425 28.611 6.735-11.834 4.684-22.922 11.812-32.493 21.383l-35.882 35.882h-568.236v160h32c17.673 0 32 14.326 32 32s-14.327 32-32 32h-32v192h32c17.673 0 32 14.326 32 32s-14.327 32-32 32h-32v88.237l-64 64v-152.237h-32c-17.673 0-32-14.326-32-32s14.327-32 32-32h32v-192h-32c-17.673 0-32-14.326-32-32s14.327-32 32-32h32v-160c0-35.346 28.654-64 64-64h607.999z","M361.117 896l64-64h408.234v-408.237l64-64v472.237c0 35.347-28.653 64-64 64h-472.234z","M604.23 352c8.166 0 15.616 3.056 21.267 8.090l-53.267 53.267v-29.357c0-17.674 14.33-32 32-32z","M513.35 421.12h51.117l-115.117 115.117v-51.117h-32c-17.67 0-32-14.326-32-32s14.33-32 32-32h32v-37.12c0-17.674 14.33-32 32-32 17.674 0 32 14.326 32 32v37.12z","M391.174 594.413l50.413-50.413h-24.237c-17.67 0-32 14.326-32 32 0 6.854 2.157 13.203 5.824 18.413z","M919.978 201.372c-12.496-12.497-32.755-12.497-45.254 0l-671.999 672c-12.497 12.496-12.497 32.758 0 45.254s32.758 12.496 45.255 0l671.999-672c12.499-12.497 12.499-32.758 0-45.255z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["directory-disabled"],"defaultCode":59649,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":995,"id":83,"name":"directory-disabled","prevSize":32,"code":59649},"setIdx":0,"setId":6,"iconIdx":83},{"icon":{"paths":["M919.978 105.372c12.499 12.497 12.499 32.758 0 45.255l-89.373 89.372 89.373 89.373c12.499 12.496 12.499 32.758 0 45.254-12.496 12.496-32.755 12.496-45.254 0l-89.373-89.372-89.373 89.372c-12.496 12.496-32.755 12.496-45.254 0-12.496-12.496-12.496-32.758 0-45.254l89.373-89.373-89.373-89.372c-12.496-12.497-12.496-32.758 0-45.255 12.499-12.497 32.758-12.497 45.254 0l89.373 89.373 89.373-89.373c12.499-12.497 32.758-12.497 45.254 0z","M512.419 126.678c1.491 17.61-11.578 33.094-29.187 34.585-180.289 15.259-321.88 166.478-321.88 350.731 0 194.406 157.596 352 351.999 352 194.406 0 352-157.594 352-352 0-17.674 14.33-32 32-32 17.674 0 32 14.326 32 32 0 229.75-186.25 416-416 416s-415.999-186.25-415.999-416c0-217.79 167.341-396.462 380.482-414.503 17.61-1.491 33.094 11.577 34.586 29.187z","M119.219 432.47c0-17.674 14.327-32 32-32h329.037c17.67 0 32 14.326 32 32 0 17.67-14.33 32-32 32h-329.037c-17.673 0-32-14.33-32-32z","M119.233 640c0-17.674 14.327-32 32-32h724.255c17.674 0 32 14.326 32 32s-14.326 32-32 32h-724.255c-17.673 0-32-14.326-32-32z","M504.81 121.090c11.117 13.739 8.992 33.888-4.749 45.005-8.666 7.012-18.886 20.139-29.238 40.961-10.179 20.471-19.61 46.603-27.635 77.587-16.042 61.955-25.837 140.879-25.837 227.356 0 103.555 14.038 195.981 35.85 261.411 10.96 32.88 23.306 57.181 35.462 72.605 12.438 15.786 21.024 17.978 24.688 17.978 3.667 0 12.253-2.192 24.691-17.978 12.157-15.424 24.502-39.725 35.462-72.605 21.808-65.43 35.846-157.856 35.846-261.411 0-17.674 14.33-32 32-32 17.674 0 32 14.326 32 32 0 108.522-14.614 208.096-39.133 281.648-12.202 36.608-27.437 68.544-45.91 91.984-18.186 23.078-43.274 42.362-74.957 42.362-31.68 0-56.768-19.283-74.957-42.362-18.47-23.44-33.706-55.376-45.91-91.984-24.515-73.552-39.133-173.126-39.133-281.648 0-90.915 10.256-175.338 27.882-243.4 8.81-34.025 19.619-64.572 32.282-90.038 12.49-25.115 27.712-47.185 46.288-62.217 13.741-11.117 33.888-8.992 45.008 4.746z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["directory-error"],"defaultCode":59650,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":996,"id":84,"name":"directory-error","prevSize":32,"code":59650},"setIdx":0,"setId":6,"iconIdx":84},{"icon":{"paths":["M561.667 127.992c-121.696 0-200.973 50.509-248.813 115.801-46.216 63.073-61.638 137.752-61.933 188.616-8.705 98.746 28.601 172.896 89.422 223.469 59.686 49.626 140.202 75.258 217.85 83.738 77.75 8.486 161.715 1.197 227.856-12.547 33.066-6.87 62.774-15.581 85.642-25.331 11.366-4.848 22.029-10.368 30.797-16.669 7.875-5.661 18.541-14.976 23.242-28.835 7.286-21.475-3.133-38.784-11.965-48.102-8.41-8.877-19.427-15.405-28.24-20.016-9.306-4.867-19.379-9.206-27.533-12.707-8.973-3.856-14.858-6.4-18.56-8.432-4.845-2.662-8.842-5.088-12.026-7.203 20.256-47.142 31.549-77.043 37.696-99.19 7.293-26.272 7.315-41.725 7.315-58.909 0-21.523-9.603-88.542-52.81-151.108-44.701-64.73-124.074-122.573-257.939-122.573zM314.916 433.898c0-40.416 12.607-101.84 49.564-152.277 35.782-48.836 95.882-89.628 197.187-89.628 112.086 0 172.090 46.886 205.277 94.94 34.678 50.219 41.472 104.040 41.472 114.741v0.198c0 14.918 0 23.638-4.982 41.594-5.491 19.779-16.963 50.189-41.539 106.538-5.802 13.296-2.762 25.77 1.155 33.754 3.664 7.478 9.005 13.242 13.331 17.261 8.835 8.211 20.653 15.686 32.224 22.045 6.618 3.638 15.238 7.334 22.563 10.477l1.562 0.672c5.904 2.534 11.52 4.97 16.688 7.418-0.909 0.406-1.856 0.819-2.835 1.238-17.741 7.568-43.078 15.206-73.555 21.539-60.947 12.666-138.064 19.21-207.888 11.587-69.926-7.635-136.982-30.336-183.878-69.328-45.459-37.798-73.674-92.064-66.481-169.821l0.136-1.469v-1.478zM819.162 553.354l-0.074-0.086c0 0.003 0.010 0.013 0.029 0.035 0.010 0.013 0.026 0.029 0.045 0.051z","M178.552 502.474c7.496-11.258 16.26-22.259 26.436-32.592 0.876 31.747 6.169 61.226 15.216 88.358-15.094 30.877-18.374 59.315-18.374 65.357v0.186c0 11.382 0 17.536 3.524 30.701 3.993 14.918 12.441 38.211 30.867 82.022 5.256 12.496 2.48 24.099-0.985 31.43-3.249 6.874-7.925 12.058-11.512 15.514-7.319 7.053-16.852 13.254-25.75 18.326-5.008 2.854-11.333 5.706-16.546 8.029 11.182 3.939 24.98 7.814 40.802 11.226 44.977 9.693 101.833 14.669 153.062 8.87 51.28-5.808 99.776-23.014 133.35-51.965l0.608-0.528c14.794 2.784 29.53 4.938 44.051 6.525 10.886 1.187 21.862 2.086 32.877 2.72-10.122 14.797-22.163 28.045-35.741 39.754-46.362 39.974-108.547 60.362-167.946 67.088-59.45 6.73-123.405 0.947-173.744-9.901-25.17-5.424-48.056-12.352-65.901-20.243-8.86-3.92-17.458-8.502-24.686-13.891-6.431-4.794-15.831-13.171-20.001-25.92-6.422-19.632 2.792-35.443 10.458-43.834 7.193-7.872 16.405-13.462 23.248-17.174 7.309-3.965 15.158-7.466 21.235-10.173 6.907-3.078 10.854-4.858 13.183-6.186 1.349-0.768 2.591-1.501 3.727-2.195-13.937-33.885-21.976-56.118-26.48-72.947-5.68-21.222-5.7-33.875-5.7-47.434 0-17.712 7.436-71.139 40.721-121.123zM155.337 797.248c-0.012 0 0.084 0.102 0.317 0.301-0.19-0.202-0.306-0.301-0.317-0.301zM179.587 737.085c-0.004 0-0.052 0.051-0.137 0.15l0.112-0.118c0.019-0.022 0.027-0.032 0.025-0.032z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["discussions"],"defaultCode":59722,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":997,"name":"discussions","prevSize":32,"id":85,"code":59722},"setIdx":0,"setId":6,"iconIdx":85},{"icon":{"paths":["M160 256c0-17.673 14.327-32 32-32h640c17.674 0 32 14.327 32 32s-14.326 32-32 32h-640c-17.673 0-32-14.327-32-32zM160 421.162c0-17.674 14.327-32 32-32h640c17.674 0 32 14.326 32 32s-14.326 32-32 32h-640c-17.673 0-32-14.326-32-32zM160 602.838c0-17.674 14.327-32 32-32h640c17.674 0 32 14.326 32 32s-14.326 32-32 32h-640c-17.673 0-32-14.326-32-32zM160 768c0-17.674 14.327-32 32-32h344.614c17.674 0 32 14.326 32 32s-14.326 32-32 32h-344.614c-17.673 0-32-14.326-32-32z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["document"],"defaultCode":59723,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":998,"name":"document","prevSize":32,"id":86,"code":59723},"setIdx":0,"setId":6,"iconIdx":86},{"icon":{"paths":["M128.169 352c0-17.674 14.346-32 32.042-32h704.928c17.696 0 32.045 14.326 32.045 32s-14.349 32-32.045 32h-704.928c-17.696 0-32.042-14.326-32.042-32zM213.615 522.669c0-17.674 14.346-32 32.042-32h534.036c17.699 0 32.045 14.326 32.045 32s-14.346 32-32.045 32h-534.036c-17.697 0-32.042-14.326-32.042-32zM331.104 661.331c-17.698 0-32.043 14.326-32.043 32s14.346 32 32.043 32h363.146c17.696 0 32.042-14.326 32.042-32s-14.346-32-32.042-32h-363.146z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["donner"],"defaultCode":59724,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":999,"name":"donner","prevSize":32,"id":87,"code":59724},"setIdx":0,"setId":6,"iconIdx":87},{"icon":{"paths":["M273.128 356.678c-6.62 27.766-2.384 63.757 25.498 105.581l21.374 32.061v17.69h-48c-44.011 0-70.483 14.874-86.278 33.619-16.496 19.578-24.573 47.264-23.734 77.491 0.841 30.262 10.601 59.968 25.818 81.312 15.127 21.216 33.404 31.578 52.195 31.578h79.999v64h-80c-45.209 0-80.932-25.642-104.306-58.426-23.283-32.656-36.522-74.95-37.682-116.688-1.16-41.773 9.763-86.083 38.766-120.506 20.726-24.598 49.155-42.32 84.825-50.784-16.1-39.011-19.009-77.050-10.731-111.77 11.253-47.2 42.304-84.492 80.791-107.342 38.4-22.798 85.677-32.139 131.303-21.965 35.584 7.935 68.909 27.48 95.251 59.554 53.75-35.147 127.584-30.892 182.483-2.495 34.438 17.812 64.794 46.382 81.437 85.010 12.294 28.531 16.438 61.011 10.608 96.205 46.112 6.682 81.507 25.155 105.613 53.456 30.349 35.626 38.106 81.35 33.446 123.283-4.659 41.917-21.946 83.485-46.544 115.114-24.061 30.934-59.354 57.354-101.261 57.354h-80v-64h80c14.093 0 32.8-9.581 50.742-32.646 17.398-22.371 30.112-52.806 33.453-82.89 3.341-30.067-2.902-56.339-18.554-74.714-15.222-17.869-44.035-33.75-97.642-33.75h-45.686l15.613-42.938c13.546-37.251 11.091-66.742 1.437-89.149-9.856-22.87-28.502-41.302-52.064-53.488-49.587-25.649-107.475-18.625-134.717 14.064l-30.134 36.16-22.541-41.325c-19.757-36.219-47.232-54.175-74.87-60.339-28.378-6.327-59.098-0.669-84.701 14.53-25.512 15.148-44.461 38.855-51.208 67.152zM630.979 787.222c12.298-12.691 11.981-32.95-0.707-45.251-12.691-12.298-32.95-11.981-45.251 0.707l-41.021 42.326v-273.005c0-17.674-14.326-32-32-32s-32 14.326-32 32v273.005l-41.021-42.326c-12.301-12.688-32.56-13.005-45.251-0.707-12.688 12.301-13.005 32.56-0.707 45.251l96 99.050c6.029 6.218 14.32 9.728 22.979 9.728s16.95-3.51 22.979-9.728l96-99.050z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["download"],"defaultCode":59725,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1000,"name":"download","prevSize":32,"id":88,"code":59725},"setIdx":0,"setId":6,"iconIdx":88},{"icon":{"paths":["M795.648 132.004c-25.027-25.027-65.603-25.027-90.63-0l-530.467 530.469c-9.577 9.574-15.873 21.939-17.985 35.318l-19.611 124.186c-1.386 8.771-0.942 17.299 1.006 25.261 7.597 31.037 38.083 53.44 72.291 48.038l124.184-19.613c13.379-2.112 25.744-8.41 35.322-17.984l530.467-530.47c12.512-12.513 18.768-28.914 18.768-45.316 0-10.379-2.506-20.757-7.517-30.15-2.906-5.451-6.656-10.57-11.251-15.164l-104.576-104.575zM630.675 296.979l119.658-119.658 104.576 104.574-119.658 119.657-104.576-104.573zM200.255 831.974l19.611-124.186 365.494-365.494 104.576 104.573-365.494 365.494-124.187 19.613z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["edit"],"defaultCode":59726,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1001,"name":"edit","prevSize":32,"id":89,"code":59726},"setIdx":0,"setId":6,"iconIdx":89},{"icon":{"paths":["M330.074 644.886c-21.572-19.619-6.010-52.886 23.152-52.886 8.963 0 17.526 3.53 24.272 9.437 21.603 18.918 42.64 31.958 62.701 40.509 36.563 15.59 71.805 17.107 104.794 9.939 37.632-8.176 72.659-27.808 102.109-51.341 6.726-5.376 14.995-8.544 23.606-8.544 30.218 0 45.616 34.256 22.397 53.594-36.912 30.742-82.79 57.59-134.522 68.832-44.794 9.734-93.67 7.632-143.485-13.606-28.79-12.275-57.232-30.653-85.024-55.933z","M400.17 480c35.344 0 64-28.653 64-64s-28.656-64-64-64c-35.347 0-64 28.653-64 64s28.653 64 64 64z","M624.17 480c35.344 0 64-28.653 64-64s-28.656-64-64-64c-35.347 0-64 28.653-64 64s28.653 64 64 64z","M928 512c0 229.75-186.25 416-416 416s-416-186.25-416-416c0-229.75 186.25-416 416-416s416 186.25 416 416zM864 512c0-194.404-157.597-352-352-352s-352 157.596-352 352c0 194.403 157.596 352 352 352s352-157.597 352-352z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["emoji"],"defaultCode":59729,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1002,"name":"emoji","prevSize":32,"id":90,"code":59729},"setIdx":0,"setId":6,"iconIdx":90},{"icon":{"paths":["M864 512c0-194.404-157.597-352-352-352s-352 157.596-352 352c0 194.403 157.596 352 352 352s352-157.597 352-352zM928 512c0 229.75-186.25 416-416 416s-416-186.25-416-416c0-229.75 186.25-416 416-416s416 186.25 416 416zM400.166 480c-35.347 0-64-28.653-64-64s28.653-64 64-64c35.347 0 64 28.653 64 64s-28.653 64-64 64zM688.166 416c0-35.347-28.653-64-64-64s-64 28.653-64 64c0 35.347 28.653 64 64 64s64-28.653 64-64zM353.226 720c8.963 0 17.526-3.53 24.272-9.437 21.603-18.918 42.64-31.958 62.701-40.509 36.563-15.59 71.805-17.107 104.794-9.939 37.632 8.176 72.659 27.808 102.109 51.341 6.726 5.376 14.995 8.544 23.606 8.544 30.218 0 45.616-34.256 22.397-53.594-36.912-30.742-82.79-57.59-134.522-68.832-44.794-9.734-93.67-7.632-143.485 13.606-28.79 12.275-57.232 30.653-85.024 55.933-21.572 19.619-6.010 52.886 23.152 52.886z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["emoji-bad-mood"],"defaultCode":59727,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1003,"name":"emoji-bad-mood","prevSize":32,"id":91,"code":59727},"setIdx":0,"setId":6,"iconIdx":91},{"icon":{"paths":["M864 512c0-194.404-157.597-352-352-352s-352 157.596-352 352c0 194.403 157.596 352 352 352s352-157.597 352-352zM928 512c0 229.75-186.25 416-416 416s-416-186.25-416-416c0-229.75 186.25-416 416-416s416 186.25 416 416zM400.166 480c-35.347 0-64-28.653-64-64s28.653-64 64-64c35.347 0 64 28.653 64 64s-28.653 64-64 64zM688.166 416c0-35.347-28.653-64-64-64s-64 28.653-64 64c0 35.347 28.653 64 64 64s64-28.653 64-64zM384 640h256c17.674 0 32 14.326 32 32s-14.326 32-32 32h-256c-17.674 0-32-14.326-32-32s14.326-32 32-32z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["emoji-neutral-mood"],"defaultCode":59728,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1004,"name":"emoji-neutral-mood","prevSize":32,"id":92,"code":59728},"setIdx":0,"setId":6,"iconIdx":92},{"icon":{"paths":["M655.744 512c88.365 0 160-71.635 160-160s-71.635-160-160-160c-88.368 0-160 71.635-160 160 0 26.934 6.653 52.314 18.41 74.582l-11.914 11.914 0.128 0.131-299.135 299.136c-3.533 9.926-6.41 20.976-7.738 31.606-1.652 13.219-0.563 22.966 1.874 28.938 1.768 4.333 4.22 7.232 10.772 9.014 8.316 2.262 24.518 2.794 52.822-5.501 8.524-3.808 27.721-16.285 45.132-35.382 18.18-19.939 29.648-41.856 29.648-62.438 0-15.642 11.309-28.992 26.736-31.565l91.75-15.293c3.766-2.656 18.768-15.693 10.134-58.867-2.099-10.49 1.184-21.338 8.749-28.902l88.198-88.195c26.467 19.379 59.114 30.822 94.432 30.822zM439.571 410.915c-5.104-18.771-7.827-38.525-7.827-58.915 0-123.712 100.288-224 224-224 123.709 0 224 100.288 224 224s-100.291 224-224 224c-29.29 0-57.264-5.619-82.906-15.843l-43.008 43.008c7.158 65.494-23.99 104.534-55.968 115.194l-2.384 0.794-74.854 12.477c-7.085 31.405-25.174 58.122-43.235 77.933-23.123 25.357-50.958 44.627-69.762 52.15l-1.324 0.528-1.365 0.41c-34.714 10.416-64.73 13.19-89.594 6.429-26.782-7.286-44.33-24.784-53.228-46.586-8.23-20.163-8.473-42.282-6.126-61.062 2.402-19.216 7.899-37.958 14.042-53.315 1.61-4.022 4.020-7.677 7.084-10.742l286.456-286.458zM623.744 336c0 26.509 21.488 48 48 48 26.509 0 48-21.491 48-48s-21.491-48-48-48c-26.512 0-48 21.49-48 48z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["encrypted"],"defaultCode":59730,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1005,"name":"encrypted","prevSize":32,"id":93,"code":59730},"setIdx":0,"setId":6,"iconIdx":93},{"icon":{"paths":["M536.89 64c233.677 0 423.11 189.433 423.11 423.11h-423.11v-423.11z","M64 536.89c0-233.678 189.433-423.112 423.11-423.112v423.112h423.11c0 233.677-189.43 423.11-423.11 423.11-233.677 0-423.11-189.434-423.11-423.11z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["engagement-dashboard"],"defaultCode":59731,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1006,"name":"engagement-dashboard","prevSize":32,"id":94,"code":59731},"setIdx":0,"setId":6,"iconIdx":94},{"icon":{"paths":["M416 586.445v177.232l75.514-62.928c11.869-9.888 29.104-9.888 40.973 0l75.514 62.928v-177.232c-29.098 13.821-61.645 21.555-96 21.555s-66.902-7.734-96-21.555zM352 540.768v291.232c0 12.416 7.184 23.712 18.426 28.979 11.245 5.267 24.522 3.552 34.061-4.397l107.514-89.594 107.514 89.594c9.539 7.949 22.816 9.664 34.061 4.397 11.242-5.267 18.426-16.563 18.426-28.979v-291.232c39.59-40.403 64-95.734 64-156.768 0-123.712-100.288-224.001-224-224.001s-224 100.288-224 224.001c0 61.034 24.41 116.365 64 156.768zM416 512.013l-0.016-0.013c-38.854-29.19-63.984-75.661-63.984-128 0-88.366 71.635-160.001 160-160.001s160 71.635 160 160.001c0 52.339-25.13 98.81-63.984 128l-0.016 0.013c-26.742 20.083-59.981 31.987-96 31.987s-69.258-11.904-96-31.987z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["enterprise-feature"],"defaultCode":59732,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1007,"name":"enterprise-feature","prevSize":32,"id":95,"code":59732},"setIdx":0,"setId":6,"iconIdx":95},{"icon":{"paths":["M500.64 128c213.35 0 386.336 172.985 386.336 386.336 0 192.87-141.254 352.707-325.974 381.664v-269.958h90.022l17.114-111.706h-107.136v-72.47c0-11.462 2.102-22.822 7.274-32.544 2.474-4.656 5.651-8.934 9.635-12.666 9.866-9.245 24.688-15.152 46.058-15.152h48.733v-95.080c0 0-44.224-7.552-86.493-7.552-84.698 0-141.258 49.313-145.651 138.907-0.182 3.738-0.275 7.546-0.275 11.424v85.133h-98.122v111.706h98.122v269.958c-184.721-29.011-325.978-188.848-325.978-381.664 0-213.351 172.985-386.336 386.336-386.336z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["facebook-monochromatic"],"defaultCode":59733,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1008,"name":"facebook-monochromatic","prevSize":32,"id":96,"code":59733},"setIdx":0,"setId":6,"iconIdx":96},{"icon":{"paths":["M865.139 512c0 33.28-4.624 65.485-13.267 96h-183.274c2.803-30.816 4.288-62.957 4.288-96 0-16.234-0.358-32.25-1.056-48h190.061c2.141 15.696 3.248 31.718 3.248 48zM607.68 464c0.739 15.67 1.123 31.686 1.123 48 0 33.398-1.61 65.555-4.57 96h-183.117c-2.963-30.445-4.57-62.602-4.57-96 0-16.314 0.384-32.33 1.123-48h190.010zM667.014 400c-10.016-93.226-32.221-173.252-61.875-227.763 113.702 30.788 204.579 116.981 241.782 227.763h-179.907zM420.211 172.237c-29.654 54.51-51.862 134.537-61.875 227.763h-179.91c37.204-110.782 128.083-196.975 241.785-227.763zM422.816 400c7.171-62.314 20.064-116.804 36.384-159.18 12.842-33.339 26.56-55.927 38.528-69.070 8.406-9.235 13.446-11.291 14.947-11.698 1.501 0.407 6.541 2.463 14.947 11.698 11.968 13.143 25.686 35.731 38.525 69.070 16.32 42.377 29.216 96.867 36.387 159.18h-179.718zM353.52 464c-0.698 15.75-1.056 31.766-1.056 48 0 33.043 1.482 65.184 4.288 96h-183.275c-8.643-30.515-13.268-62.72-13.268-96 0-16.282 1.107-32.304 3.249-48h190.061zM364.742 672c11.667 72.646 31.040 134.861 55.466 179.763-96.678-26.179-176.854-92.413-221.565-179.763h166.1zM513.152 928c229.834-0.259 416.070-186.41 416.070-416 0-229.75-186.493-416-416.547-416s-416.55 186.25-416.55 416c0 229.59 186.237 415.741 416.070 416 0.16 0 0.32 0 0.48 0s0.32 0 0.477 0zM605.142 851.763c24.426-44.902 43.798-107.117 55.466-179.763h166.099c-44.71 87.35-124.89 153.584-221.565 179.763zM595.638 672c-7.379 42.458-17.514 80.083-29.491 111.184-12.838 33.338-26.557 55.926-38.525 69.069-8.406 9.235-13.446 11.29-14.947 11.699-1.501-0.41-6.541-2.464-14.947-11.699-11.968-13.142-25.686-35.731-38.528-69.069-11.978-31.101-22.109-68.726-29.488-111.184h165.926z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["federation"],"defaultCode":59652,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1009,"id":97,"name":"federation","prevSize":32,"code":59652},"setIdx":0,"setId":6,"iconIdx":97},{"icon":{"paths":["M542.65 96c80.093 0 154.902 22.636 218.374 61.859l-46.746 46.746c-24.739-13.843-51.322-24.785-79.286-32.368 12.166 22.395 23.078 49.095 32.406 79.249l-52 51.999c-5.654-22.994-12.17-44.005-19.347-62.666-12.822-33.339-26.522-55.927-38.474-69.070-8.397-9.235-13.43-11.291-14.928-11.698-1.498 0.407-6.531 2.463-14.928 11.698-11.952 13.143-25.654 35.731-38.477 69.070-16.298 42.377-29.174 96.867-36.336 159.18h65.974l-64 64h-7.114c-0.118 2.47-0.224 4.95-0.323 7.437l-64.538 64.538c-0.173-7.933-0.259-15.926-0.259-23.974 0-16.234 0.358-32.25 1.053-48h-189.809c-2.14 15.696-3.245 31.718-3.245 48 0 33.28 4.619 65.485 13.251 96h106.984l-64 64h-17.852c2.004 3.92 4.078 7.798 6.223 11.629l-46.746 46.749c-39.223-63.475-61.859-138.282-61.859-218.378 0-229.75 186.25-416 416.001-416zM896.79 293.623l-46.746 46.748c10.56 18.87 19.43 38.816 26.413 59.629h-86.045l-64 64h164.992c2.138 15.696 3.245 31.718 3.245 48 0 33.28-4.621 65.485-13.251 96h-183.030c2.8-30.816 4.282-62.957 4.282-96 0-8.045-0.090-16.042-0.262-23.974l-64.534 64.534c-0.752 19.008-2.026 37.523-3.766 55.44h-51.674l-64 64h107.088c-7.37 42.458-17.488 80.083-29.45 111.184-12.822 33.338-26.522 55.926-38.474 69.069-8.397 9.235-13.43 11.29-14.928 11.699-1.498-0.41-6.531-2.464-14.928-11.699-11.952-13.142-25.654-35.731-38.477-69.069-7.178-18.662-13.69-39.677-19.344-62.669l-52 51.997c9.325 30.154 20.237 56.854 32.403 79.251-27.965-7.584-54.547-18.525-79.286-32.368l-46.746 46.746c63.347 39.146 137.984 61.77 217.901 61.859h0.954c229.53-0.259 415.523-186.41 415.523-416 0-80.096-22.637-154.902-61.859-218.377zM450.307 172.237c-113.552 30.788-204.312 116.98-241.467 227.763h179.675c10-93.226 32.176-173.252 61.792-227.763zM634.995 851.763c24.394-44.902 43.741-107.117 55.392-179.763h165.878c-44.653 87.35-124.723 153.584-221.27 179.763zM856.022 153.372c12.496-12.497 32.758-12.497 45.254 0s12.496 32.758 0 45.255l-672.001 672c-12.497 12.496-32.758 12.496-45.255 0s-12.497-32.758 0-45.254l672.001-672z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["federation-disabled"],"defaultCode":59651,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1010,"id":98,"name":"federation-disabled","prevSize":32,"code":59651},"setIdx":0,"setId":6,"iconIdx":98},{"icon":{"paths":["M373.334 448c0-17.674 14.326-32 32-32h213.331c17.674 0 32 14.326 32 32s-14.326 32-32 32h-213.331c-17.674 0-32-14.326-32-32z","M405.334 544c-17.674 0-32 14.326-32 32s14.326 32 32 32h213.331c17.674 0 32-14.326 32-32s-14.326-32-32-32h-213.331z","M256 128c-17.673 0-32 14.327-32 32v704c0 17.674 14.327 32 32 32h512c17.674 0 32-14.326 32-32v-501.744c0-6.672-2.083-13.174-5.962-18.602l-144.467-202.254c-6.006-8.409-15.706-13.4-26.038-13.4h-367.533zM736 372.509v459.491h-448v-640h319.066l128.934 180.509z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["file-document"],"defaultCode":59734,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1011,"name":"file-document","prevSize":32,"id":99,"code":59734},"setIdx":0,"setId":6,"iconIdx":99},{"icon":{"paths":["M128 192c-17.673 0-32 14.327-32 32v576.019c0 17.674 14.327 32 32 32h768c17.674 0 32-14.326 32-32v-576.019c0-17.673-14.326-32-32-32h-768zM160 378.301v-122.301h149.333v122.301h-149.333zM160 442.301h149.333v141.722h-149.333v-141.722zM160 648.022h149.333v119.997h-149.333v-119.997zM373.334 768.019v-119.997h490.666v119.997h-490.666zM864 584.022h-490.666v-141.722h490.666v141.722zM864 378.301h-490.666v-122.301h490.666v122.301z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["file-sheet"],"defaultCode":59735,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1012,"name":"file-sheet","prevSize":32,"id":100,"code":59735},"setIdx":0,"setId":6,"iconIdx":100},{"icon":{"paths":["M206.667 293.692c-30.421-42.402-0.116-101.442 52.070-101.442h518.572c51.174 0 81.706 57.026 53.334 99.615l-180.678 271.207v220.762c0 46.352-47.693 77.373-90.067 58.582l-121.424-53.85c-23.168-10.275-38.102-33.238-38.102-58.582v-166.304l-193.704-269.988zM777.309 256.334h-518.572l193.705 269.989c7.811 10.89 12.013 23.955 12.013 37.357v166.304l121.424 53.85v-220.762c0-12.646 3.741-25.008 10.752-35.533l180.678-271.205z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["filter"],"defaultCode":59736,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1013,"name":"filter","prevSize":32,"id":101,"code":59736},"setIdx":0,"setId":6,"iconIdx":101},{"icon":{"paths":["M623.091 896c-2.806 0-5.296-0.624-7.168-0.938-62-16.858-102.816-39.648-145.811-80.858-55.149-54.010-85.37-125.814-85.37-202.301 0-65.875 56.704-119.571 126.496-119.571s126.496 53.696 126.496 119.571c0 34.963 31.469 63.373 69.792 63.373s69.789-28.41 69.789-63.373c0-135.808-119.642-246.637-266.701-246.637-104.998 0-200.338 57.133-243.334 145.795-14.332 29.347-21.498 63.066-21.498 100.842 0 28.72 2.492 73.363 24.925 131.744 2.804 7.181 2.492 14.675-0.623 21.856-3.116 6.867-9.035 11.862-16.201 14.358-2.804 1.251-6.231 1.562-9.659 1.562-11.84 0-22.433-7.181-26.484-18.106-19.005-50.266-28.353-99.904-28.353-151.728 0-46.205 9.036-88.352 26.795-125.504 52.343-108.019 167.936-177.638 294.432-177.638 178.528 0 323.718 135.804 323.718 302.828 0 65.875-56.704 119.571-126.806 119.571s-126.81-53.696-126.81-119.571c0-34.963-31.469-63.373-69.792-63.373-38.634 0-69.789 28.41-69.789 63.373 0 61.504 24.301 119.261 68.544 162.342 35.206 34.029 68.858 53.072 120.576 67.123 7.168 1.872 13.398 6.557 17.136 13.11 3.741 6.557 4.675 14.362 2.806 21.229-2.806 11.866-14.022 20.918-27.107 20.918zM426.803 888.195c-7.789 0-15.267-3.123-20.253-8.742-33.338-32.781-51.718-54.010-77.891-100.525-26.795-47.142-41.127-105.21-41.127-167.338 0-116.448 100.948-211.357 224.951-211.357s224.954 94.909 224.954 211.357c0 15.61-12.464 28.096-28.352 28.096-15.891 0-28.666-12.173-28.666-28.096 0-85.542-75.398-155.162-168.246-155.162s-168.246 69.619-168.246 155.162c0 52.448 11.84 100.528 34.272 139.552 23.366 41.52 38.947 59.005 68.858 88.662 10.902 11.238 10.902 28.723 0 39.648-5.92 5.933-13.088 8.742-20.253 8.742zM699.738 818.886c-47.36 0-88.797-11.862-123.382-34.963-59.197-39.651-94.717-103.962-94.717-172.333 0-15.61 12.464-28.099 28.352-28.099 15.891 0 28.355 12.49 28.355 28.099 0 49.638 26.17 96.781 69.789 125.501 25.238 16.861 55.149 24.976 91.603 24.976 7.789 0 22.432-0.934 38.010-3.744 1.558-0.314 3.427-0.314 4.986-0.314 13.709 0 25.238 9.99 27.728 23.414 1.248 7.181-0.31 14.672-4.362 20.605-4.362 6.243-10.902 10.614-18.694 11.862-23.366 4.685-43.93 4.995-47.667 4.995zM188.765 435.824c-5.608 0-11.217-1.562-16.202-4.995-6.543-4.058-10.593-10.614-12.151-18.106-1.246-7.494 0.311-14.986 4.985-21.232 38.635-53.696 87.862-95.843 146.125-125.501 60.132-30.595 129.613-46.829 200.961-46.829 71.037 0 140.205 15.922 200.029 46.205 58.573 29.659 107.802 71.492 146.125 124.567 4.362 5.93 6.23 13.424 4.986 20.915-1.248 7.494-5.61 14.048-11.84 18.419-4.986 3.437-10.595 4.995-16.515 4.995-9.034 0-17.757-4.371-23.056-11.862-33.338-45.891-75.709-82.109-125.562-107.083-52.342-26.224-112.787-40.273-174.477-40.273-62.314 0-122.758 14.049-175.101 40.585-49.852 25.913-92.537 62.128-126.186 108.643-3.739 6.87-12.463 11.552-22.121 11.552zM733.696 239.141c-4.672 0-9.347-1.249-13.395-3.434-71.35-35.902-133.354-51.512-207.504-51.512-74.467 0-144.256 17.483-207.817 51.824-4.050 2.185-8.724 3.122-13.397 3.122-10.282 0-19.629-5.62-24.925-14.361-3.739-6.556-4.673-14.361-2.492-21.541s7.166-13.424 13.709-16.859c72.594-38.712 151.733-58.38 234.924-58.38 82.563 0 154.848 17.795 233.987 58.068 6.854 3.434 11.84 9.366 14.33 16.859 2.182 7.18 1.248 14.673-2.179 21.229-4.986 9.054-14.643 14.985-25.238 14.985z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["fingerprint"],"defaultCode":59737,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1014,"name":"fingerprint","prevSize":32,"id":102,"code":59737},"setIdx":0,"setId":6,"iconIdx":102},{"icon":{"paths":["M266.667 170.664c0-17.673 14.327-32 32-32h500.623c12.122 0 23.2 6.848 28.621 17.689s4.253 23.814-3.021 33.511l-122.134 162.843 122.134 162.845c7.274 9.696 8.442 22.672 3.021 33.51-5.421 10.842-16.499 17.69-28.621 17.69h-468.624v286.579c0 17.674-14.325 32-31.999 32s-32-14.326-32-32v-682.667zM330.666 502.752h404.624l-98.134-130.845c-8.531-11.376-8.531-27.021 0-38.4l98.134-130.843h-404.624v300.088z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["flag"],"defaultCode":59738,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1015,"name":"flag","prevSize":32,"id":103,"code":59738},"setIdx":0,"setId":6,"iconIdx":103},{"icon":{"paths":["M140.020 213.336c0-17.673 14.327-32 32-32h234.057c7.181 0 14.157 2.416 19.798 6.86l88.813 69.94h339.997c17.674 0 32 14.327 32 32v520.533c0 17.674-14.326 32-32 32h-682.665c-17.673 0-32-14.326-32-32v-597.333zM204.020 245.336v533.333h618.665v-456.534h-319.085c-7.181 0-14.154-2.415-19.798-6.858l-88.813-69.94h-190.969z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["folder"],"defaultCode":59739,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1016,"name":"folder","prevSize":32,"id":104,"code":59739},"setIdx":0,"setId":6,"iconIdx":104},{"icon":{"paths":["M370.704 544c0-17.674-14.326-32-32-32s-31.999 14.326-31.999 32v32h-32c-17.673 0-32 14.326-32 32s14.327 32 32 32h32v32c0 17.674 14.325 32 31.999 32s32-14.326 32-32v-32h32c17.674 0 32-14.326 32-32s-14.326-32-32-32h-32v-32z","M746.704 624c30.928 0 56-25.072 56-56s-25.072-56-56-56c-30.928 0-56 25.072-56 56s25.072 56 56 56z","M674.704 664c0 30.928-25.072 56-56 56s-56-25.072-56-56c0-30.928 25.072-56 56-56s56 25.072 56 56z","M706.704 128c0-17.673-14.326-32-32-32s-32 14.327-32 32v96h-128c-17.674 0-32 14.327-32 32v96h-191.999c-106.038 0-192 85.962-192 192v128c0 106.038 85.961 192 192 192h447.999c106.038 0 192-85.962 192-192v-128c0-106.038-85.962-192-192-192h-192v-64h128c17.674 0 32-14.327 32-32v-128zM866.704 544v128c0 70.691-57.306 128-128 128h-447.999c-70.692 0-128-57.309-128-128v-128c0-70.691 57.308-128 128-128h447.999c70.694 0 128 57.309 128 128z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["game"],"defaultCode":59753,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1017,"name":"game","prevSize":32,"id":105,"code":59753},"setIdx":0,"setId":6,"iconIdx":105},{"icon":{"paths":["M494.31 170.648l23.037 24.005 23.629-24.005 74.669 0.041v75.854h74.669v75.856h74.666v26.518h0.003v504.419h-522.678v-682.689h252.006zM540.976 246.503h-224.004v530.979h373.341v-379.229h-149.338v-151.75z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["giphy-monochromatic"],"defaultCode":59754,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1018,"name":"giphy-monochromatic","prevSize":32,"id":106,"code":59754},"setIdx":0,"setId":6,"iconIdx":106},{"icon":{"paths":["M862.454 324.045c-35.2-60.31-82.944-108.057-143.248-143.253-60.314-35.198-126.16-52.792-197.581-52.792-71.414 0-137.28 17.6-197.581 52.792-60.31 35.194-108.053 82.943-143.253 143.253-35.194 60.307-52.792 126.166-52.792 197.571 0 85.77 25.024 162.899 75.086 231.405 50.056 68.509 114.721 115.917 193.989 142.224 9.229 1.712 16.058 0.509 20.499-3.584 4.442-4.096 6.662-9.226 6.662-15.37 0-1.024-0.090-10.246-0.259-27.674-0.176-17.43-0.259-32.637-0.259-45.61l-11.789 2.038c-7.517 1.379-16.998 1.962-28.445 1.795-11.443-0.16-23.322-1.357-35.619-3.587-12.304-2.211-23.747-7.334-34.342-15.366-10.588-8.029-18.104-18.538-22.547-31.514l-5.125-11.795c-3.416-7.853-8.795-16.573-16.142-26.134-7.348-9.571-14.778-16.058-22.294-19.475l-3.588-2.57c-2.391-1.706-4.61-3.766-6.662-6.154-2.050-2.39-3.585-4.781-4.61-7.174-1.027-2.397-0.176-4.365 2.562-5.907 2.738-1.539 7.685-2.288 14.864-2.288l10.247 1.53c6.834 1.37 15.287 5.462 25.371 12.298 10.078 6.835 18.363 15.715 24.856 26.646 7.863 14.013 17.335 24.688 28.445 32.038 11.101 7.347 22.294 11.014 33.568 11.014s21.011-0.854 29.216-2.557c8.192-1.709 15.882-4.275 23.062-7.69 3.075-22.902 11.446-40.499 25.11-52.797-19.475-2.045-36.982-5.13-52.534-9.226-15.542-4.106-31.603-10.765-48.173-20-16.579-9.222-30.331-20.672-41.262-34.333-10.932-13.67-19.905-31.613-26.904-53.818-7.003-22.214-10.505-47.837-10.505-76.88 0-41.35 13.5-76.541 40.493-105.584-12.645-31.088-11.451-65.939 3.585-104.55 9.908-3.079 24.606-0.768 44.078 6.916 19.478 7.689 33.738 14.275 42.797 19.736 9.059 5.46 16.317 10.087 21.786 13.837 31.782-8.88 64.582-13.322 98.406-13.322s66.63 4.442 98.416 13.322l19.475-12.295c13.318-8.204 29.046-15.722 47.142-22.556 18.112-6.83 31.958-8.712 41.53-5.633 15.37 38.612 16.739 73.46 4.093 104.548 26.992 29.046 40.496 64.243 40.496 105.587 0 29.043-3.514 54.746-10.506 77.13-7.002 22.387-16.051 40.314-27.152 53.818-11.114 13.501-24.957 24.864-41.526 34.083-16.573 9.226-32.637 15.888-48.179 19.99-15.552 4.102-33.059 7.187-52.534 9.238 17.763 15.37 26.646 39.632 26.646 72.774v108.134c0 6.141 2.134 11.27 6.41 15.37 4.272 4.090 11.018 5.296 20.243 3.581 79.28-26.304 143.946-73.712 194-142.224 50.048-68.502 75.082-145.632 75.082-231.405-0.019-71.395-17.626-137.248-52.803-197.555z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["github-monochromatic"],"defaultCode":59655,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1019,"name":"github-monochromatic","prevSize":32,"id":107,"code":59655},"setIdx":0,"setId":6,"iconIdx":107},{"icon":{"paths":["M133.618 423.61h215.092l-92.537-284.607c-4.74-14.67-25.504-14.67-30.244 0l-92.311 284.607zM86.899 567.171l46.72-143.546h737.133l46.72 143.546c4.288 13.088-0.451 27.533-11.51 35.434l-403.776 293.408-403.776-293.408c-11.060-7.901-15.799-22.346-11.511-35.434zM655.661 423.61h215.091l-92.31-284.607c-4.739-14.67-25.504-14.67-30.243 0l-92.538 284.607z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["gitlab-monochromatic"],"defaultCode":59656,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1020,"name":"gitlab-monochromatic","prevSize":32,"id":108,"code":59656},"setIdx":0,"setId":6,"iconIdx":108},{"icon":{"paths":["M226.9 260.289c6.691-2.875 13.811-4.319 20.961-4.288 17.673 0.077 32.062-14.187 32.14-31.86s-14.187-32.062-31.86-32.14c-15.989-0.070-31.8 3.167-46.506 9.485-14.702 6.317-27.969 15.571-39.071 27.156-11.1 11.582-19.822 25.269-25.729 40.238-5.898 14.946-8.889 30.916-8.834 47.005l-0.001 15.941 0.001-11.899v255.848c-0 0.074-0.001 0.15-0.001 0.224v89.6c0 43.642 16.497 85.792 46.318 117.104 29.872 31.366 70.73 49.296 113.682 49.296 42.954 0 83.811-17.93 113.683-49.296 29.821-31.312 46.317-73.462 46.317-117.104v-57.6h128v57.6c0 43.642 16.496 85.792 46.317 117.104 29.872 31.366 70.73 49.296 113.683 49.296s83.811-17.93 113.683-49.296c29.821-31.312 46.317-73.462 46.317-117.104v-89.6c0-0.077 0-0.15 0-0.227v-259.883c0.054-16.090-2.938-32.062-8.835-47.010-5.907-14.969-14.627-28.656-25.728-40.238-11.104-11.585-24.368-20.839-39.072-27.156-14.704-6.318-30.515-9.555-46.506-9.485-17.674 0.077-31.936 14.467-31.859 32.14s14.467 31.937 32.141 31.86c7.149-0.031 14.269 1.413 20.96 4.288 6.694 2.876 12.867 7.147 18.128 12.636 5.264 5.492 9.501 12.090 12.403 19.448 2.906 7.36 4.4 15.292 4.368 23.326v228.302h-639.999l0-228.173-0-0.128c-0.032-8.034 1.462-15.965 4.366-23.326 2.904-7.358 7.141-13.957 12.404-19.448 5.26-5.489 11.434-9.759 18.129-12.636zM269.255 608l104.214 104.214c6.826-14.237 10.531-30.173 10.531-46.614v-57.6h-114.745zM717.254 608l104.214 104.214c6.826-14.237 10.531-30.173 10.531-46.614v-57.6h-114.746zM896 315.89v0zM128.001 319.928l0-3.973-0-0.069v4.043zM328.954 758.208l-136.954-136.954v44.346c0 27.648 10.475 53.869 28.663 72.966 18.137 19.043 42.394 29.434 67.337 29.434 14.208 0 28.194-3.37 40.954-9.792zM640 665.6v-44.346l136.954 136.954c-12.758 6.422-26.746 9.792-40.954 9.792-24.944 0-49.2-10.39-67.338-29.434-18.189-19.098-28.662-45.318-28.662-72.966z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["glasses"],"defaultCode":59812,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1021,"id":109,"name":"glasses","prevSize":32,"code":59812},"setIdx":0,"setId":6,"iconIdx":109},{"icon":{"paths":["M634.803 170.664h-256.112l-264.387 460.802 124.984 221.866h534.916l124.982-221.866-264.384-460.802zM367.814 631.466l138.931-239.789 138.934 239.789h-277.866z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["google-drive-monochromatic"],"defaultCode":59756,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1022,"name":"google-drive-monochromatic","prevSize":32,"id":110,"code":59756},"setIdx":0,"setId":6,"iconIdx":110},{"icon":{"paths":["M658.794 338.154c-39.798-38.052-90.416-57.426-146.794-57.426-100.016 0-184.669 67.548-214.865 158.313l-0.002-0.003c-7.679 23.040-12.042 47.648-12.042 72.957s4.364 49.92 12.044 72.96l0 0.003c30.196 90.765 114.849 158.314 214.865 158.314 51.664 0 95.651-13.613 130.035-36.653v-0.016c40.669-27.229 67.725-67.898 76.627-115.898h-206.662v-148.538h361.658c4.538 25.136 6.982 51.315 6.982 78.547 0 116.944-41.891 215.389-114.502 282.24v0.013c-63.533 58.646-150.458 93.030-254.138 93.030-150.109 0-279.971-86.048-343.156-211.549l-0-0.003c-26.007-51.84-40.844-110.49-40.844-172.451 0-61.965 14.836-120.611 40.844-172.451h0.004c63.187-125.495 193.047-211.542 343.153-211.542 103.504 0 190.429 38.051 256.931 100.014l-110.138 110.139z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["google-monochromatic"],"defaultCode":59657,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1023,"name":"google-monochromatic","prevSize":32,"id":111,"code":59657},"setIdx":0,"setId":6,"iconIdx":111},{"icon":{"paths":["M129.354 272c0-17.673 14.327-32 32-32h704c17.674 0 32 14.327 32 32s-14.326 32-32 32h-704c-17.673 0-32-14.327-32-32zM289.354 432c0 17.674-14.327 32-32 32s-32-14.326-32-32c0-17.674 14.327-32 32-32s32 14.326 32 32zM289.354 752c0 17.674-14.327 32-32 32s-32-14.326-32-32c0-17.674 14.327-32 32-32s32 14.326 32 32zM449.354 624c17.674 0 32-14.326 32-32s-14.326-32-32-32c-17.674 0-32 14.326-32 32s14.326 32 32 32zM385.354 400c-17.674 0-32 14.326-32 32s14.326 32 32 32h480c17.674 0 32-14.326 32-32s-14.326-32-32-32h-480zM353.354 752c0-17.674 14.326-32 32-32h480c17.674 0 32 14.326 32 32s-14.326 32-32 32h-480c-17.674 0-32-14.326-32-32zM577.354 560c-17.674 0-32 14.326-32 32s14.326 32 32 32h288c17.674 0 32-14.326 32-32s-14.326-32-32-32h-288z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["group-by-type"],"defaultCode":59757,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1024,"name":"group-by-type","prevSize":32,"id":112,"code":59757},"setIdx":0,"setId":6,"iconIdx":112},{"icon":{"paths":["M170.668 245.336c0-17.673 14.327-32 32-32h640.846c17.674 0 32 14.327 32 32s-14.326 32-32 32h-640.846c-17.673 0-32-14.327-32-32zM170.668 501.334c0-17.67 14.327-32 32-32h640.846c17.674 0 32 14.33 32 32 0 17.674-14.326 32-32 32h-640.846c-17.673 0-32-14.326-32-32zM170.668 757.334c0-17.67 14.327-32 32-32h640.846c17.674 0 32 14.33 32 32 0 17.674-14.326 32-32 32h-640.846c-17.673 0-32-14.326-32-32z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["hamburguer"],"defaultCode":59758,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1025,"name":"hamburguer","prevSize":32,"id":113,"code":59758},"setIdx":0,"setId":6,"iconIdx":113},{"icon":{"paths":["M832 512c0 176.73-143.27 320-320 320s-320-143.27-320-320h-64c0 212.077 171.923 384 384 384s384-171.923 384-384c0-212.077-171.923-384-384-384-123.718 0-233.772 58.508-304 149.364v-101.364c0-17.673-14.327-32-32-32s-32 14.327-32 32v192c0 17.674 14.327 32 32 32h176c17.674 0 32-14.326 32-32s-14.326-32-32-32h-107.295c57.24-86.756 155.583-144 267.295-144 176.73 0 320 143.27 320 320z","M544 320c0-17.673-14.326-32-32-32s-32 14.327-32 32v224c0 8.486 3.373 16.627 9.373 22.627l96 96c12.496 12.496 32.758 12.496 45.254 0s12.496-32.758 0-45.254l-86.627-86.627v-210.746z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["history"],"defaultCode":59759,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1026,"name":"history","prevSize":32,"id":114,"code":59759},"setIdx":0,"setId":6,"iconIdx":114},{"icon":{"paths":["M522.042 195.354l224.464 260.044v366.234c0 5.856-4.752 10.605-10.614 10.605h-136.416v-149.821c0-23.424-19.014-42.413-42.47-42.413h-85.955c-23.453 0-42.467 18.989-42.467 42.413v149.821h-136.41c-5.864 0-10.617-4.749-10.617-10.605v-366.307l224.403-259.971c4.237-4.907 11.85-4.907 16.083 0zM560.57 895.856h175.322c41.043 0 74.32-33.232 74.32-74.224v-244.205h56.227c12.454 0 23.766-7.251 28.954-18.557 5.19-11.309 3.302-24.602-4.829-34.022l-320.272-371.033c-29.648-34.347-82.934-34.347-112.582 0l-320.27 371.033c-8.132 9.421-10.020 22.714-4.831 34.022 5.188 11.306 16.501 18.557 28.956 18.557h56.288v244.205c0 40.992 33.274 74.224 74.32 74.224h175.316c1.174 0.096 2.362 0.147 3.562 0.147h85.955c1.2 0 2.39-0.051 3.565-0.147z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["home"],"defaultCode":59760,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1027,"name":"home","prevSize":32,"id":115,"code":59760},"setIdx":0,"setId":6,"iconIdx":115},{"icon":{"paths":["M864 512c0-86.89-31.482-166.429-83.664-227.826l-496.162 496.162c61.397 52.182 140.937 83.664 227.826 83.664 194.403 0 352-157.597 352-352zM239.349 734.65l495.3-495.3c-60.662-49.597-138.182-79.349-222.65-79.349-194.404 0-352 157.596-352 352 0 84.467 29.753 161.987 79.349 222.65zM928 512c0 229.75-186.25 416-416 416s-416-186.25-416-416c0-229.75 186.25-416 416-416s416 186.25 416 416z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["ignore"],"defaultCode":59740,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1028,"name":"ignore","prevSize":32,"id":116,"code":59740},"setIdx":0,"setId":6,"iconIdx":116},{"icon":{"paths":["M406.685 405.334c0 47.126-38.205 85.331-85.334 85.331-47.127 0-85.332-38.205-85.332-85.331 0-47.13 38.205-85.334 85.332-85.334 47.13 0 85.334 38.205 85.334 85.334z","M97.352 192c0-17.673 14.327-32 32-32h767.999c17.674 0 32 14.327 32 32v640c0 17.674-14.326 32-32 32h-767.999c-17.673 0-32-14.326-32-32v-640zM161.352 764.163l151.704-176.989c9.271-10.813 24.57-14.202 37.536-8.307l153.123 69.603 160.474-204.24c6.010-7.651 15.174-12.15 24.902-12.23s18.963 4.272 25.098 11.821l151.162 186.048v-405.869h-703.999v540.163zM214.927 800h650.423v-68.64l-175.581-216.099-166.781 212.269-176.989-80.448-131.073 152.918z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["image"],"defaultCode":59761,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1029,"name":"image","prevSize":32,"id":117,"code":59761},"setIdx":0,"setId":6,"iconIdx":117},{"icon":{"paths":["M512 873.027c-199.389 0-361.026-161.635-361.026-361.024s161.636-361.026 361.026-361.026c199.389 0 361.024 161.637 361.024 361.026s-161.635 361.024-361.024 361.024zM512 938.669c235.642 0 426.666-191.024 426.666-426.666s-191.024-426.667-426.666-426.667c-235.642 0-426.667 191.025-426.667 426.667s191.025 426.666 426.667 426.666zM544.819 347.901c0 18.125-14.694 32.819-32.819 32.819-18.128 0-32.822-14.694-32.822-32.819 0-18.128 14.694-32.821 32.822-32.821 18.125 0 32.819 14.693 32.819 32.821zM512 413.542c-18.128 0-32.822 14.694-32.822 32.819v229.744c0 18.125 14.694 32.819 32.822 32.819 18.125 0 32.819-14.694 32.819-32.819v-229.744c0-18.125-14.694-32.819-32.819-32.819z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["info"],"defaultCode":59762,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1030,"name":"info","prevSize":32,"id":118,"code":59762},"setIdx":0,"setId":6,"iconIdx":118},{"icon":{"paths":["M512 864c-194.404 0-352-157.597-352-352s157.596-352 352-352c194.403 0 352 157.596 352 352s-157.597 352-352 352zM512 928c229.75 0 416-186.25 416-416s-186.25-416-416-416c-229.75 0-416 186.25-416 416s186.25 416 416 416zM662.627 361.373c12.496 12.496 12.496 32.758 0 45.254l-105.373 105.373 105.373 105.373c12.496 12.496 12.496 32.758 0 45.254s-32.758 12.496-45.254 0l-105.373-105.373-105.373 105.373c-12.496 12.496-32.758 12.496-45.254 0s-12.496-32.758 0-45.254l105.373-105.373-105.373-105.373c-12.496-12.496-12.496-32.758 0-45.254s32.758-12.496 45.254 0l105.373 105.373 105.373-105.373c12.496-12.496 32.758-12.496 45.254 0z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["input-clear"],"defaultCode":59763,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1031,"name":"input-clear","prevSize":32,"id":119,"code":59763},"setIdx":0,"setId":6,"iconIdx":119},{"icon":{"paths":["M384 288c-17.674 0-32 14.327-32 32s14.326 32 32 32h256c17.674 0 32-14.326 32-32s-14.326-32-32-32h-256z","M352 448c0-17.674 14.326-32 32-32h256c17.674 0 32 14.326 32 32s-14.326 32-32 32h-256c-17.674 0-32-14.326-32-32z","M512 640c-17.674 0-32 14.326-32 32s14.326 32 32 32c17.674 0 32-14.326 32-32s-14.326-32-32-32z","M224 224v576c0 35.347 28.654 64 64 64h448c35.347 0 64-28.653 64-64v-576c0-35.346-28.653-64-64-64h-448c-35.346 0-64 28.654-64 64zM288 800v-576h448v576h-448z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["instance"],"defaultCode":59764,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1032,"name":"instance","prevSize":32,"id":120,"code":59764},"setIdx":0,"setId":6,"iconIdx":120},{"icon":{"paths":["M563.59 255.992l-170.669 512.001h-136.941c-17.673 0-32 14.326-32 32 0 17.67 14.327 32 32 32h320c17.674 0 32-14.33 32-32 0-17.674-14.326-32-32-32h-115.597l170.669-512.001h136.928c17.674 0 32-14.327 32-32s-14.326-32-32-32h-159.002c-0.666-0.021-1.328-0.021-1.99 0h-159.008c-17.674 0-32 14.327-32 32s14.326 32 32 32h115.61z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124319081245699212911624514522416519902101":[{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["italic"],"defaultCode":59765,"grid":0},"attrs":[{}],"properties":{"order":1033,"name":"italic","prevSize":32,"id":121,"code":59765},"setIdx":0,"setId":6,"iconIdx":121},{"icon":{"paths":["M497.136 169.372c12.499 12.497 12.499 32.758 0 45.255l-35.958 35.96c1.078-0.016 2.163-0.025 3.245-0.025h191.152c115.11 0 208.426 93.316 208.426 208.426 0 115.107-93.315 208.422-208.426 208.422h-15.574v-64h15.574c79.763 0 144.426-64.659 144.426-144.422 0-79.766-64.662-144.426-144.426-144.426h-191.152c-1.030 0-2.058 0.011-3.082 0.032l35.795 35.796c12.499 12.499 12.499 32.758 0 45.258-12.496 12.496-32.758 12.496-45.254 0l-90.509-90.511c-12.496-12.497-12.496-32.758 0-45.255l90.509-90.51c12.496-12.497 32.758-12.497 45.254 0zM201.318 500.746h56.159v325.818h-59.023v-268.387h-1.909l-76.204 48.682v-54.090l80.977-52.022zM570.41 719.494c0 64.749-48.045 111.523-116.931 111.523-63.638 0-110.886-38.979-112.48-93.069h57.274c2.070 26.726 25.773 45.341 55.206 45.341 34.838 0 59.978-25.933 59.818-62.365 0.16-36.909-25.613-63.318-61.411-63.475-19.568-0.16-40.25 7.955-51.226 20.045l-53.296-8.749 17.024-168h188.998v49.318h-140.16l-9.386 86.384h1.91c12.090-14.317 35.475-24.816 61.885-24.816 59.184 0 102.774 45.181 102.774 107.862z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["jump-backward"],"defaultCode":59766,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1034,"name":"jump-backward","prevSize":32,"id":122,"code":59766},"setIdx":0,"setId":6,"iconIdx":122},{"icon":{"paths":["M494.861 169.372c-12.496 12.497-12.496 32.758 0 45.255l35.962 35.96c-1.082-0.016-2.163-0.025-3.248-0.025h-191.149c-115.111 0-208.426 93.316-208.426 208.426 0 115.107 93.315 208.422 208.426 208.422h15.574v-64h-15.574c-79.764 0-144.426-64.659-144.426-144.422 0-79.766 64.661-144.426 144.426-144.426h191.149c1.030 0 2.061 0.011 3.085 0.032l-35.798 35.796c-12.496 12.499-12.496 32.758 0 45.258 12.499 12.496 32.758 12.496 45.258 0l90.509-90.511c12.496-12.497 12.496-32.758 0-45.255l-90.509-90.51c-12.499-12.497-32.758-12.497-45.258 0zM521.318 500.746h56.157v325.818h-59.021v-268.387h-1.91l-76.205 48.682v-54.090l80.979-52.022zM890.41 719.494c0 64.749-48.048 111.523-116.934 111.523-63.635 0-110.886-38.979-112.477-93.069h57.274c2.067 26.726 25.773 45.341 55.203 45.341 34.842 0 59.978-25.933 59.821-62.365 0.157-36.909-25.616-63.318-61.411-63.475-19.568-0.16-40.25 7.955-51.226 20.045l-53.296-8.749 17.021-168h189.002v49.318h-140.16l-9.386 86.384h1.91c12.090-14.317 35.475-24.816 61.885-24.816 59.181 0 102.774 45.181 102.774 107.862z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["jump-forward"],"defaultCode":59767,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1035,"name":"jump-forward","prevSize":32,"id":123,"code":59767},"setIdx":0,"setId":6,"iconIdx":123},{"icon":{"paths":["M769.296 649.373c12.496 12.496 12.496 32.758 0 45.254l-192 192c-12.499 12.496-32.758 12.496-45.258 0l-192-192c-12.496-12.496-12.496-32.758 0-45.254 12.499-12.496 32.758-12.496 45.258 0l137.37 137.373v-578.746h-192v192c0 17.674-14.325 32-31.999 32s-32-14.326-32-32v-224c0-17.673 14.327-32 32-32h255.999c17.674 0 32 14.327 32 32v610.746l137.373-137.373c12.499-12.496 32.758-12.496 45.258 0z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["jump-to-message"],"defaultCode":59768,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1036,"name":"jump-to-message","prevSize":32,"id":124,"code":59768},"setIdx":0,"setId":6,"iconIdx":124},{"icon":{"paths":["M576 256c0 35.346-28.653 64-64 64s-64-28.654-64-64c0-35.346 28.653-64 64-64s64 28.654 64 64z","M576 512c0 35.347-28.653 64-64 64s-64-28.653-64-64c0-35.347 28.653-64 64-64s64 28.653 64 64z","M576 768c0 35.347-28.653 64-64 64s-64-28.653-64-64c0-35.347 28.653-64 64-64s64 28.653 64 64z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["kebab"],"defaultCode":59769,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1037,"name":"kebab","prevSize":32,"id":125,"code":59769},"setIdx":0,"setId":6,"iconIdx":125},{"icon":{"paths":["M160 224c-35.346 0-64 28.654-64 64v448c0 35.347 28.654 64 64 64h704c35.347 0 64-28.653 64-64v-448c0-35.346-28.653-64-64-64h-704zM160 288h704v448h-704v-448zM256 352c-17.673 0-32 14.326-32 32s14.327 32 32 32h64c17.674 0 32-14.326 32-32s-14.326-32-32-32h-64zM256 512c0-17.674 14.327-32 32-32h64c17.674 0 32 14.326 32 32s-14.326 32-32 32h-64c-17.673 0-32-14.326-32-32zM480 480c-17.674 0-32 14.326-32 32s14.326 32 32 32h64c17.674 0 32-14.326 32-32s-14.326-32-32-32h-64zM640 512c0-17.674 14.326-32 32-32h64c17.674 0 32 14.326 32 32s-14.326 32-32 32h-64c-17.674 0-32-14.326-32-32zM480 352c-17.674 0-32 14.326-32 32s14.326 32 32 32h64c17.674 0 32-14.326 32-32s-14.326-32-32-32h-64zM320 640c0-17.674 14.326-32 32-32h320c17.674 0 32 14.326 32 32s-14.326 32-32 32h-320c-17.674 0-32-14.326-32-32zM704 352c-17.674 0-32 14.326-32 32s14.326 32 32 32h64c17.674 0 32-14.326 32-32s-14.326-32-32-32h-64z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["keyboard"],"defaultCode":59770,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1038,"name":"keyboard","prevSize":32,"id":126,"code":59770},"setIdx":0,"setId":6,"iconIdx":126},{"icon":{"paths":["M505.133 128.078c60.819-1.376 120.422 15.569 170.346 48.251 49.904 32.67 87.501 79.327 107.75 133.159 20.24 53.808 22.205 112.266 5.648 167.165-16.554 54.89-50.864 103.683-98.368 139.309-15.501 11.462-28.189 26.246-36.989 43.309-8.822 17.107-13.469 36-13.507 55.216v21.514h-96.013v-148.774l120.989-151.235c11.040-13.802 8.803-33.939-4.998-44.979s-33.939-8.803-44.979 4.998l-103.011 128.765-103.011-128.765c-11.040-13.802-31.178-16.038-44.979-4.998s-16.038 31.178-4.998 44.979l120.989 151.235v148.774h-95.994v-21.677c-0.138-19.030-4.762-37.728-13.462-54.691-8.694-16.954-21.21-31.69-36.509-43.194l-19.229 25.578 19.069-25.696c-34.247-25.418-61.857-57.84-80.845-94.736-18.985-36.89-28.886-77.331-29.027-118.285v-0.045c-0.71-146.981 123.709-271.715 281.13-275.177zM640.013 800c16.506 0 32.618-6.243 44.72-17.795 12.157-11.603 19.28-27.664 19.28-44.746v-22.842c0.022-8.947 2.182-17.856 6.39-26.016 4.214-8.176 10.406-15.459 18.208-21.216l0.192-0.144c58.173-43.59 100.733-103.75 121.35-172.109 20.621-68.378 18.154-141.245-7.021-208.177-25.168-66.908-71.664-124.28-132.602-164.174-60.915-39.878-133.274-60.348-206.826-58.689-189.76 4.184-344.567 155.060-343.702 339.427l0 0.045 32-0.154-32 0.109c0.176 51.165 12.553 101.558 36.121 147.35 23.547 45.754 57.616 85.658 99.521 116.774 7.682 5.792 13.781 13.062 17.952 21.194 4.164 8.122 6.33 16.944 6.409 25.84v22.781c0 17.082 7.123 33.142 19.28 44.746 12.106 11.552 28.218 17.795 44.72 17.795h256.006zM352 864c-17.674 0-32 14.326-32 32s14.326 32 32 32h320c17.674 0 32-14.326 32-32s-14.326-32-32-32h-320z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["lamp-bulb"],"defaultCode":59836,"grid":0},"attrs":[{}],"properties":{"order":1039,"id":127,"name":"lamp-bulb","prevSize":32,"code":59836},"setIdx":0,"setId":6,"iconIdx":127},{"icon":{"paths":["M681.904 256c0-17.673-14.326-32-32-32s-32 14.327-32 32v56.875l-80.346 13.998c-17.411 3.034-29.069 19.61-26.035 37.021 3.034 17.408 19.61 29.066 37.021 26.032l69.36-12.086v69.373c-30.384 6.851-60.461 20.074-84.154 43.139-27.923 27.184-44.070 65.238-44.070 113.808 0 25.741 6.262 48.262 18.451 66.621 12.186 18.349 29.062 30.682 47.251 38 35.357 14.221 76.72 10.173 108.128-4.579l1.206-0.566c31.126-14.621 62.493-29.354 90.723-57.818 21.325-21.507 39.709-49.539 56.848-88.678 5.654 9.498 9.594 20.966 10.285 34.339 1.632 31.526-14.275 82.813-87.955 153.418-12.758 12.227-13.19 32.483-0.963 45.245 12.227 12.758 32.486 13.19 45.245 0.963 80.192-76.851 110.586-145.034 107.59-202.934-2.986-57.658-38.586-96.022-70.675-113.955-20.774-13.014-50.214-22.826-81.216-28.288-16.624-2.931-34.47-4.749-52.694-4.995v-74.243l101.718-17.722c17.411-3.034 29.066-19.61 26.032-37.019-3.034-17.411-19.606-29.066-37.018-26.032l-90.733 15.809v-45.724zM578.394 536.208c10.163-9.891 23.565-17.475 39.51-22.704v138.653c-13.443 2.547-27.485 1.731-38.634-2.752-7.712-3.104-13.658-7.757-17.824-14.029-4.157-6.262-7.766-15.997-7.766-31.216 0-33.35 10.563-54.176 24.714-67.952zM709.994 600.752c-8.682 8.755-17.782 15.706-28.090 22.074v-117.888c14.125 0.24 28.224 1.661 41.587 4.016 13.587 2.397 25.683 5.622 35.763 9.165-16.88 42.038-33.069 66.304-49.261 82.634zM247.704 565.334h98.386l-49.193-184.883-49.193 184.883zM390.851 733.562l-27.734-104.227h-132.442l-27.732 104.227c-4.544 17.078-22.073 27.242-39.152 22.694-17.079-4.544-27.24-22.070-22.696-39.152l106.323-399.598c13.494-50.714 85.462-50.713 98.956 0l106.323 399.598c4.544 17.082-5.616 34.608-22.694 39.152-17.078 4.547-34.608-5.616-39.152-22.694z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["language"],"defaultCode":59771,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1040,"name":"language","prevSize":32,"id":128,"code":59771},"setIdx":0,"setId":6,"iconIdx":128},{"icon":{"paths":["M234.831 743.917c-75.198-141.606-58.197-285.718 40.507-391.734 101.776-109.314 284.915-172.318 524.636-158.217 16.192 0.953 29.114 13.872 30.064 30.066 14.102 239.723-48.902 422.859-158.218 524.635-106.016 98.707-250.128 115.706-391.737 40.506l-65.457 65.456c-12.497 12.499-32.758 12.499-45.255 0-12.497-12.496-12.497-32.758 0-45.254l65.458-65.456zM282.51 696.237l300.107-300.109c12.496-12.496 32.758-12.496 45.254 0 12.496 12.499 12.496 32.758 0 45.258l-300.109 300.106c113.565 53.238 220.73 34.554 300.448-39.664 86.579-80.611 146.157-231.866 139.251-445.286-213.418-6.905-364.675 52.673-445.283 139.254-74.219 79.715-92.904 186.877-39.669 300.442z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["leaf"],"defaultCode":59814,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1041,"id":129,"name":"leaf","prevSize":32,"code":59814},"setIdx":0,"setId":6,"iconIdx":129},{"icon":{"paths":["M254.841 275.612l-13.972 14.271c-37.092 37.883-36.449 98.664 1.435 135.758l145.619 142.573c37.885 37.091 98.666 36.448 135.76-1.437l13.971-14.269c0.723-0.739 1.43-1.488 2.128-2.243l0.099 0.099c5.805-5.904 13.888-9.568 22.822-9.568 17.674 0 32 14.326 32 32 0 9.6-4.227 18.211-10.922 24.077l-0.397 0.41-13.974 14.269c-61.818 63.142-163.12 64.214-226.259 2.394l-145.622-142.576c-63.141-61.818-64.212-163.119-2.392-226.26l13.972-14.27c61.82-63.141 163.12-64.212 226.263-2.392l74.691 73.131c0.976 0.847 1.901 1.752 2.768 2.71l0.374 0.366-0.026 0.026c4.934 5.63 7.923 13.005 7.923 21.078 0 17.674-14.326 32-32 32-7.83 0-15.005-2.813-20.566-7.482l-0.106 0.109-77.834-76.206c-37.885-37.092-98.666-36.45-135.757 1.435zM790.566 768.003l13.971-14.269c37.091-37.885 36.448-98.666-1.437-135.757l-145.619-142.576c-37.885-37.091-98.666-36.448-135.757 1.437l-13.971 14.269c-0.723 0.739-1.434 1.488-2.128 2.243l-0.102-0.099c-5.805 5.907-13.885 9.568-22.822 9.568-17.67 0-32-14.326-32-32 0-9.6 4.227-18.211 10.922-24.077l0.4-0.406 13.971-14.272c61.821-63.142 163.12-64.211 226.262-2.39l145.619 142.573c63.142 61.821 64.211 163.12 2.394 226.262l-13.971 14.269c-61.821 63.142-163.123 64.211-226.262 2.394l-74.694-73.133c-0.976-0.845-1.901-1.75-2.768-2.71l-0.374-0.365 0.026-0.026c-4.931-5.629-7.923-13.005-7.923-21.078 0-17.674 14.326-32 32-32 7.83 0 15.005 2.813 20.566 7.482l0.106-0.109 77.837 76.208c37.885 37.091 98.662 36.448 135.757-1.437z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["link"],"defaultCode":59752,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1042,"name":"link","prevSize":32,"id":130,"code":59752},"setIdx":0,"setId":6,"iconIdx":130},{"icon":{"paths":["M840.541 128c31.318 0 56.813 24.79 56.813 55.383v657.212c0 30.592-25.494 55.427-56.813 55.427h-654.546c-31.254 0-56.642-24.835-56.642-55.427v-657.212c0-30.593 25.387-55.383 56.642-55.383h654.546zM300.196 233.75c-36.588 0-66.093 29.59-66.093 66.050 0 36.482 29.505 66.072 66.093 66.072 36.437 0 66.005-29.59 66.005-66.072 0-36.46-29.568-66.050-66.005-66.050zM243.148 782.461h114.029v-366.515h-114.029v366.515zM537.814 415.923h-109.187v366.515h113.773v-181.274c0-47.83 9.046-94.147 68.333-94.147 58.454 0 59.181 54.678 59.181 97.174v178.246h113.901v-201.008c0-98.714-21.312-174.598-136.666-174.598-55.402 0-92.566 30.381-107.757 59.203h-1.578v-50.112z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["linkedin-monochromatic"],"defaultCode":59658,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1043,"name":"linkedin-monochromatic","prevSize":32,"id":131,"code":59658},"setIdx":0,"setId":6,"iconIdx":131},{"icon":{"paths":["M700.144 361.891c4.685-24.973 34.704-34.093 49.13-13.171 31.994 46.403 50.726 102.653 50.726 163.28s-18.733 116.88-50.726 163.283c-14.426 20.922-44.445 11.802-49.13-13.174l-1.706-9.101c-1.581-8.429 0.384-17.082 4.858-24.403 20.749-33.965 32.704-73.888 32.704-116.605 0-42.714-11.955-82.637-32.704-116.605-4.474-7.318-6.438-15.971-4.858-24.4l1.706-9.104z","M320.704 395.395c-20.748 33.968-32.704 73.891-32.704 116.605 0 42.717 11.956 82.64 32.704 116.605 4.474 7.322 6.438 15.974 4.858 24.403l-1.706 9.101c-4.684 24.976-34.705 34.096-49.128 13.174-31.994-46.403-50.728-102.656-50.728-163.283s18.733-116.877 50.728-163.28c14.424-20.922 44.444-11.802 49.128 13.171l1.706 9.104c1.581 8.429-0.384 17.082-4.858 24.4z","M728.765 209.256l-0.515 2.747c-2.234 11.911 2.534 23.967 11.763 31.821 75.866 64.565 123.987 160.751 123.987 268.175 0 107.427-48.122 203.613-123.987 268.176-9.229 7.856-13.997 19.914-11.763 31.824l0.515 2.746c4.192 22.362 29.69 33.194 47.261 18.746 92.794-76.294 151.974-191.981 151.974-321.491 0-129.507-59.181-245.193-151.974-321.489-17.571-14.448-43.069-3.615-47.261 18.745z","M283.986 243.825c9.228-7.854 13.998-19.911 11.764-31.821l-0.515-2.747c-4.192-22.359-29.69-33.193-47.262-18.745-92.793 76.296-151.973 191.981-151.973 321.489 0 129.51 59.18 245.197 151.973 321.491 17.572 14.448 43.070 3.616 47.262-18.746l0.515-2.746c2.233-11.91-2.536-23.968-11.764-31.824-75.864-64.563-123.986-160.749-123.986-268.176 0-107.424 48.122-203.61 123.986-268.175z","M608 512c0 53.021-42.979 96-96 96s-96-42.979-96-96c0-53.018 42.979-96 96-96s96 42.982 96 96z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["live"],"defaultCode":59774,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1044,"name":"live","prevSize":32,"id":132,"code":59774},"setIdx":0,"setId":6,"iconIdx":132},{"icon":{"paths":["M439.274 704.374c0-33.645 26.278-47.677 72.726-47.677s72.73 14.032 72.73 47.677c0 32.96-13.19 111.069-23.914 149.76-4.963 17.808-22.080 25.171-48.816 25.171s-43.85-7.363-48.813-25.174c-10.717-38.666-23.914-116.688-23.914-149.757zM616.778 870.374l0.026-0.090c6.176-22.291 12.566-53.869 17.386-83.453 4.688-28.787 8.72-60.707 8.72-82.458 0-35.891-15.811-67.802-46.797-87.114-26.035-16.227-57.152-19.926-84.112-19.926-26.957 0-58.077 3.699-84.112 19.926-30.982 19.312-46.797 51.222-46.797 87.114 0 21.805 4.035 53.728 8.726 82.515 4.819 29.578 11.21 61.123 17.379 83.392l0.026 0.086c7.402 26.557 24.982 45.664 46.87 56.467 19.472 9.61 40.426 11.834 57.907 11.834 17.485 0 38.435-2.224 57.907-11.83 21.888-10.8 39.469-29.907 46.87-56.464zM459.635 460.8c0-28.275 23.446-51.2 52.365-51.2s52.365 22.925 52.365 51.2c0 28.278-23.446 51.2-52.365 51.2s-52.365-22.922-52.365-51.2zM512 341.334c-67.478 0-122.182 53.488-122.182 119.466 0 65.981 54.704 119.469 122.182 119.469s122.182-53.488 122.182-119.469c0-65.978-54.704-119.466-122.182-119.466zM677.802 537.254c-6.662 13.792-3.882 31.11 6.278 42.573 14.086 15.894 39.85 17.939 50.205-0.602 19.642-35.174 30.806-75.526 30.806-118.426 0-136.672-113.315-247.465-253.091-247.465-139.779 0-253.092 110.793-253.092 247.465 0 42.899 11.164 83.251 30.806 118.426 10.354 18.541 36.119 16.496 50.205 0.602 10.16-11.462 12.938-28.781 6.275-42.573-11.203-23.187-17.469-49.104-17.469-76.454 0-98.97 82.054-179.199 183.274-179.199s183.27 80.229 183.27 179.199c0 27.35-6.262 53.267-17.469 76.454zM730.16 699.795c-0.304-10.659 3.542-21.072 10.928-28.762 52.771-54.957 85.094-128.902 85.094-210.234 0-169.661-140.666-307.199-314.182-307.199s-314.182 137.538-314.182 307.199c0 81.331 32.323 155.28 85.093 210.234 7.386 7.69 11.234 18.102 10.928 28.762-0.833 29.018-31.273 47.917-52.121 27.715-70.223-68.042-113.718-162.41-113.718-266.71 0-207.363 171.923-375.465 384-375.465s384 168.102 384 375.465c0 104.304-43.498 198.672-113.722 266.714-20.848 20.202-51.286 1.302-52.118-27.718z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["live-streaming"],"defaultCode":59773,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1045,"name":"live-streaming","prevSize":32,"id":133,"code":59773},"setIdx":0,"setId":6,"iconIdx":133},{"icon":{"paths":["M397.011 527.334c26.576 0 48.122-21.587 48.122-48.214s-21.546-48.214-48.122-48.214c-26.576 0-48.118 21.587-48.118 48.214s21.542 48.214 48.118 48.214z","M589.491 479.12c0 26.627-21.542 48.214-48.118 48.214s-48.122-21.587-48.122-48.214c0-26.627 21.546-48.214 48.122-48.214s48.118 21.587 48.118 48.214z","M733.853 479.12c0 26.627-21.542 48.214-48.118 48.214s-48.122-21.587-48.122-48.214c0-26.627 21.546-48.214 48.122-48.214s48.118 21.587 48.118 48.214z","M88.039 813.683l119.625 31.283c85.312 22.307 173.45-16.256 238.691-79.709 29.501 4.794 59.875 7.242 90.678 7.242 218.294 0 404.339-122.864 404.339-294.518 0-171.664-186.042-294.52-404.339-294.52-218.314 0-404.351 122.852-404.34 294.523 0 65.072 27.642 125.014 75.655 173.587-2.847 24.835-14.596 44.73-36.049 68.55l-84.261 93.562zM537.034 258.997c183.13 0 331.6 98.043 331.6 218.984 0 120.931-148.47 218.982-331.6 218.982-40.781 0-79.834-4.877-115.91-13.763-36.669 45.6-117.335 109.008-195.697 88.518 25.489-28.304 63.251-76.131 55.168-154.909-46.968-37.779-75.162-86.134-75.162-138.829-0.008-120.95 148.461-218.984 331.6-218.984z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["livechat-monochromatic"],"defaultCode":59775,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1046,"name":"livechat-monochromatic","prevSize":32,"id":134,"code":59775},"setIdx":0,"setId":6,"iconIdx":134},{"icon":{"paths":["M512 128c-97.203 0-176 78.798-176 176v142.477h-16c-53.020 0-96 42.979-96 96v257.523c0 53.021 42.981 96 96 96h384c53.021 0 96-42.979 96-96v-257.523c0-53.021-42.979-96-96-96h-16v-142.477c0-97.202-78.797-176-176-176zM624 304v142.477h-224v-142.477c0-61.856 50.144-112 112-112s112 50.144 112 112z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["lock-filled"],"defaultCode":59748,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1047,"name":"lock-filled","prevSize":32,"id":135,"code":59748},"setIdx":0,"setId":6,"iconIdx":135},{"icon":{"paths":["M336 304c0-97.202 78.797-176 176-176s176 78.798 176 176v142.477h16c53.021 0 96 42.979 96 96v257.523c0 53.021-42.979 96-96 96h-384c-53.019 0-96-42.979-96-96v-257.523c0-53.021 42.981-96 96-96h16v-142.477zM400 446.477h224v-142.477c0-61.856-50.144-112-112-112s-112 50.144-112 112v142.477zM320 510.477c-17.673 0-32 14.326-32 32v257.523c0 17.674 14.327 32 32 32h384c17.674 0 32-14.326 32-32v-257.523c0-17.674-14.326-32-32-32h-384z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["locker"],"defaultCode":59749,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1048,"name":"locker","prevSize":32,"id":136,"code":59749},"setIdx":0,"setId":6,"iconIdx":136},{"icon":{"paths":["M341.334 778.672c-17.674 0-32 14.326-32 32s14.326 32 32 32h341.334c17.674 0 32-14.326 32-32s-14.326-32-32-32h-341.334zM85.335 298.672c0-70.692 57.308-128 128-128h597.334c70.691 0 128 57.308 128 128v298.666c0 70.694-57.309 128-128 128h-597.334c-70.692 0-128-57.306-128-128v-298.666zM213.335 234.672c-35.346 0-64 28.654-64 64v298.666c0 35.347 28.654 64 64 64h597.334c35.344 0 64-28.653 64-64v-298.666c0-35.347-28.656-64-64-64h-597.334zM256 320c0-11.782 9.551-21.333 21.333-21.333h170.667c11.782 0 21.334 9.551 21.334 21.333s-9.552 21.334-21.334 21.334h-170.667c-11.782 0-21.333-9.552-21.333-21.334zM277.333 554.666c-11.782 0-21.333 9.552-21.333 21.334s9.551 21.334 21.333 21.334h85.332c11.782 0 21.334-9.552 21.334-21.334s-9.552-21.334-21.334-21.334h-85.332zM554.666 320c0-11.782 9.552-21.333 21.334-21.333h170.666c11.782 0 21.334 9.551 21.334 21.333s-9.552 21.334-21.334 21.334h-170.666c-11.782 0-21.334-9.552-21.334-21.334zM448 554.666c-11.782 0-21.334 9.552-21.334 21.334s9.552 21.334 21.334 21.334h298.666c11.782 0 21.334-9.552 21.334-21.334s-9.552-21.334-21.334-21.334h-298.666zM256 448c0-11.782 9.551-21.334 21.333-21.334h213.332c11.782 0 21.334 9.552 21.334 21.334s-9.552 21.334-21.334 21.334h-213.332c-11.782 0-21.333-9.552-21.333-21.334zM618.666 426.666c-11.782 0-21.331 9.552-21.331 21.334s9.549 21.334 21.331 21.334h128c11.782 0 21.334-9.552 21.334-21.334s-9.552-21.334-21.334-21.334h-128z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["log-view"],"defaultCode":59778,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1049,"name":"log-view","prevSize":32,"id":137,"code":59778},"setIdx":0,"setId":6,"iconIdx":137},{"icon":{"paths":["M176 96c-17.673 0-32 14.327-32 32v768c0 17.674 14.327 32 32 32h512c17.674 0 32-14.326 32-32v-96c0-17.674-14.326-32-32-32s-32 14.326-32 32v64h-448v-704h448v64c0 17.673 14.326 32 32 32s32-14.327 32-32v-96c0-17.673-14.326-32-32-32h-512zM521.373 329.373c12.496-12.497 32.758-12.497 45.254 0s12.496 32.758 0 45.254l-105.373 105.373h418.746c17.674 0 32 14.326 32 32s-14.326 32-32 32h-418.746l105.373 105.373c12.496 12.496 12.496 32.758 0 45.254s-32.758 12.496-45.254 0l-160-160c-12.496-12.496-12.496-32.758 0-45.254l160-160z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["login"],"defaultCode":59779,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1050,"name":"login","prevSize":32,"id":138,"code":59779},"setIdx":0,"setId":6,"iconIdx":138},{"icon":{"paths":["M268.099 96c-17.673 0-32 14.327-32 32v768c0 17.674 14.327 32 32 32h512c17.674 0 32-14.326 32-32v-96c0-17.674-14.326-32-32-32s-32 14.326-32 32v64h-448v-704h448v64c0 17.673 14.326 32 32 32s32-14.327 32-32v-96c0-17.673-14.326-32-32-32h-512zM994.726 489.373l-160-160c-12.496-12.497-32.758-12.497-45.254 0s-12.496 32.758 0 45.254l105.373 105.373h-418.746c-17.674 0-32 14.326-32 32s14.326 32 32 32h418.746l-105.373 105.373c-12.496 12.496-12.496 32.758 0 45.254s32.758 12.496 45.254 0l160-160c12.496-12.496 12.496-32.758 0-45.254z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["logout"],"defaultCode":59780,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1051,"name":"logout","prevSize":32,"id":139,"code":59780},"setIdx":0,"setId":6,"iconIdx":139},{"icon":{"paths":["M192 736h640v-448h-640v448zM128 256c0-17.673 14.327-32 32-32h704c17.674 0 32 14.327 32 32v512c0 17.674-14.326 32-32 32h-704c-17.673 0-32-14.326-32-32v-512zM305.304 389.082c-14.866-9.555-34.665-5.251-44.222 9.613-9.557 14.867-5.253 34.666 9.613 44.224l241.304 155.123 241.306-155.123c14.864-9.558 19.168-29.357 9.613-44.224-9.558-14.864-29.357-19.168-44.224-9.613l-206.694 132.877-206.696-132.877z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["mail"],"defaultCode":59781,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1052,"name":"mail","prevSize":32,"id":140,"code":59781},"setIdx":0,"setId":6,"iconIdx":140},{"icon":{"paths":["M302.769 192h418.463l23.187 72.727h-0.211l23.792 63.999c0 41.27-31.306 69.818-64 69.818s-64-28.547-64-69.818c0-18.476-14.326-33.454-32-33.454s-32 14.978-32 33.454c0 41.27-31.306 69.818-64 69.818s-64-28.547-64-69.818c0-18.476-14.326-33.454-32-33.454s-32 14.978-32 33.454c0 41.27-31.306 69.818-64 69.818s-64-28.547-64-69.818l23.794-63.999h-0.213l23.188-72.727zM212.406 264.727l36.491-114.448c4.231-13.27 16.56-22.279 30.488-22.279h465.23c13.93 0 26.259 9.009 30.49 22.279l56.896 178.447c0 33.939-12.083 64.925-32 88.515v350.778c0 53.018-42.979 96-96 96h-384c-53.019 0-96-42.982-96-96v-350.778c-19.916-23.59-32-54.576-32-88.515l20.406-63.999zM288 458.33v309.69c0 17.67 14.327 32 32 32h128v-192.019h128v192.019h128c17.674 0 32-14.33 32-32v-309.69c-10.227 2.752-20.95 4.214-32 4.214-38.23 0-72.547-17.52-96-45.302-23.453 27.782-57.77 45.302-96 45.302s-72.547-17.52-96-45.302c-23.453 27.782-57.77 45.302-96 45.302-11.050 0-21.772-1.462-32-4.214z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["marketplace"],"defaultCode":59782,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1053,"name":"marketplace","prevSize":32,"id":141,"code":59782},"setIdx":0,"setId":6,"iconIdx":141},{"icon":{"paths":["M773.072 576c-35.344 0-64-28.653-64-64s28.656-64 64-64c35.347 0 64 28.653 64 64s-28.653 64-64 64z","M517.072 576c-35.344 0-64-28.653-64-64s28.656-64 64-64c35.347 0 64 28.653 64 64s-28.653 64-64 64z","M261.073 576c-35.346 0-64-28.653-64-64s28.654-64 64-64c35.346 0 63.999 28.653 63.999 64s-28.652 64-63.999 64z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["meatballs"],"defaultCode":59783,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1054,"name":"meatballs","prevSize":32,"id":142,"code":59783},"setIdx":0,"setId":6,"iconIdx":142},{"icon":{"paths":["M651.36 116.071c-57.242-19.989-105.792-20.069-138.358-20.071v64l-1.002-64c-92.006 0.342-297.345 47.824-381.242 242.995-17.897 38.97-34.758 103.344-34.758 173.005 0 69.958 17.020 146.285 52.216 207.875 23.229 40.653 92.799 131.376 191.179 173.536 94.861 40.656 206.368 52.349 296.49 16.301 16.41-6.563 24.39-25.187 17.827-41.597s-25.187-24.39-41.597-17.827c-69.878 27.952-163.171 20.445-247.51-15.699-80.819-34.64-141.384-112.451-160.821-146.464-28.804-50.41-43.784-115.418-43.784-176.125 0-60.765 15.020-116.182 29.055-146.589l0.184-0.4 0.173-0.406c69.507-162.181 243.823-204.604 323.589-204.605 31.594 0.002 70.877 0.296 117.258 16.493 46.147 16.114 101.389 48.779 161.824 116.767 43.658 49.115 63.533 114.977 69.389 177.713 5.891 63.12-2.854 118.189-11.546 142.093-6.4 17.6-20.429 45.44-59.392 45.699-18.259-0.806-72.822-14.672-83.12-69.568v-235.062c0-17.674-3.414-34.134-29.014-34.134-19.338 0-26.454 16.461-26.454 34.134v34.131c-35.181-39.859-95.402-68.266-152.746-68.266-106.038 0-192 85.962-192 192s85.962 192 192 192c62.179 0 117.658-29.555 152.746-75.386 25.715 71.078 102.57 93.027 137.014 94.134l0.515 0.016h0.512c82.643 0 111.715-64.806 120.086-87.83 12.64-34.762 21.674-99.696 15.12-169.907-6.589-70.595-29.379-151.401-85.277-214.287-66.902-75.265-131.075-114.597-188.557-134.67zM627.2 512c0 70.691-57.309 128-128 128s-128-57.309-128-128c0-70.691 57.309-128 128-128s128 57.309 128 128z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124319081245699212911624514522416519902101":[{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["mention"],"defaultCode":59784,"grid":0},"attrs":[{}],"properties":{"order":1055,"name":"mention","prevSize":32,"id":143,"code":59784},"setIdx":0,"setId":6,"iconIdx":143},{"icon":{"paths":["M223.311 308.609c-47.832 66.7-64.077 147.667-64.077 201.187v1.405l-0.127 1.398c-9.348 103.235 27.547 175.997 86.848 226.374 60.643 51.52 146.602 80.998 235.29 90.893 88.614 9.885 186.224 1.398 263.341-14.973 38.56-8.189 70.928-18.125 93.888-28.128 8.906-3.882 15.837-7.536 20.944-10.765-2.378-1.514-5.248-3.197-8.675-5.030-8.886-4.749-19.059-9.261-29.613-13.894l-1.843-0.81c-9.315-4.083-19.725-8.65-27.613-13.078-14.291-8.026-28.317-17.155-38.544-26.867-5.034-4.781-10.762-11.194-14.595-19.184-4.054-8.454-6.96-21.078-1.261-34.435 30.816-72.186 45.459-111.725 52.554-137.834 6.621-24.378 6.621-36.653 6.621-56.17v-0.179c0-15.51-8.979-86.595-53.776-152.876-43.376-64.174-121.395-125.729-264.832-125.729-129.725 0-207.83 53.576-254.529 118.696zM173.267 272.433c58.132-81.063 154.749-144.433 304.573-144.433 164.896 0 261.594 72.589 315.859 152.878 52.838 78.181 64.416 161.881 64.416 187.641 0 21.654-0.022 40.336-8.797 72.64-7.83 28.835-22.627 68.614-50.048 133.424 5.069 4.032 12.592 9.005 22.506 14.57 5.123 2.877 12.995 6.339 24.054 11.194 10.266 4.506 22.582 9.93 33.891 15.978 10.848 5.798 23.526 13.571 32.954 23.738 9.859 10.63 20.208 28.87 12.816 51.139-4.87 14.672-16.182 25.091-25.61 32.016-10.24 7.52-22.947 14.278-36.858 20.342-27.946 12.176-64.582 23.181-105.68 31.907-82.198 17.453-186.522 26.688-282.909 15.936-96.31-10.746-195.346-43.178-268.313-105.165-74.031-62.893-119.295-154.778-108.551-277.856 0.276-63.411 19.117-157.053 75.696-235.948z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["message"],"defaultCode":59786,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1056,"name":"message","prevSize":32,"id":144,"code":59786},"setIdx":0,"setId":6,"iconIdx":144},{"icon":{"paths":["M477.84 128c104.256 0 181.251 29.018 237.494 70.652l-44.317 44.317c-45.52-31.22-107.747-53.057-193.178-53.057-129.725 0-207.83 53.576-254.529 118.696-47.832 66.7-64.077 147.667-64.077 201.187v1.405l-0.127 1.398c-7.328 80.928 13.761 143.126 51.784 190.499l-43.879 43.878c-50.179-59.901-78.131-139.043-69.441-238.595 0.276-63.411 19.117-157.053 75.696-235.948 58.132-81.063 154.749-144.433 304.573-144.433zM822.848 332.499l-47.008 47.008c16.502 42.634 20.608 78.525 20.608 89.011v0.179c0 19.517 0 31.792-6.621 56.17-7.094 26.109-21.738 65.648-52.554 137.834-5.699 13.357-2.794 25.981 1.261 34.435 3.834 7.99 9.562 14.403 14.595 19.184 10.227 9.712 24.253 18.842 38.544 26.867 7.888 4.429 18.298 8.995 27.613 13.078l1.843 0.81c10.554 4.634 20.726 9.146 29.613 13.894 3.427 1.834 6.298 3.517 8.672 5.030-5.104 3.229-12.035 6.883-20.941 10.765-22.96 10.003-55.328 19.939-93.888 28.128-77.12 16.371-174.73 24.858-263.341 14.973-43.744-4.88-86.826-14.525-126.534-29.229l-47.542 47.542c52.771 23.018 110.492 36.886 167.267 43.222 96.387 10.752 200.71 1.517 282.909-15.936 41.098-8.726 77.731-19.731 105.68-31.907 13.91-6.064 26.618-12.822 36.858-20.342 9.427-6.925 20.739-17.344 25.61-32.016 7.392-22.269-2.957-40.509-12.816-51.139-9.427-10.166-22.106-17.939-32.954-23.738-11.309-6.048-23.626-11.472-33.891-15.978-11.059-4.854-18.934-8.317-24.054-11.194-9.914-5.565-17.437-10.538-22.506-14.57 27.421-64.81 42.214-104.589 50.048-133.424 8.774-32.304 8.797-50.986 8.797-72.64 0-20.106-7.053-75.501-35.267-136.019zM836.038 153.372c12.499-12.497 32.758-12.497 45.254 0 12.499 12.497 12.499 32.758 0 45.255l-682.665 682.665c-12.497 12.499-32.758 12.499-45.255 0-12.497-12.496-12.497-32.755 0-45.254l682.666-682.666z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["message-disabled"],"defaultCode":59785,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1057,"name":"message-disabled","prevSize":32,"id":145,"code":59785},"setIdx":0,"setId":6,"iconIdx":145},{"icon":{"paths":["M86.686 85.336l730.792 774.088c0 0 24.899 17.558 43.936-2.928 19.040-20.486 4.394-40.973 4.394-40.973l-779.122-730.187zM318.080 158.503l556.516 599.955c0 0 24.896 17.558 43.936-2.928 19.037-20.486 4.394-40.973 4.394-40.973l-604.845-556.054zM712.035 915.030l-556.517-599.955 604.843 556.054c0 0 14.646 20.486-4.39 40.973-19.040 20.486-43.936 2.928-43.936 2.928zM513.693 221.419l388.803 419.15c0 0 17.395 12.269 30.694-2.042 13.302-14.314 3.069-28.627 3.069-28.627l-422.566-388.482zM597.878 915.677l-388.805-419.152 422.568 388.48c0 0 10.234 14.314-3.069 28.627-13.302 14.31-30.694 2.045-30.694 2.045zM713.498 312.143l176.221 190.551c0 0 8.605 5.747 15.184-0.96 6.579-6.704 1.517-13.411 1.517-13.411l-192.922-176.18zM482.582 880.23l-176.219-190.55 192.923 176.179c0 0 5.059 6.707-1.52 13.414-6.579 6.704-15.184 0.957-15.184 0.957z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["meteor-monochromatic"],"defaultCode":59659,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1058,"name":"meteor-monochromatic","prevSize":32,"id":146,"code":59659},"setIdx":0,"setId":6,"iconIdx":146},{"icon":{"paths":["M608 288c0-53.019-42.979-96-96-96s-96 42.981-96 96v128c0 53.021 42.979 96 96 96s96-42.979 96-96v-128zM352 288c0-88.365 71.635-160 160-160s160 71.635 160 160v128c0 88.365-71.635 160-160 160s-160-71.635-160-160v-128zM256 384c17.673 0 32 14.326 32 32 0 92.086 37.757 149.632 83.722 185.6 46.464 36.358 102.736 51.581 140.278 54.326 37.542-2.746 93.814-17.968 140.278-54.326 45.962-35.968 83.722-93.514 83.722-185.6 0-17.674 14.326-32 32-32s32 14.326 32 32c0 112.714-47.574 188.499-108.278 236-47.904 37.485-103.082 56.762-147.722 64.381v115.619h160c17.674 0 32 14.326 32 32s-14.326 32-32 32h-384c-17.673 0-32-14.326-32-32s14.327-32 32-32h160v-115.619c-44.64-7.619-99.818-26.896-147.722-64.381-60.703-47.501-108.278-123.286-108.278-236 0-17.674 14.327-32 32-32z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["microphone"],"defaultCode":59788,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1059,"name":"microphone","prevSize":32,"id":147,"code":59788},"setIdx":0,"setId":6,"iconIdx":147},{"icon":{"paths":["M512 128c75.546 0 138.861 52.356 155.645 122.762l-59.645 59.644v-22.405c0-53.019-42.979-96-96-96s-96 42.981-96 96v128c0 24.067 8.858 46.067 23.488 62.915l-45.322 45.325c-26.182-28.49-42.166-66.499-42.166-108.24v-128c0-88.365 71.635-160 160-160zM561.35 568.243l102.893-102.893c-15.763 48.672-54.221 87.13-102.893 102.893zM288 416c0 72.154 23.181 123.101 55.328 159.078l-45.304 45.302c-43.428-47.35-74.024-113.99-74.024-204.381 0-17.674 14.327-32 32-32s32 14.326 32 32zM478.659 650.938l-51.808 51.808c18.56 6.374 36.579 10.806 53.149 13.635v115.619h-160c-17.673 0-32 14.326-32 32s14.327 32 32 32h384c17.674 0 32-14.326 32-32s-14.326-32-32-32h-160v-115.619c44.64-7.619 99.818-26.896 147.722-64.381 60.704-47.501 108.278-123.286 108.278-236 0-17.674-14.326-32-32-32s-32 14.326-32 32c0 92.086-37.757 149.632-83.722 185.6-46.464 36.358-102.736 51.581-140.278 54.326-9.971-0.73-21.264-2.339-33.341-4.989zM825.373 153.372c12.496-12.497 32.758-12.497 45.254 0s12.496 32.758 0 45.255l-672 672c-12.497 12.496-32.758 12.496-45.255 0s-12.497-32.758 0-45.254l672-672z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["microphone-disabled"],"defaultCode":59787,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1060,"name":"microphone-disabled","prevSize":32,"id":148,"code":59787},"setIdx":0,"setId":6,"iconIdx":148},{"icon":{"paths":["M234.666 170.661c0-47.128 38.205-85.333 85.333-85.333h384.001c47.126 0 85.331 38.205 85.331 85.333v682.667c0 47.13-38.205 85.334-85.331 85.334h-384.001c-47.128 0-85.333-38.205-85.333-85.334v-682.667zM298.666 170.661v682.667c0 11.782 9.551 21.334 21.333 21.334h384.001c11.782 0 21.331-9.552 21.331-21.334v-682.667c0-11.782-9.549-21.333-21.331-21.333h-96.291c-2.653 24.002-23.002 42.672-47.709 42.672h-96c-24.707 0-45.056-18.67-47.709-42.672h-96.292c-11.782 0-21.333 9.551-21.333 21.333z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["mobile"],"defaultCode":59789,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1061,"name":"mobile","prevSize":32,"id":149,"code":59789},"setIdx":0,"setId":6,"iconIdx":149},{"icon":{"paths":["M319.247 231.566c-62.882 49.504-135.086 136.549-141.94 266.127-5.762 108.922 37.404 187.184 89.915 241.51 53.258 55.098 115.702 84.925 144.25 94.438 41.859 13.955 114.269 29.536 234.643-15.603 34.858-13.072 73.165-42.096 108.304-78.426 14.272-14.755 27.616-30.294 39.6-45.773-28.778 9.293-61.699 17.754-96.589 23.594-56.192 9.405-119.29 12.32-179.411-0.237-2.49-0.518-4.96-1.030-7.408-1.536-22.195-4.576-42.733-8.816-62.589-17.648-23.091-10.275-43.805-25.891-69.299-51.386-42.096-42.096-89.142-107.222-89.371-213.843-1.569-34.080 4.622-81.878 13.764-129.216 4.624-23.946 10.142-48.465 16.132-72.003zM345.562 138.217c32.8-17.15 63.709 15.843 53.875 45.907-12.234 37.414-24.586 85.511-33.482 131.58-9.024 46.732-13.949 88.633-12.643 114.7l0.038 0.797v0.8c0 84.915 36.173 134.918 70.627 169.373 22.509 22.509 36.835 32.278 50.064 38.166 13.229 5.885 26.832 8.717 51.085 13.763 1.923 0.4 3.917 0.816 5.978 1.248 49.914 10.426 104.534 8.336 155.76-0.237 65.434-10.954 122.384-31.981 152.374-47.386 17.562-9.021 34.992-2.47 44.477 5.965 9.661 8.589 19.376 27.152 8.886 46.954-20.637 38.95-53.645 84.419-92.182 124.259-38.211 39.51-84.317 76.038-131.834 93.859-135.626 50.858-223.216 34.438-277.354 16.394-36.515-12.173-108.392-46.912-170.026-110.675-62.381-64.534-114.684-159.427-107.81-289.373 10.79-203.979 157.583-317.098 232.165-356.093z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["moon"],"defaultCode":59790,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1062,"name":"moon","prevSize":32,"id":150,"code":59790},"setIdx":0,"setId":6,"iconIdx":150},{"icon":{"paths":["M144 160c-17.673 0-32 14.327-32 32s14.327 32 32 32h192c17.674 0 32-14.327 32-32s-14.326-32-32-32h-192zM700.4 346.646c11.795-13.165 32.026-14.272 45.187-2.48 13.162 11.795 14.272 32.026 2.477 45.187l-81.222 90.646h216.358c17.674 0 32 14.326 32 32s-14.326 32-32 32h-216.358l81.222 90.646c11.795 13.162 10.685 33.392-2.477 45.187-13.162 11.792-33.392 10.685-45.187-2.48l-129.030-144c-10.893-12.154-10.893-30.554 0-42.707l129.030-144zM112 512c0-17.674 14.327-32 32-32h192c17.674 0 32 14.326 32 32s-14.326 32-32 32h-192c-17.673 0-32-14.326-32-32zM144 640c-17.673 0-32 14.326-32 32s14.327 32 32 32h192c17.674 0 32-14.326 32-32s-14.326-32-32-32h-192zM112 352c0-17.674 14.327-32 32-32h192c17.674 0 32 14.326 32 32s-14.326 32-32 32h-192c-17.673 0-32-14.326-32-32zM144 800c-17.673 0-32 14.326-32 32s14.327 32 32 32h192c17.674 0 32-14.326 32-32s-14.326-32-32-32h-192z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["move-to-the-queue"],"defaultCode":59791,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1063,"name":"move-to-the-queue","prevSize":32,"id":151,"code":59791},"setIdx":0,"setId":6,"iconIdx":151},{"icon":{"paths":["M809.002 166.758c7.782 6.063 12.333 15.377 12.333 25.242v448h-0.112c0.074 1.734 0.112 3.478 0.112 5.229 0 69.053-57.309 125.030-128 125.030-70.694 0-128-55.978-128-125.030s57.306-125.030 128-125.030c23.312 0 45.171 6.090 64 16.73v-303.86l-384 96.798v409.136c0 69.053-57.309 125.037-128.001 125.037s-128-55.978-128-125.030c0-69.050 57.308-125.027 128-125.027 23.314 0 45.173 6.086 64 16.726v-325.777c0-14.66 9.962-27.446 24.177-31.029l448-112.93c9.568-2.411 19.709-0.276 27.491 5.788z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["musical-note"],"defaultCode":59792,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1064,"name":"musical-note","prevSize":32,"id":152,"code":59792},"setIdx":0,"setId":6,"iconIdx":152},{"icon":{"paths":["M208 176c-35.346 0-64 28.654-64 64v576c0 35.347 28.654 64 64 64h576c35.347 0 64-28.653 64-64v-576c0-35.346-28.653-64-64-64h-576zM208 240h576v576h-576v-576zM698.627 558.15c-0.189 17.674-14.669 31.846-32.339 31.658-17.674-0.189-31.846-14.669-31.658-32.339l1.318-123.594-309.341 308.774c-12.51 12.483-32.771 12.464-45.256-0.042-12.485-12.509-12.467-32.771 0.042-45.258l309.195-308.624-123.382 1.315c-17.674 0.189-32.154-13.984-32.339-31.654-0.189-17.674 13.984-32.15 31.654-32.339l201.92-2.157c8.605-0.093 16.886 3.286 22.97 9.37 6.086 6.086 9.462 14.365 9.373 22.97l-2.157 201.92z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["new-window"],"defaultCode":59793,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1065,"name":"new-window","prevSize":32,"id":153,"code":59793},"setIdx":0,"setId":6,"iconIdx":153},{"icon":{"paths":["M601.331 808.928h-174.154c0.003 48.090 38.989 87.072 87.078 87.072s87.075-38.982 87.075-87.072zM815.597 731.677c7.274 9.696 8.442 22.669 3.021 33.51s-16.499 17.69-28.621 17.69h-565.996c-12.943 0-24.611-7.798-29.564-19.757-4.953-11.955-2.215-25.718 6.937-34.87l51.653-51.654v-274.032c0-144.272 116.957-261.228 261.229-261.228s261.229 116.956 261.229 261.228v275.629l40.112 53.485zM711.485 715.894v-313.331c0-108.926-88.304-197.228-197.229-197.228-108.928 0-197.229 88.302-197.229 197.228v313.331h394.458z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["notification"],"defaultCode":59795,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1066,"name":"notification","prevSize":32,"id":154,"code":59795},"setIdx":0,"setId":6,"iconIdx":154},{"icon":{"paths":["M781.837 402.634c0-5.245-0.154-10.454-0.461-15.622l-63.539 63.539v265.363h-265.363l-66.979 66.979h425.363c12.944 0 24.611-7.795 29.565-19.754 4.954-11.955 2.214-25.722-6.938-34.874l-51.648-51.648v-273.984zM704.765 217.373l-45.254 45.255c-35.638-35.351-84.704-57.189-138.867-57.189-108.909 0-197.194 88.287-197.194 197.195v196.054l-64.001 64v-260.054c0-144.254 116.941-261.195 261.194-261.195 71.837 0 136.899 29.001 184.122 75.934zM433.578 808.934c0 48.086 38.982 87.066 87.066 87.066s87.066-38.979 87.066-87.066h-174.131zM854.275 190.982c-11.334-11.334-29.709-11.334-41.043 0l-612.732 612.733c-11.333 11.331-11.333 29.709 0 41.040 11.334 11.334 29.709 11.334 41.043 0l612.732-612.731c11.334-11.333 11.334-29.709 0-41.043z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["notification-disabled"],"defaultCode":59794,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1067,"name":"notification-disabled","prevSize":32,"id":155,"code":59794},"setIdx":0,"setId":6,"iconIdx":155},{"icon":{"paths":["M712.051 512.675v54.89c-0.195 76.736-43.741 143.283-107.44 176.445-5.53-25.67-28.362-44.906-55.683-44.906h-72.502c-31.459 0-56.963 25.501-56.963 56.963v41.427c0 31.462 25.504 56.963 56.963 56.963h72.502c28.509 0 52.128-20.944 56.307-48.288 69.261-26.829 123.962-82.883 148.966-153.030 4.723 1.27 9.69 1.946 14.813 1.946h28.483c31.459 0 56.963-25.504 56.963-56.963v-85.446c0-31.459-25.504-56.963-56.963-56.963h-28.483v-28.483c0-141.572-114.765-256.338-256.336-256.338s-256.339 114.766-256.339 256.338v23.302h-28.483c-31.46 0-56.964 25.504-56.964 56.966v103.571c0 31.459 25.504 56.963 56.964 56.963h28.482c31.46 0 56.964-25.504 56.964-56.963v-36.253h0.149c-0.099-2.576-0.148-5.165-0.148-7.766v-139.821c0-110.111 89.263-199.374 199.375-199.374s199.373 89.263 199.373 199.374v85.446z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["omnichannel"],"defaultCode":59796,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1068,"name":"omnichannel","prevSize":32,"id":156,"code":59796},"setIdx":0,"setId":6,"iconIdx":156},{"icon":{"paths":["M705.578 633.158c9.507-9.235 24.701-9.018 33.939 0.486 9.238 9.507 9.021 24.701-0.486 33.939l-208.275 202.387c-9.312 9.050-24.138 9.050-33.45 0l-208.276-202.387c-9.506-9.238-9.724-24.432-0.487-33.939 9.237-9.504 24.432-9.722 33.937-0.486l191.549 186.134 191.549-186.134zM705.578 411.584c9.507 9.238 24.701 9.021 33.939-0.486s9.021-24.701-0.486-33.939l-208.275-202.385c-9.312-9.051-24.138-9.051-33.45 0l-208.276 202.385c-9.506 9.238-9.724 24.432-0.487 33.939 9.237 9.504 24.432 9.725 33.937 0.486l191.549-186.134 191.549 186.134z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["order"],"defaultCode":59797,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1069,"name":"order","prevSize":32,"id":157,"code":59797},"setIdx":0,"setId":6,"iconIdx":157},{"icon":{"paths":["M742.317 652.566c12.666-12.323 12.944-32.582 0.618-45.248-12.323-12.669-32.582-12.944-45.251-0.621l44.634 45.869zM512 832.019l-22.317 22.934c12.422 12.086 32.211 12.086 44.634 0l-22.317-22.934zM326.317 606.698c-12.667-12.323-32.927-12.048-45.252 0.621-12.324 12.666-12.047 32.925 0.619 45.248l44.632-45.869zM697.683 606.698l-208 202.387 44.634 45.869 208-202.387-44.634-45.869zM534.317 809.085l-208-202.387-44.632 45.869 207.999 202.387 44.634-45.869z","M742.317 371.456c12.666 12.323 12.944 32.582 0.618 45.251-12.323 12.666-32.582 12.944-45.251 0.618l44.634-45.869zM512 192.004l-22.317-22.935c12.422-12.087 32.211-12.087 44.634 0l-22.317 22.935zM326.317 417.325c-12.668 12.326-32.927 12.048-45.252-0.618-12.325-12.669-12.048-32.928 0.619-45.251l44.633 45.869zM697.683 417.325l-208-202.386 44.634-45.87 208 202.387-44.634 45.869zM534.317 214.939l-208 202.386-44.633-45.869 207.999-202.387 44.634 45.87z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(158, 162, 168)","opacity":0.7}],"isMulticolor":true,"isMulticolor2":true,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":7}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":7}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":9}]},"tags":["ordering-ascending"],"defaultCode":59798,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(158, 162, 168)","opacity":0.7}],"properties":{"order":1070,"name":"ordering-ascending","prevSize":32,"codes":[59798,59799],"id":158,"code":59798},"setIdx":0,"setId":6,"iconIdx":158},{"icon":{"paths":["M281.684 371.434c-12.667 12.323-12.944 32.582-0.619 45.248 12.324 12.669 32.584 12.944 45.252 0.621l-44.633-45.869zM512 191.981l22.317-22.935c-12.422-12.087-32.211-12.087-44.634 0l22.317 22.935zM697.683 417.302c12.669 12.323 32.928 12.048 45.251-0.621 12.326-12.666 12.048-32.925-0.618-45.248l-44.634 45.869zM326.317 417.302l208-202.387-44.634-45.869-207.999 202.387 44.633 45.869zM489.683 214.916l208 202.387 44.634-45.869-208-202.387-44.634 45.869z","M281.684 652.544c-12.667-12.323-12.944-32.582-0.619-45.251 12.324-12.666 32.584-12.944 45.252-0.618l-44.633 45.869zM512 831.997l22.317 22.934c-12.422 12.086-32.211 12.086-44.634 0l22.317-22.934zM697.683 606.675c12.669-12.326 32.928-12.048 45.251 0.618 12.326 12.669 12.048 32.928-0.618 45.251l-44.634-45.869zM326.317 606.675l208 202.384-44.634 45.872-207.999-202.387 44.633-45.869zM489.683 809.059l208-202.384 44.634 45.869-208 202.387-44.634-45.872z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(158, 162, 168)","opacity":0.7}],"isMulticolor":true,"isMulticolor2":true,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":7}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":7}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":9}]},"tags":["ordering-descending"],"defaultCode":59800,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(158, 162, 168)","opacity":0.7}],"properties":{"order":1071,"name":"ordering-descending","prevSize":32,"codes":[59800,59801],"id":159,"code":59800},"setIdx":0,"setId":6,"iconIdx":159},{"icon":{"paths":["M864 512c0-194.404-157.597-352-352-352-194.405 0-352.001 157.596-352.001 352s157.596 352 352.001 352c194.403 0 352-157.597 352-352zM928 512c0 229.75-186.25 416-416 416-229.752 0-416.001-186.25-416.001-416s186.25-416 416.001-416c229.75 0 416 186.25 416 416zM399.997 383.994v256c0 17.674 14.326 32 32 32s32-14.326 32-32v-256c0-17.67-14.326-32-32-32s-32 14.33-32 32zM559.997 383.994v256c0 17.674 14.326 32 32 32s32-14.326 32-32v-256c0-17.67-14.326-32-32-32s-32 14.33-32 32z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["pause"],"defaultCode":59803,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1072,"name":"pause","prevSize":32,"id":160,"code":59803},"setIdx":0,"setId":6,"iconIdx":160},{"icon":{"paths":["M512 928c229.75 0 416-186.25 416-416s-186.25-416-416-416c-229.752 0-416.001 186.25-416.001 416s186.25 416 416.001 416zM399.997 383.994c0-17.67 14.326-32 32-32s32 14.33 32 32v256c0 17.674-14.326 32-32 32s-32-14.326-32-32v-256zM559.997 383.994c0-17.67 14.326-32 32-32s32 14.33 32 32v256c0 17.674-14.326 32-32 32s-32-14.326-32-32v-256z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["pause-filled"],"defaultCode":59802,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1073,"name":"pause-filled","prevSize":32,"id":161,"code":59802},"setIdx":0,"setId":6,"iconIdx":161},{"icon":{"paths":["M822.627 201.372c12.496 12.497 12.496 32.758 0 45.255l-576 576c-12.497 12.496-32.758 12.496-45.255 0s-12.497-32.758 0-45.254l576-576c12.496-12.497 32.758-12.497 45.254 0z","M192 320c0-70.692 57.308-128 128-128 70.691 0 128 57.308 128 128 0 70.691-57.309 128-128 128-70.692 0-128-57.309-128-128zM320 256c-35.346 0-64 28.654-64 64s28.654 64 64 64c35.347 0 64-28.653 64-64s-28.653-64-64-64z","M704 576c-70.691 0-128 57.309-128 128s57.309 128 128 128c70.691 0 128-57.309 128-128s-57.309-128-128-128zM640 704c0-35.347 28.653-64 64-64s64 28.653 64 64c0 35.347-28.653 64-64 64s-64-28.653-64-64z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["percentage"],"defaultCode":59777,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1074,"id":162,"name":"percentage","prevSize":32,"code":59777},"setIdx":0,"setId":6,"iconIdx":162},{"icon":{"paths":["M410.502 204.616c-10.419-21.362-34.202-37.856-62.189-33.137-38.104 6.425-88.825 25.194-126.247 57.060-18.972 16.155-35.817 36.795-44.757 62.246-9.15 26.048-9.211 54.919 2.087 85.195 21.202 56.816 60.513 117.456 97.761 167.264 37.482 50.122 74.609 91.552 93.329 110.269l44.173-44.173c-16.406-16.403-51.6-55.536-87.472-103.51-36.11-48.285-71.192-103.264-89.264-151.69-6.437-17.248-5.748-31.056-1.675-42.651 4.283-12.192 13.134-24.16 26.319-35.388 25.849-22.012 63.292-36.814 92.623-42.392l59.075 121.097c0.019 0.074 0.045 0.285-0.013 0.688-0.112 0.749-0.502 1.827-1.344 2.883-7.117 8.95-14.899 20-20.941 31.741-5.674 11.024-11.715 26.246-10.976 42.47 0.643 14.138 7.76 27.773 13.222 36.973 6.275 10.576 14.416 21.741 22.79 32.291 16.806 21.171 36.541 42.326 49.68 55.466l44.173-44.173c-11.952-11.952-29.981-31.309-44.928-50.134-7.504-9.453-13.738-18.157-17.997-25.334-2.87-4.838-3.984-7.578-4.387-8.57l-0.038-0.093c0.266-1.382 1.139-4.736 4.006-10.31 3.552-6.902 8.717-14.438 14.291-21.443 14.611-18.374 20.518-45.424 8.611-69.837l-59.914-122.808zM819.386 613.504c21.36 10.419 37.856 34.202 33.136 62.189-6.426 38.106-25.194 88.826-57.059 126.246-16.157 18.973-36.797 35.818-62.246 44.758-26.048 9.149-54.922 9.21-85.197-2.086-56.813-21.203-117.453-60.515-167.261-97.763-50.122-37.482-91.555-74.608-110.272-93.328l44.173-44.173c16.403 16.406 55.539 51.6 103.51 87.472 48.285 36.109 103.267 71.194 151.69 89.264 17.248 6.435 31.056 5.747 42.653 1.674 12.192-4.282 24.16-13.133 35.386-26.317 22.013-25.85 36.816-63.293 42.394-92.624l-121.094-59.075c-0.077-0.019-0.288-0.048-0.688 0.013-0.752 0.112-1.83 0.502-2.886 1.344-8.95 7.117-20 14.899-31.741 20.941-11.024 5.674-26.246 11.715-42.47 10.976-14.134-0.643-27.773-7.76-36.973-13.222-10.576-6.275-21.741-14.416-32.288-22.79-21.174-16.806-42.33-36.541-55.469-49.68l44.173-44.173c11.952 11.952 31.309 29.981 50.134 44.928 9.453 7.504 18.16 13.738 25.334 17.997 4.838 2.87 7.578 3.984 8.57 4.387l0.093 0.038c1.382-0.266 4.739-1.139 10.314-4.006 6.899-3.552 14.435-8.717 21.44-14.291 18.374-14.611 45.427-20.518 69.837-8.611l122.81 59.914z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["phone"],"defaultCode":59806,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1075,"name":"phone","prevSize":32,"id":163,"code":59806},"setIdx":0,"setId":6,"iconIdx":163},{"icon":{"paths":["M825.373 153.372c12.496-12.497 32.758-12.497 45.254 0s12.496 32.758 0 45.255l-672 672c-12.497 12.496-32.758 12.496-45.255 0s-12.497-32.758 0-45.254l672-672zM575.613 569.069l-44.707 44.707c7.846 5.904 15.846 11.453 23.533 16.016 9.2 5.459 22.838 12.579 36.973 13.222 16.224 0.736 31.446-5.302 42.47-10.976 11.741-6.042 22.79-13.824 31.744-20.944 1.053-0.838 2.134-1.232 2.883-1.341 0.403-0.061 0.611-0.032 0.688-0.013l121.094 59.075c-5.578 29.331-20.381 66.771-42.39 92.621-11.229 13.187-23.197 22.038-35.389 26.32-11.597 4.074-25.402 4.762-42.653-1.677-48.422-18.070-103.405-53.152-151.69-89.261-14.026-10.49-27.299-20.922-39.469-30.842l-44.387 44.39c14.186 11.683 29.84 24.061 46.445 36.48 49.808 37.248 110.448 76.56 167.261 97.76 30.275 11.299 59.149 11.238 85.197 2.086 25.45-8.938 46.090-25.786 62.246-44.755 31.866-37.424 50.634-88.144 57.059-126.246 4.72-27.987-11.776-51.77-33.136-62.192l-122.81-59.91c-24.41-11.907-51.462-6-69.834 8.611-7.008 5.571-14.544 10.739-21.443 14.291-5.574 2.867-8.931 3.741-10.314 4.003l-0.093-0.038c-0.992-0.4-3.731-1.514-8.57-4.387-3.277-1.942-6.87-4.301-10.71-7.002zM313.636 589.683l44.389-44.387c-9.92-12.17-20.349-25.44-30.838-39.466-36.109-48.285-71.192-103.267-89.263-151.69-6.437-17.251-5.748-31.056-1.675-42.652 4.283-12.192 13.134-24.16 26.319-35.388 25.849-22.012 63.291-36.814 92.622-42.392l59.075 121.095c0.019 0.077 0.048 0.285-0.013 0.688-0.109 0.752-0.502 1.83-1.341 2.883-7.12 8.954-14.902 20.003-20.944 31.744-5.674 11.024-11.715 26.246-10.976 42.47 0.643 14.134 7.763 27.773 13.222 36.973 4.563 7.686 10.109 15.683 16.013 23.53l44.707-44.707c-2.701-3.837-5.056-7.434-7.002-10.707-2.87-4.838-3.984-7.578-4.387-8.57l-0.038-0.093c0.266-1.382 1.139-4.739 4.006-10.314 3.552-6.899 8.72-14.435 14.291-21.443 14.611-18.371 20.518-45.424 8.611-69.834l-59.91-122.809c-10.422-21.362-34.205-37.856-62.192-33.137-38.103 6.425-88.824 25.194-126.246 57.060-18.972 16.155-35.817 36.795-44.757 62.246-9.15 26.048-9.211 54.921 2.087 85.196 21.202 56.813 60.513 117.453 97.761 167.261 12.417 16.605 24.795 32.256 36.478 46.442z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["phone-disabled"],"defaultCode":59804,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1076,"name":"phone-disabled","prevSize":32,"id":164,"code":59804},"setIdx":0,"setId":6,"iconIdx":164},{"icon":{"paths":["M801.123 657.59c22.474 7.734 50.954 2.582 67.408-20.544 22.4-31.488 44.992-80.624 48.922-129.619 1.99-24.838-0.691-51.344-12.368-75.661-11.949-24.89-32.32-45.35-61.718-58.768-55.165-25.181-125.84-40.262-187.398-49.146-61.946-8.936-117.494-11.98-143.965-11.98v62.469c23.2 0 75.757 2.787 135.043 11.341 59.677 8.611 123.36 22.682 170.381 44.144 16.749 7.645 26.022 17.894 31.344 28.973 5.59 11.651 7.795 26.371 6.413 43.635-2.717 33.843-18.723 70.784-35.52 95.469l-127.398-43.853c-0.067-0.042-0.237-0.17-0.48-0.496-0.451-0.608-0.934-1.651-1.088-2.989-1.296-11.363-3.606-24.678-7.635-37.254-3.786-11.808-10.278-26.842-22.272-37.792-10.451-9.539-25.126-14.15-35.494-16.794-11.914-3.040-25.568-5.181-38.944-6.717-26.858-3.088-55.773-4.093-74.352-4.093v62.47c16.902 0 43.338 0.938 67.219 3.683 11.99 1.379 22.554 3.123 30.64 5.187 5.45 1.389 8.173 2.541 9.162 2.957l0.093 0.038c0.79 1.165 2.544 4.154 4.458 10.125 2.368 7.392 4.045 16.374 5.059 25.267 2.659 23.325 17.61 46.63 43.29 55.469l129.203 44.477zM222.875 657.584c-22.474 7.738-50.954 2.586-67.407-20.544-22.4-31.485-44.993-80.621-48.922-129.616-1.992-24.838 0.691-51.344 12.366-75.664 11.949-24.886 32.321-45.347 61.719-58.765 55.165-25.181 125.841-40.262 187.4-49.146 61.946-8.937 117.494-11.98 143.965-11.98v62.47c-23.2 0-75.757 2.787-135.046 11.341-59.674 8.608-123.358 22.682-170.378 44.144-16.748 7.645-26.024 17.894-31.343 28.973-5.593 11.651-7.797 26.371-6.412 43.635 2.714 33.843 18.721 70.784 35.518 95.469l127.4-43.856c0.067-0.038 0.234-0.166 0.477-0.493 0.454-0.611 0.938-1.651 1.091-2.989 1.296-11.363 3.606-24.682 7.635-37.254 3.786-11.808 10.275-26.842 22.272-37.792 10.448-9.542 25.126-14.15 35.491-16.794 11.917-3.040 25.568-5.181 38.947-6.717 26.858-3.088 55.77-4.093 74.349-4.093v62.47c-16.899 0-43.338 0.938-67.216 3.683-11.99 1.376-22.554 3.123-30.64 5.187-5.453 1.389-8.176 2.541-9.162 2.957l-0.093 0.038c-0.79 1.162-2.547 4.154-4.458 10.125-2.371 7.389-4.045 16.371-5.059 25.267-2.659 23.322-17.61 46.627-43.293 55.469l-129.202 44.474z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["phone-end"],"defaultCode":59805,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1077,"name":"phone-end","prevSize":32,"id":165,"code":59805},"setIdx":0,"setId":6,"iconIdx":165},{"icon":{"paths":["M717.254 352l137.37-137.372c12.499-12.497 12.499-32.758 0-45.255-12.496-12.497-32.755-12.497-45.254 0l-137.373 137.373v-82.745c0-17.673-14.326-32-32-32-17.67 0-32 14.327-32 32v160c0 4.339 0.864 8.477 2.429 12.25 1.526 3.686 3.773 7.149 6.736 10.166 0.138 0.141 0.278 0.282 0.419 0.419 3.018 2.966 6.48 5.21 10.17 6.736 3.773 1.565 7.91 2.429 12.246 2.429h160c17.674 0 32-14.326 32-32s-14.326-32-32-32h-82.742z","M819.478 613.379l-122.88-59.84c-11.261-5.29-23.786-7.283-36.128-5.757-12.346 1.53-24.003 6.522-33.632 14.397-6.816 5.274-13.978 10.086-21.44 14.4-3.382 1.632-6.922 2.918-10.56 3.84-3.008-1.235-5.901-2.736-8.64-4.48-8.752-5.504-17.19-11.488-25.28-17.92-18.88-15.040-38.080-32-50.24-44.8s-29.76-32-44.8-50.24c-6.435-8.093-12.416-16.531-17.92-25.28-1.747-2.742-3.248-5.635-4.48-8.64 0.918-3.642 2.205-7.181 3.84-10.56 4.314-7.462 9.123-14.627 14.4-21.44 7.875-9.629 12.864-21.29 14.394-33.635 1.53-12.342-0.467-24.867-5.754-36.125l-59.84-122.881c-5.635-11.286-14.73-20.477-25.952-26.234-11.226-5.756-23.997-7.776-36.448-5.766-46.072 7.753-89.44 27.015-126.081 56-20.379 16.952-35.847 39.050-44.8 64-9.479 27.726-8.684 57.931 2.24 85.121 25.032 59.536 57.851 115.491 97.6 166.4 28.686 38.71 59.902 75.485 93.441 110.080 34.406 33.296 70.966 64.298 109.44 92.8 51.203 39.821 107.485 72.643 167.36 97.6 27.158 11.066 57.418 11.862 85.12 2.24 24.368-9.203 45.888-24.653 62.4-44.8 29.328-36.544 48.925-79.92 56.96-126.080 1.984-12.49-0.083-25.286-5.901-36.515-5.814-11.229-15.075-20.301-26.419-25.885zM747.798 761.219c-9.187 11.802-21.331 20.963-35.2 26.56-14.051 4.416-29.197 3.85-42.88-1.6-54.202-23.091-105.187-53.101-151.68-89.28-35.83-27.52-69.923-57.232-102.080-88.96-31.334-32.611-60.618-67.13-87.68-103.36-36.201-46.426-66.113-97.427-88.961-151.68-5.832-13.587-6.514-28.829-1.92-42.881 5.595-13.87 14.757-26.014 26.56-35.2 26.691-20.806 57.953-34.956 91.201-41.28l60.8 121.281c0.154 0.954 0.154 1.926 0 2.88-7.933 9.981-14.899 20.698-20.8 32-7.347 12.966-11.101 27.658-10.88 42.56 1.354 13.142 5.853 25.763 13.12 36.8 6.934 11.104 14.522 21.789 22.72 32 16.96 21.12 36.48 42.56 49.6 55.68s34.56 32 55.68 49.6c10.208 8.198 20.893 15.782 32 22.72 11.034 7.264 23.658 11.763 36.8 13.12 14.899 0.218 29.59-3.536 42.56-10.88 11.302-5.904 22.016-12.867 32-20.8 0.851-0.707 1.827-1.251 2.88-1.6l118.72 59.84c-6.509 33.811-21.11 65.542-42.56 92.48z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{},{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{},{}]},"tags":["phone-in"],"grid":0},"attrs":[{},{}],"properties":{"order":1078,"id":166,"name":"phone-in","prevSize":32,"code":59809},"setIdx":0,"setId":6,"iconIdx":166},{"icon":{"paths":["M649.373 137.372c12.496-12.497 32.758-12.497 45.254 0l73.373 73.373 73.373-73.373c12.499-12.497 32.758-12.497 45.254 0 12.499 12.497 12.499 32.758 0 45.255l-73.373 73.372 73.373 73.373c12.499 12.496 12.499 32.758 0 45.254-12.496 12.496-32.755 12.496-45.254 0l-73.373-73.372-73.373 73.372c-12.496 12.496-32.755 12.496-45.254 0-12.496-12.496-12.496-32.758 0-45.254l73.373-73.373-73.373-73.372c-12.496-12.497-12.496-32.758 0-45.255zM361.062 167.708c28.672-4.835 53.037 12.064 63.712 33.949l61.379 125.818c12.202 25.008 6.147 52.72-8.822 71.546-5.706 7.178-11.002 14.899-14.64 21.968-2.938 5.712-3.834 9.149-4.102 10.563 0.378 0.928 1.494 3.754 4.534 8.877 4.362 7.35 10.749 16.269 18.438 25.952 15.312 19.29 33.782 39.12 46.026 51.363s32.077 30.717 51.363 46.029c9.683 7.69 18.602 14.077 25.955 18.442 5.12 3.040 7.946 4.154 8.874 4.534 1.414-0.272 4.854-1.165 10.563-4.106 7.069-3.638 14.79-8.931 21.968-14.64 18.822-14.97 46.538-21.021 71.546-8.822l125.818 61.379c21.885 10.678 38.784 35.040 33.949 63.715-6.582 39.037-25.811 90.998-58.458 129.338-16.55 19.437-37.696 36.694-63.773 45.856-26.685 9.373-56.266 9.437-87.283-2.141-58.205-21.722-120.33-61.997-171.36-100.16-51.347-38.4-93.795-76.438-112.973-95.616s-57.213-61.622-95.613-112.973c-38.16-51.027-78.435-113.152-100.156-171.357-11.575-31.018-11.513-60.598-2.138-87.284 9.159-26.075 26.417-47.22 45.854-63.771 38.339-32.647 90.303-51.876 129.34-58.458zM368.106 231.463c-30.048 5.715-68.407 20.88-94.89 43.431-13.508 11.503-22.577 23.764-26.964 36.255-4.173 11.878-4.878 26.025 1.716 43.696 18.514 49.61 54.456 105.939 91.45 155.408 36.752 49.146 72.806 89.238 89.613 106.045 16.81 16.81 56.902 52.864 106.048 89.619 49.469 36.995 105.798 72.938 155.408 91.453 17.67 6.592 31.818 5.888 43.696 1.715 12.49-4.387 24.752-13.456 36.256-26.963 22.55-26.483 37.715-64.842 43.43-94.893l-124.064-60.522c-0.077-0.019-0.291-0.048-0.704 0.013-0.768 0.112-1.875 0.515-2.954 1.376-9.171 7.293-20.493 15.264-32.518 21.456-11.296 5.811-26.89 12-43.514 11.245-14.483-0.659-28.454-7.955-37.878-13.549-10.835-6.432-22.275-14.771-33.082-23.35-21.69-17.222-43.363-37.44-56.822-50.899s-33.677-35.133-50.896-56.826c-8.579-10.803-16.918-22.246-23.35-33.078-5.594-9.427-12.886-23.398-13.546-37.878-0.755-16.624 5.434-32.218 11.245-43.514 6.189-12.026 14.163-23.347 21.456-32.518 0.858-1.078 1.261-2.186 1.376-2.954 0.061-0.413 0.032-0.627 0.013-0.704l-60.525-124.063z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["phone-issue"],"grid":0},"attrs":[{}],"properties":{"order":1079,"id":167,"name":"phone-issue","prevSize":32,"code":59835},"setIdx":0,"setId":6,"iconIdx":167},{"icon":{"paths":["M428.346 199.399c17.542-17.543 45.984-17.543 63.53 0 17.542 17.543 17.542 45.986 0 63.53l-43.661 43.659 177.83 177.828 60.339-60.339c24.992-24.995 65.517-24.995 90.509 0l45.254 45.254-331.869 331.869-45.254-45.254c-24.992-24.995-24.992-65.517 0-90.509l60.339-60.339-177.827-177.83-43.661 43.661c-17.543 17.542-45.987 17.542-63.53 0s-17.543-45.987 0-63.53l208.001-207.999zM175.090 362.144c-42.537 42.538-42.537 111.501 0 154.038 42.001 42.003 109.771 42.531 152.42 1.587l87.334 87.334-15.075 15.075c-49.987 49.987-49.987 131.034 0 181.021l67.882 67.882c12.496 12.496 32.758 12.496 45.254 0l167.936-167.933 88.013 92.003c12.218 12.771 32.474 13.219 45.245 1.002 12.771-12.214 13.219-32.47 1.002-45.242l-88.995-93.030 163.923-163.923c12.499-12.496 12.499-32.758 0-45.254l-67.882-67.882c-49.987-49.987-131.030-49.987-181.018 0l-15.907 15.907-87.325-87.323c41.766-42.596 41.51-110.983-0.768-153.262-42.538-42.537-111.504-42.537-154.042 0l-207.998 208z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["pin"],"defaultCode":59808,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1080,"name":"pin","prevSize":32,"id":168,"code":59808},"setIdx":0,"setId":6,"iconIdx":168},{"icon":{"paths":["M512.608 128.019c-72.378-1.376-144.906 25.78-199.307 80.524-54.654 54.999-89.301 136.056-89.301 239.464 0 80.234 44.5 174.87 97.546 252.806 53.066 77.965 120.829 148.157 176.141 175.821l15.194 7.6 14.81-8.326c217.158-122.154 272.31-333.882 272.31-427.898 0-101.731-27.923-181.776-80.179-236.932-52.346-55.248-125.296-81.503-207.213-83.060zM288 448.006c0-88.589 29.353-152.745 70.698-194.351 41.6-41.862 97.072-62.705 152.694-61.648 68.992 1.311 124.038 23.054 161.968 63.088 38.019 40.126 62.64 102.649 62.64 192.914 0 74.55-44.691 253.677-224.176 363.030-39.683-25.61-92.186-79.853-137.37-146.237-50.954-74.864-86.454-156.221-86.454-216.797zM544 416c0-17.674-14.326-32-32-32s-32 14.326-32 32c0 17.674 14.326 32 32 32s32-14.326 32-32zM608 416c0 53.021-42.979 96-96 96s-96-42.979-96-96c0-53.021 42.979-96 96-96s96 42.979 96 96z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["pin-map"],"defaultCode":59807,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1081,"name":"pin-map","prevSize":32,"id":169,"code":59807},"setIdx":0,"setId":6,"iconIdx":169},{"icon":{"paths":["M864 512c0-194.404-157.597-352-352-352s-352 157.596-352 352c0 194.403 157.596 352 352 352s352-157.597 352-352zM928 512c0 229.75-186.25 416-416 416s-416-186.25-416-416c0-229.75 186.25-416 416-416s416 186.25 416 416zM451.85 357.187l195.254 136.768c14.208 9.949 18.496 30.87 9.581 46.726-2.432 4.326-5.706 7.981-9.581 10.694l-195.254 136.768c-14.208 9.952-32.954 5.165-41.869-10.694-3.037-5.398-4.646-11.642-4.646-18.016v-273.536c0-18.723 13.597-33.898 30.371-33.898 5.709 0 11.306 1.798 16.144 5.187z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["play"],"defaultCode":59811,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1082,"name":"play","prevSize":32,"id":170,"code":59811},"setIdx":0,"setId":6,"iconIdx":170},{"icon":{"paths":["M512 928.003c229.75 0 416-186.25 416-416s-186.25-415.999-416-415.999c-229.75 0-416 186.25-416 415.999s186.25 416 416 416zM451.846 357.19l195.258 136.768c14.205 9.952 18.496 30.874 9.578 46.73-2.429 4.323-5.706 7.978-9.578 10.691l-195.258 136.768c-14.205 9.952-32.95 5.165-41.866-10.691-3.037-5.398-4.646-11.645-4.646-18.019v-273.536c0-18.72 13.597-33.894 30.368-33.894 5.712 0 11.309 1.795 16.144 5.184z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["play-filled"],"defaultCode":59810,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1083,"name":"play-filled","prevSize":32,"id":171,"code":59810},"setIdx":0,"setId":6,"iconIdx":171},{"icon":{"paths":["M325.686 430.88l224.49 224.49-126.118 126.118-224.491-224.49 126.12-126.118zM370.941 385.626l192.115-192.117 224.49 224.491-192.115 192.115-224.49-224.49zM585.683 125.627c-12.496-12.497-32.758-12.497-45.254 0l-408.745 408.745c-12.497 12.496-12.497 32.758 0 45.254l269.746 269.747c5.229 5.229 11.818 8.269 18.63 9.123v0.067h0.57c2.278 0.243 4.576 0.243 6.851 0h440.579c17.674 0 32-14.33 32-32 0-17.674-14.326-32.003-32-32.003h-366.566l353.936-353.933c12.496-12.496 12.496-32.758 0-45.254l-269.747-269.746z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["prune"],"defaultCode":59817,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1084,"name":"prune","prevSize":32,"id":172,"code":59817},"setIdx":0,"setId":6,"iconIdx":172},{"icon":{"paths":["M230.486 636.688c-14.92-9.472-34.694-5.056-44.167 9.862-9.473 14.922-5.057 34.694 9.862 44.166l298.666 189.632c10.47 6.646 23.837 6.646 34.304 0l298.669-189.632c14.918-9.472 19.334-29.245 9.862-44.166-9.475-14.918-29.248-19.334-44.166-9.862l-281.517 178.739-281.514-178.739zM186.319 494.848c9.473-14.922 29.247-19.334 44.167-9.862l281.514 178.739 281.517-178.739c14.918-9.472 34.691-5.059 44.166 9.862 9.472 14.918 5.056 34.694-9.862 44.166l-298.669 189.632c-10.467 6.646-23.834 6.646-34.304 0l-298.666-189.632c-14.92-9.472-19.335-29.248-9.862-44.166zM529.152 143.657l298.669 189.629c9.245 5.872 14.848 16.064 14.848 27.014 0 10.954-5.603 21.146-14.848 27.014l-298.669 189.632c-10.467 6.646-23.834 6.646-34.304 0l-298.666-189.632c-9.246-5.869-14.848-16.061-14.848-27.014 0-10.95 5.602-21.142 14.848-27.014l298.666-189.629c10.47-6.647 23.837-6.647 34.304 0zM273.035 360.301l238.965 151.725 238.966-151.725-238.966-151.724-238.965 151.724z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["queue"],"defaultCode":59818,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1085,"name":"queue","prevSize":32,"id":173,"code":59818},"setIdx":0,"setId":6,"iconIdx":173},{"icon":{"paths":["M161.352 800c-11.706 0-22.477-6.39-28.087-16.666s-5.161-22.79 1.169-32.64l112.304-174.694h-69.387c-17.673 0-32-14.326-32-32v-288c0-17.673 14.327-32 32-32h255.999c17.674 0 32 14.327 32 32v288c0 6.138-1.763 12.144-5.082 17.306l-143.999 224c-5.888 9.158-16.029 14.694-26.918 14.694h-128zM332.269 561.306l-112.304 174.694h51.916l129.469-201.398v-246.602h-191.999v224h96c11.706 0 22.479 6.39 28.085 16.666 5.61 10.275 5.162 22.79-1.168 32.64zM577.35 800c-11.706 0-22.477-6.39-28.086-16.666s-5.162-22.79 1.171-32.64l112.304-174.694h-69.389c-17.67 0-32-14.326-32-32v-288c0-17.673 14.33-32 32-32h256c17.674 0 32 14.327 32 32v288c0 6.138-1.763 12.144-5.082 17.306l-144 224c-5.888 9.158-16.029 14.694-26.918 14.694h-128zM748.269 561.306l-112.304 174.694h51.917l129.469-201.398v-246.602h-192v224h96c11.706 0 22.48 6.39 28.086 16.666 5.61 10.275 5.162 22.79-1.168 32.64z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["quote"],"defaultCode":59819,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1086,"name":"quote","prevSize":32,"id":174,"code":59819},"setIdx":0,"setId":6,"iconIdx":174},{"icon":{"paths":["M800 560c0 176.73-143.27 320-320 320-176.731 0-320-143.27-320-320s143.269-320 320-320v-64c-212.077 0-384 171.923-384 384s171.923 384 384 384c212.077 0 384-171.923 384-384 0-10.778-0.445-21.45-1.315-32h-64.266c1.046 10.525 1.581 21.2 1.581 32zM800 128c0-17.673-14.326-32-32-32s-32 14.327-32 32v112h-112c-17.674 0-32 14.327-32 32s14.326 32 32 32h112v112c0 17.674 14.326 32 32 32s32-14.326 32-32v-112h112c17.674 0 32-14.327 32-32s-14.326-32-32-32h-112v-112zM384 528c35.347 0 64-28.653 64-64s-28.653-64-64-64c-35.347 0-64 28.653-64 64s28.653 64 64 64zM640 464c0 35.347-28.653 64-64 64s-64-28.653-64-64c0-35.347 28.653-64 64-64s64 28.653 64 64zM329.805 605.075c-10.451-14.25-30.477-17.331-44.728-6.88s-17.333 30.477-6.882 44.73c37.658 51.35 77.754 84.624 119.178 102.662 41.741 18.179 82.797 19.99 120.362 11.651 73.469-16.307 132.211-70.87 164.070-114.314 10.451-14.253 7.37-34.278-6.88-44.73-14.253-10.451-34.278-7.37-44.73 6.88-26.81 36.557-73.664 77.994-126.33 89.686-25.501 5.661-52.643 4.474-80.938-7.85-28.608-12.461-60.381-37.187-93.123-81.837z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["reaction-add"],"defaultCode":59820,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1087,"name":"reaction-add","prevSize":32,"id":175,"code":59820},"setIdx":0,"setId":6,"iconIdx":175},{"icon":{"paths":["M832 512c0-176.73-143.27-320-320-320s-320 143.27-320 320c0 176.73 143.27 320 320 320s320-143.27 320-320zM896 512c0 212.077-171.923 384-384 384s-384-171.923-384-384c0-212.077 171.923-384 384-384s384 171.923 384 384zM512 704c-106.038 0-192-85.962-192-192s85.962-192 192-192c106.038 0 192 85.962 192 192s-85.962 192-192 192z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["record"],"defaultCode":59821,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1088,"name":"record","prevSize":32,"id":176,"code":59821},"setIdx":0,"setId":6,"iconIdx":176},{"icon":{"paths":["M896 512h-63.984c0-175.414-145.754-320-328.518-320-115.27 0-215.818 57.513-274.362 144h110.768c17.674 0 32 14.326 32 32s-14.326 32-32 32h-179.904c-17.673 0-32-14.326-32-32v-192c0-17.673 14.327-32 32-32s32 14.327 32 32v102.32c71.751-91.401 184.589-150.32 311.498-150.32 216.781 0 392.502 171.923 392.502 384 0 1.114 0.010 2.227 0 3.338v-3.338z","M127.997 512h63.986c0 175.414 145.751 320 328.519 320 115.27 0 215.818-57.514 274.358-144h-110.768c-17.67 0-32-14.326-32-32s14.33-32 32-32h179.907c17.67 0 32 14.326 32 32v192c0 17.674-14.33 32-32 32-17.674 0-32-14.326-32-32v-102.32c-71.754 91.402-184.592 150.32-311.498 150.32-216.782 0-392.505-171.923-392.505-384 0-1.082-0.009-2.166 0-3.245v3.245z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["refresh"],"defaultCode":59822,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1089,"name":"refresh","prevSize":32,"id":177,"code":59822},"setIdx":0,"setId":6,"iconIdx":177},{"icon":{"paths":["M565.802 233.862l-97.261 97.261h-187.521l-0.456 0.003c-14.696 0.208-28.717 6.186-39.042 16.637l-97.095 96.797-0.048 0.048c-7.165 7.174-12.248 16.157-14.707 25.994-2.459 9.834-2.202 20.154 0.745 29.856 2.946 9.699 8.471 18.419 15.984 25.226 7.506 6.8 16.746 11.443 26.678 13.424l125.65 25.19c5.103 1.024 10.166 0.771 14.859-0.538l162.866 162.867c1.987 1.987 4.17 3.654 6.483 5.011l22.88 114.128c1.981 9.936 6.618 19.146 13.418 26.653 6.81 7.514 15.526 13.037 25.229 15.984s20.019 3.203 29.856 0.746c9.837-2.461 18.819-7.542 25.994-14.707l96.842-97.146c10.451-10.323 16.432-24.346 16.64-39.040l0.003-0.454v-193.802c0-2.893-0.384-5.693-1.104-8.358l77.443-77.44c110.522-110.525 110.474-223.191 103.152-273.759-1.862-13.592-8.122-26.204-17.824-35.908s-22.317-15.962-35.907-17.823c-50.57-7.321-163.235-7.371-273.757 103.151zM611.056 279.117c92.138-92.138 182.144-90.373 218.947-85.121 5.254 36.804 7.018 126.811-85.12 218.948l-245.798 245.802-133.83-133.827 245.802-245.802zM404.541 395.123l-104.222 104.221-100.071-20.064 84.42-84.157h119.873zM542.89 705.446l106.909-106.906v135.61l-84.16 84.422-22.266-111.062c-0.138-0.698-0.301-1.386-0.483-2.064z","M286.325 699.699c15.297-8.851 20.524-28.426 11.674-43.725-8.85-15.296-28.426-20.522-43.723-11.674-49.486 28.63-72.438 77.786-83.25 115.523-5.52 19.267-8.252 36.813-9.619 49.539-0.687 6.397-1.037 11.661-1.217 15.424-0.090 1.885-0.137 3.402-0.162 4.499l-0.023 1.334-0.004 0.422-0.001 0.15v0.083c0 8.486 3.372 16.65 9.372 22.65 6.001 6.003 14.14 9.373 22.628 9.373v-32c0 32 0.037 32 0.048 32h0.208l0.424-0.003 1.333-0.022c1.099-0.026 2.614-0.074 4.498-0.163 3.764-0.179 9.029-0.528 15.425-1.216 12.727-1.366 30.272-4.099 49.54-9.619 37.739-10.813 86.892-33.763 115.523-83.251 8.851-15.296 3.622-34.87-11.674-43.722s-34.874-3.626-43.725 11.674c-16.669 28.813-47.164 45.011-77.751 53.776-6.095 1.744-12.005 3.139-17.55 4.25 1.111-5.546 2.505-11.456 4.251-17.549 8.763-30.589 24.961-61.085 53.775-77.754zM192 831.299l-32-0.022c0 0.013 0 0.022 32 0.022z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["rocket"],"defaultCode":59816,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1090,"id":178,"name":"rocket","prevSize":32,"code":59816},"setIdx":0,"setId":6,"iconIdx":178},{"icon":{"paths":["M713.718 450.362c0-142.689-115.824-258.362-258.701-258.362-142.878 0-258.704 115.673-258.704 258.362 0 142.691 115.826 258.365 258.704 258.365 142.877 0 258.701-115.674 258.701-258.365zM659.302 699.965c-55.645 45.475-126.774 72.762-204.285 72.762-178.271 0-322.788-144.326-322.788-322.365 0-178.035 144.517-322.362 322.788-322.362 178.269 0 322.787 144.327 322.787 322.362 0 77.408-27.318 148.442-72.854 204.013l186.838 186.592c12.608 12.589 12.608 33.002 0 45.59-12.605 12.589-33.043 12.589-45.648 0l-186.838-186.592z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["search"],"defaultCode":59823,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1091,"name":"search","prevSize":32,"id":179,"code":59823},"setIdx":0,"setId":6,"iconIdx":179},{"icon":{"paths":["M878.022 192.974c7.85 9.521 9.526 22.708 4.31 33.891l-298.669 640.002c-5.69 12.195-18.403 19.526-31.811 18.342-13.405-1.184-24.637-10.627-28.106-23.632l-81.619-306.070-285.772-142.886c-11.978-5.987-18.959-18.8-17.498-32.112s11.056-24.307 24.048-27.552l682.665-170.668c11.974-2.993 24.598 1.165 32.451 10.686zM505.821 545.968l57.082 214.051 233.027-499.35-533.58 133.395 203.606 101.802 69.51-52.131c14.141-10.605 34.198-7.741 44.8 6.4 10.605 14.138 7.741 34.195-6.4 44.8l-68.045 51.034z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["send"],"defaultCode":59825,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1092,"name":"send","prevSize":32,"id":180,"code":59825},"setIdx":0,"setId":6,"iconIdx":180},{"icon":{"paths":["M891.494 238.96l-297.475 637.446c-16.854 36.115-69.622 31.459-79.891-7.050l-66-247.498 151.248-189.059-219.994 109.997-226.833-113.418c-35.43-17.715-29.696-69.949 8.733-79.555l681.197-170.3c34.842-8.71 64.202 26.892 49.014 59.436z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["send-filled"],"defaultCode":59824,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1093,"name":"send-filled","prevSize":32,"id":181,"code":59824},"setIdx":0,"setId":6,"iconIdx":181},{"icon":{"paths":["M421.334 256c0-44.183-35.818-80-80-80s-80 35.817-80 80c0 44.183 35.817 80 80 80s80-35.817 80-80zM465.302 288c-14.211 55.206-64.326 96-123.968 96-59.643 0-109.758-40.794-123.968-96h-89.367c-17.673 0-32-14.327-32-32s14.327-32 32-32h89.367c14.209-55.207 64.324-96 123.968-96 59.642 0 109.757 40.793 123.968 96h430.698c17.674 0 32 14.327 32 32s-14.326 32-32 32h-430.698zM96 768c0-17.674 14.327-32 32-32h89.367c14.209-55.206 64.324-96 123.968-96 60.781 0 111.67 42.365 124.742 99.181 4.208-2.038 8.934-3.181 13.923-3.181h416c17.674 0 32 14.326 32 32s-14.326 32-32 32h-416c-4.989 0-9.715-1.142-13.923-3.181-13.072 56.816-63.962 99.181-124.742 99.181-59.643 0-109.758-40.794-123.968-96h-89.367c-17.673 0-32-14.326-32-32zM341.334 848c44.182 0 80-35.818 80-80s-35.818-80-80-80c-44.183 0-80 35.818-80 80s35.817 80 80 80zM796.029 543.757c-14.122 55.331-64.298 96.243-124.029 96.243s-109.904-40.912-124.029-96.243c-1.302 0.16-2.627 0.243-3.971 0.243h-416c-17.673 0-32-14.326-32-32s14.327-32 32-32h416c1.344 0 2.669 0.083 3.971 0.243 14.125-55.331 64.298-96.243 124.029-96.243s109.907 40.912 124.029 96.243c1.302-0.16 2.627-0.243 3.971-0.243h96c17.674 0 32 14.326 32 32s-14.326 32-32 32h-96c-1.344 0-2.669-0.083-3.971-0.243zM752 512c0-44.182-35.818-80-80-80s-80 35.818-80 80c0 44.182 35.818 80 80 80s80-35.818 80-80z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["settings"],"defaultCode":59826,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1094,"name":"settings","prevSize":32,"id":182,"code":59826},"setIdx":0,"setId":6,"iconIdx":182},{"icon":{"paths":["M690.176 301.708c11.645-11.977 11.645-31.396 0-43.374l-149.091-153.351c-11.645-11.977-30.525-11.977-42.17 0l-149.091 153.351c-11.645 11.977-11.645 31.397 0 43.374s30.525 11.978 42.17 0l98.189-100.993v401.343c0 16.938 13.35 30.669 29.818 30.669s29.818-13.731 29.818-30.669v-401.343l98.189 100.993c11.645 11.978 30.525 11.978 42.17 0z","M221.818 379.274h149.091v59.635h-119.272v387.635h536.728v-387.635h-119.274v-59.635h149.091c16.467 0 29.818 13.35 29.818 29.818v447.274c0 16.467-13.35 29.818-29.818 29.818h-596.364c-16.468 0-29.818-13.35-29.818-29.818v-447.274c0-16.467 13.35-29.818 29.818-29.818z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["share"],"defaultCode":59827,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1095,"name":"share","prevSize":32,"id":183,"code":59827},"setIdx":0,"setId":6,"iconIdx":183},{"icon":{"paths":["M502.627 142.69c12.915-3.408 26.509-3.289 39.363 0.345l245.194 69.317c29.165 8.245 51.254 33.818 53.504 65.14 24.506 341.145-184.394 520.422-272.611 580.214-33.053 22.403-75.28 22.474-108.416 0.259-88.758-59.504-300.1-238.589-276.51-579.794 2.205-31.89 24.96-57.772 54.753-65.633l264.724-69.849zM524.579 204.621c-1.837-0.519-3.779-0.536-5.622-0.049l-264.725 69.849c-4.4 1.161-6.999 4.775-7.233 8.165-21.305 308.166 168.214 468.531 248.301 522.218 11.507 7.715 25.434 7.677 36.87-0.077 79.379-53.798 266.835-214.288 244.685-522.649-0.243-3.358-2.787-6.925-7.082-8.139l-245.194-69.317z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["set-as-moderator"],"defaultCode":59661,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1096,"name":"shield","prevSize":32,"id":184,"code":59661},"setIdx":0,"setId":6,"iconIdx":184},{"icon":{"paths":["M513.302 142.705c12.915-3.408 26.509-3.289 39.36 0.345l245.197 69.318c29.165 8.245 51.254 33.818 53.504 65.14 24.506 341.142-184.397 520.422-272.611 580.214-33.053 22.403-75.28 22.47-108.416 0.259-88.762-59.504-300.101-238.589-276.511-579.794 2.205-31.89 24.96-57.772 54.753-65.633l264.725-69.849zM535.251 204.637c-1.834-0.519-3.776-0.536-5.622-0.050l-264.723 69.849c-4.4 1.161-6.999 4.775-7.234 8.164-21.305 308.164 168.216 468.532 248.299 522.218 11.507 7.715 25.434 7.677 36.874-0.077 79.379-53.798 266.832-214.288 244.682-522.65-0.24-3.358-2.784-6.925-7.078-8.139l-245.197-69.317z","M490.672 337.334c-19.76 4.672-47.245 12.31-81.149 24.554 20.81 108.771 53.219 187.014 81.149 238.832v-263.386zM492.867 271.316c33.77-6.898 61.805 19.742 61.805 51.125v360.963c0 17.024-10.333 31.747-25.642 37.52-15.67 5.91-33.779 1.331-44.861-12.675-32.656-41.267-106.323-152.95-141.19-354.563-3.242-18.746 7.066-37.695 25.328-44.726 56.186-21.63 99.094-32.442 124.56-37.644z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["shield"],"defaultCode":59829,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1097,"name":"shield-alt","prevSize":32,"id":185,"code":59829},"setIdx":0,"setId":6,"iconIdx":185},{"icon":{"paths":["M664.083 405.072c11.638-13.299 10.288-33.517-3.011-45.155s-33.517-10.288-45.155 3.011l-125.251 143.142-39.917-45.619c-11.638-13.299-31.853-14.646-45.155-3.011-13.299 11.638-14.646 31.856-3.008 45.155l64 73.142c6.077 6.944 14.854 10.928 24.080 10.928 9.229 0 18.006-3.984 24.083-10.928l149.334-170.666z","M541.99 143.050c-12.854-3.634-26.448-3.753-39.363-0.345l-264.724 69.849c-29.793 7.861-52.548 33.743-54.753 65.633-23.589 341.205 187.752 520.29 276.51 579.794 33.136 22.211 75.363 22.144 108.416-0.259 88.218-59.792 297.117-239.072 272.611-580.214-2.25-31.321-24.339-56.895-53.504-65.14l-245.194-69.318zM518.957 204.587c1.843-0.487 3.786-0.47 5.622 0.049l245.194 69.318c4.294 1.214 6.838 4.781 7.082 8.139 22.15 308.362-165.306 468.851-244.685 522.65-11.437 7.754-25.363 7.792-36.87 0.077-80.086-53.686-269.606-214.054-248.301-522.218 0.234-3.389 2.833-7.004 7.233-8.164l264.725-69.849z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["shield-check"],"defaultCode":59828,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1098,"name":"shield-check","prevSize":32,"id":186,"code":59828},"setIdx":0,"setId":6,"iconIdx":186},{"icon":{"paths":["M778.64 213.336c-17.674 0-32 14.327-32 32v533.333c0 17.674 14.326 32 32 32s32-14.326 32-32v-533.333c0-17.673-14.326-32-32-32z","M600.87 341.334c-17.674 0-32 14.33-32 32v405.334c0 17.674 14.326 32 32 32s32-14.326 32-32v-405.334c0-17.67-14.326-32-32-32z","M423.104 810.669c-17.674 0-32-14.326-32-32v-277.334c0-17.67 14.326-32 32-32 17.67 0 32 14.33 32 32v277.334c0 17.674-14.33 32-32 32z","M245.333 597.334c-17.673 0-32 14.33-32 32v149.334c0 17.674 14.327 32 32 32s32-14.326 32-32v-149.334c0-17.67-14.327-32-32-32z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["signal"],"defaultCode":59830,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1099,"name":"signal","prevSize":32,"id":187,"code":59830},"setIdx":0,"setId":6,"iconIdx":187},{"icon":{"paths":["M772.986 470.432h-40.186c-1.104-12.381-10.090-19.757-26.454-19.757-16.278 0-24.416 6.867-24.502 16.365-0.339 10.342 9.667 15.6 25.437 18.992l14.922 3.389c34.253 7.546 52.989 24.502 53.158 52.227-0.17 32.982-25.773 52.566-69.014 52.566-43.661 0-71.894-19.414-72.403-60.026h40.186c0.934 16.701 13.142 25.35 31.709 25.35 16.874 0 26.794-7.376 26.963-17.974-0.17-9.75-8.733-14.922-27.811-19.331l-18.141-4.24c-30.016-6.867-48.496-21.706-48.413-48.070-0.253-32.304 28.317-53.923 67.997-53.923 40.355 0 66.214 21.958 66.554 54.432z","M354.858 470.432h40.186c-0.339-32.474-26.198-54.432-66.554-54.432-39.679 0-68.251 21.619-67.996 53.923-0.085 26.365 18.398 41.203 48.411 48.070l18.145 4.24c19.075 4.41 27.638 9.581 27.808 19.331-0.17 10.598-10.090 17.974-26.96 17.974-18.569 0-30.778-8.65-31.71-25.35h-40.187c0.509 40.611 28.741 60.026 72.403 60.026 43.242 0 68.845-19.584 69.014-52.566-0.17-27.725-18.906-44.682-53.158-52.227l-14.922-3.389c-15.77-3.392-25.774-8.65-25.435-18.992 0.085-9.498 8.224-16.365 24.501-16.365 16.365 0 25.35 7.376 26.454 19.757z","M418.614 418.374v173.635h40.864v-107.251h1.443l41.712 106.15h26.112l41.715-105.555h1.44v106.656h40.867v-173.635h-51.974l-44.086 107.504h-2.035l-44.086-107.504h-51.971z","M864 192c16.973 0 33.251 6.743 45.254 18.745s18.746 28.281 18.746 45.255v635.296c0 12.186-3.478 24.122-10.032 34.397-6.55 10.278-15.898 18.474-26.947 23.619-11.046 5.146-23.334 7.027-35.418 5.43-12.083-1.6-23.456-6.614-32.787-14.458l-128.81-108.285h-534.006c-16.974 0-33.252-6.742-45.255-18.746s-18.745-28.282-18.745-45.254v-512c0-16.974 6.743-33.252 18.745-45.255s28.281-18.745 45.255-18.745h704zM864 256h-704v512h534.006c15.066 0 29.648 5.315 41.181 15.011l128.813 108.285v-635.296z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["sms"],"defaultCode":59772,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1100,"name":"sms","prevSize":32,"id":188,"code":59772},"setIdx":0,"setId":6,"iconIdx":188},{"icon":{"paths":["M919.258 667.229c12.605-12.253 12.877-32.394 0.605-44.982-12.269-12.589-32.435-12.858-45.040-0.605l-106.112 103.155v-500.8c0-17.568-14.259-31.81-31.853-31.81-17.59 0-31.85 14.242-31.85 31.81v500.8l-106.115-103.155c-12.605-12.253-32.768-11.984-45.040 0.605-12.269 12.589-11.997 32.73 0.608 44.982l160.179 155.718c12.368 12.019 32.070 12.019 44.435 0l160.182-155.718zM560.659 333.667c17.59 0 31.85-14.243 31.85-31.811s-14.259-31.809-31.85-31.809h-432.49c-17.591 0-31.852 14.242-31.852 31.809s14.26 31.811 31.852 31.811h432.49zM464.55 536.099c17.59 0 31.85-14.243 31.85-31.811 0-17.565-14.259-31.808-31.85-31.808h-336.381c-17.591 0-31.852 14.24-31.852 31.808s14.26 31.811 31.852 31.811h336.381zM384.458 722.96c17.594 0 31.853-14.24 31.853-31.808s-14.259-31.811-31.853-31.811h-256.289c-17.591 0-31.852 14.243-31.852 31.811s14.26 31.808 31.852 31.808h256.289z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["sort"],"defaultCode":59832,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1101,"name":"sort","prevSize":32,"id":189,"code":59832},"setIdx":0,"setId":6,"iconIdx":189},{"icon":{"paths":["M289.362 192c13.364 0 25.321 8.305 29.987 20.829l96.001 257.699c6.17 16.56-2.256 34.986-18.816 41.155-16.563 6.17-34.989-2.253-41.158-18.816l-20.477-54.963h-91.074l-20.476 54.963c-6.17 16.563-24.597 24.986-41.158 18.816s-24.986-24.595-18.816-41.155l96-257.699c4.666-12.524 16.622-20.829 29.987-20.829zM311.058 373.904l-21.695-58.238-21.695 58.238h43.391z","M522.131 626.435c-12.154 12.829-11.606 33.082 1.222 45.238l160 151.587c12.342 11.693 31.674 11.693 44.016 0l160-151.587c12.832-12.157 13.376-32.41 1.222-45.238s-32.41-13.376-45.238-1.222l-105.99 100.419v-501.632c0-17.673-14.326-32-32-32s-32 14.327-32 32v501.632l-105.994-100.419c-12.829-12.154-33.082-11.606-45.238 1.222z","M193.362 570.947c-17.673 0-32 14.326-32 32 0 17.67 14.327 32 32 32h116.145l-139.065 142.73c-8.979 9.216-11.565 22.915-6.564 34.771 5.001 11.853 16.617 19.562 29.484 19.562h192.001c17.674 0 32-14.326 32-32s-14.326-32-32-32h-116.146l139.064-142.733c8.979-9.216 11.565-22.915 6.563-34.768-4.998-11.856-16.614-19.562-29.482-19.562h-192.001z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["sort-az"],"defaultCode":59831,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1102,"name":"sort-az","prevSize":32,"id":190,"code":59831},"setIdx":0,"setId":6,"iconIdx":190},{"icon":{"paths":["M472.618 173.508c18.166-58.554 100.454-60.461 121.322-2.812l69.821 192.91h195.44c57.872 0 86.026 70.611 43.994 110.336l-147.888 139.782 53.386 217.363c14.17 57.696-51.251 101.805-99.536 67.11l-177.741-127.709-177.741 127.709c-48.283 34.691-113.703-9.414-99.533-67.11l53.209-216.64-157.591-139.024c-44.179-38.973-16.577-111.818 42.37-111.818h221.513l58.976-190.098zM603.574 385.334l-69.824-192.91-58.976 190.098c-8.304 26.758-33.085 45.002-61.133 45.002h-221.513l157.59 139.021c17.837 15.731 25.456 40.048 19.789 63.13l-53.209 216.643 177.74-127.709c22.33-16.045 52.426-16.045 74.755 0l177.738 127.709-53.386-217.363c-5.478-22.317 1.456-45.856 18.166-61.648l147.888-139.782h-195.44c-26.957 0-51.024-16.87-60.186-42.189z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["star"],"defaultCode":59834,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1103,"name":"star","prevSize":32,"id":191,"code":59834},"setIdx":0,"setId":6,"iconIdx":191},{"icon":{"paths":["M593.939 170.244c-20.867-57.726-103.155-55.816-121.322 2.815l-58.976 190.348h-221.513c-58.947 0-86.549 72.944-42.37 111.968l157.591 139.206-53.209 216.928c-14.17 57.77 51.25 101.936 99.533 67.197l177.741-127.875 177.741 127.875c48.285 34.739 113.706-9.427 99.536-67.197l-53.386-217.651 147.888-139.968c42.032-39.779 13.878-110.483-43.99-110.483h-195.443l-69.821-193.164z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["star-filled"],"defaultCode":59833,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1104,"name":"star-filled","prevSize":32,"id":192,"code":59833},"setIdx":0,"setId":6,"iconIdx":192},{"icon":{"paths":["M512 896c-212.077 0-384-171.923-384-384s171.923-384 384-384c212.077 0 384 171.923 384 384s-171.923 384-384 384zM565.334 288c0-29.455-23.878-53.333-53.334-53.333s-53.334 23.878-53.334 53.333v249.632l180.016 144.013c23.002 18.403 56.563 14.672 74.963-8.326 18.403-23.002 14.672-56.563-8.326-74.963l-139.984-111.987v-198.368z"],"attrs":[{"fill":"rgb(243, 190, 8)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":3}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":2}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":3}]},"tags":["status-away"],"defaultCode":59741,"grid":0},"attrs":[{"fill":"rgb(243, 190, 8)"}],"properties":{"order":1105,"name":"status-away","prevSize":32,"id":193,"code":59741},"setIdx":0,"setId":6,"iconIdx":193},{"icon":{"paths":["M512 896c-212.077 0-384-171.923-384-384s171.923-384 384-384c212.077 0 384 171.923 384 384s-171.923 384-384 384zM384 458.666c-29.456 0-53.334 23.875-53.334 53.331s23.878 53.334 53.334 53.334h256c29.456 0 53.334-23.878 53.334-53.334s-23.878-53.331-53.334-53.331h-256z"],"attrs":[{"fill":"rgb(245, 69, 92)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":6}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":6}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":8}]},"tags":["status-busy"],"defaultCode":59742,"grid":0},"attrs":[{"fill":"rgb(245, 69, 92)"}],"properties":{"order":1106,"name":"status-busy","prevSize":32,"id":194,"code":59742},"setIdx":0,"setId":6,"iconIdx":194},{"icon":{"paths":["M512 896c212.077 0 384-171.923 384-384s-171.923-384-384-384c-212.077 0-384 171.923-384 384s171.923 384 384 384zM554.774 298.667v298.668c0 23.562-19.101 42.666-42.666 42.666s-42.669-19.104-42.669-42.666v-298.668c0-23.564 19.104-42.667 42.669-42.667s42.666 19.102 42.666 42.667zM554.774 725.334c0 23.562-19.101 42.666-42.666 42.666s-42.669-19.104-42.669-42.666c0-23.565 19.104-42.669 42.669-42.669s42.666 19.104 42.666 42.669z"],"attrs":[{"fill":"rgb(243, 140, 57)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":5}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":7}]},"tags":["status-disabled"],"defaultCode":59837,"grid":0},"attrs":[{"fill":"rgb(243, 140, 57)"}],"properties":{"order":1107,"id":195,"name":"status-disabled","prevSize":32,"code":59837},"setIdx":0,"setId":6,"iconIdx":195},{"icon":{"paths":["M888.691 586.941l-125.568-24.838c3.187-16.102 4.877-32.842 4.877-50.102s-1.69-34-4.877-50.102l125.568-24.838c4.794 24.237 7.309 49.296 7.309 74.941s-2.515 50.704-7.309 74.941zM831.322 298.644l-106.365 71.209c-18.726-27.971-42.838-52.083-70.81-70.81l71.21-106.364c41.875 28.035 77.93 64.089 105.965 105.965zM586.941 135.309l-24.838 125.566c-16.102-3.185-32.842-4.876-50.102-4.876s-34 1.69-50.102 4.876l-24.838-125.566c24.237-4.795 49.296-7.309 74.941-7.309s50.704 2.514 74.941 7.309zM298.644 192.679l71.209 106.364c-27.971 18.727-52.083 42.839-70.81 70.81l-106.364-71.209c28.035-41.876 64.089-77.93 105.965-105.964zM135.309 437.059c-4.795 24.237-7.309 49.296-7.309 74.941s2.514 50.704 7.309 74.941l125.566-24.838c-3.185-16.102-4.876-32.842-4.876-50.102s1.69-34 4.876-50.102l-125.566-24.838zM192.679 725.357l106.364-71.21c18.727 27.971 42.839 52.083 70.81 70.81l-71.209 106.365c-41.876-28.035-77.93-64.090-105.964-105.965zM437.059 888.691l24.838-125.568c16.102 3.187 32.842 4.877 50.102 4.877s34-1.69 50.102-4.877l24.838 125.568c-24.237 4.794-49.296 7.309-74.941 7.309s-50.704-2.515-74.941-7.309zM725.357 831.322l-71.21-106.365c27.971-18.726 52.083-42.838 70.81-70.81l106.365 71.21c-28.035 41.875-64.090 77.93-105.965 105.965z"],"attrs":[{"fill":"rgb(158, 162, 168)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":7}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":7}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":9}]},"tags":["status-loading"],"defaultCode":59743,"grid":0},"attrs":[{"fill":"rgb(158, 162, 168)"}],"properties":{"order":1108,"name":"status-loading","prevSize":32,"id":196,"code":59743},"setIdx":0,"setId":6,"iconIdx":196},{"icon":{"paths":["M512 789.334c-153.168 0-277.333-124.166-277.333-277.334s124.165-277.333 277.333-277.333c153.168 0 277.334 124.165 277.334 277.333s-124.166 277.334-277.334 277.334zM512 896c212.077 0 384-171.923 384-384s-171.923-384-384-384c-212.077 0-384 171.923-384 384s171.923 384 384 384z"],"attrs":[{"fill":"rgb(158, 162, 168)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":7}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":7}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":9}]},"tags":["status-offline"],"defaultCode":59744,"grid":0},"attrs":[{"fill":"rgb(158, 162, 168)"}],"properties":{"order":1109,"name":"status-offline","prevSize":32,"id":197,"code":59744},"setIdx":0,"setId":6,"iconIdx":197},{"icon":{"paths":["M896 512c0 212.077-171.923 384-384 384s-384-171.923-384-384c0-212.077 171.923-384 384-384s384 171.923 384 384z"],"attrs":[{"fill":"rgb(45, 224, 165)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":4}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":3}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":5}]},"tags":["status-online"],"defaultCode":59745,"grid":0},"attrs":[{"fill":"rgb(45, 224, 165)"}],"properties":{"order":1110,"name":"status-online","prevSize":32,"id":198,"code":59745},"setIdx":0,"setId":6,"iconIdx":198},{"icon":{"paths":["M511.997 224c-114.163 0-179.555 64.46-179.555 128v0.253c-0.061 7.453 1.072 14.867 3.354 21.962 5.411 16.826-3.84 34.851-20.666 40.259-16.825 5.411-34.85-3.84-40.261-20.666-4.357-13.546-6.527-27.702-6.428-41.933 0.081-113.124 110.343-191.875 243.556-191.875 103.597 0 190.97 46.311 226.886 120.071 7.738 15.889 1.13 35.043-14.762 42.78-15.888 7.738-35.043 1.13-42.781-14.761-22.259-45.713-82.714-84.090-169.344-84.090z","M128 512c0-17.674 14.327-32 32-32h392.893c0.467-0.010 0.938-0.010 1.408 0h309.699c17.674 0 32 14.326 32 32s-14.326 32-32 32h-160.432c38.198 29.328 64.432 70.438 64.432 128.003 0 57.2-32.512 105.965-79.008 139.178-46.557 33.254-109.235 52.822-176.992 52.822s-130.435-19.568-176.992-52.822c-46.495-33.213-79.008-81.978-79.008-139.178 0-17.674 14.327-32 32-32s32 14.326 32 32c0 31.168 17.632 62.4 52.208 87.098 34.515 24.653 83.837 40.902 139.792 40.902s105.277-16.25 139.792-40.902c34.576-24.698 52.208-55.93 52.208-87.098 0-35.558-15.216-59.581-42.134-79.283-27.824-20.368-67.005-35.082-112.88-48.72h-388.986c-17.673 0-32-14.326-32-32z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124319081245699212911624514522416519902101":[{},{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{},{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{},{}]},"tags":["strike"],"defaultCode":59846,"grid":0},"attrs":[{},{}],"properties":{"order":1111,"name":"strike","prevSize":32,"id":199,"code":59846},"setIdx":0,"setId":6,"iconIdx":199},{"icon":{"paths":["M481.35 117.336c0-17.673 14.326-32 32-32s32 14.327 32 32v106.667c0 17.673-14.326 32-32 32s-32-14.327-32-32v-106.667zM771.392 214.631c12.496-12.497 32.758-12.497 45.254 0s12.496 32.758 0 45.255l-75.411 75.413c-12.499 12.496-32.758 12.496-45.254 0-12.499-12.496-12.499-32.759 0-45.255l75.411-75.412zM336.73 694.63c-12.499-12.496-32.759-12.496-45.256 0l-75.495 75.498c-12.497 12.496-12.497 32.755 0 45.254 12.497 12.496 32.758 12.496 45.255 0l75.496-75.498c12.496-12.496 12.496-32.755 0-45.254zM481.35 800.003c0-17.674 14.326-32 32-32s32 14.326 32 32v106.669c0 17.67-14.326 32-32 32s-32-14.33-32-32v-106.669zM213.352 212.001c-12.497 12.497-12.497 32.758 0 45.255l75.349 75.348c12.497 12.496 32.758 12.496 45.254 0 12.499-12.496 12.496-32.757 0-45.254l-75.348-75.349c-12.497-12.497-32.758-12.497-45.255 0zM695.978 739.885c-12.496-12.496-12.496-32.758 0-45.254 12.499-12.496 32.758-12.496 45.254 0l75.331 75.328c12.496 12.496 12.496 32.758 0 45.254-12.499 12.496-32.758 12.496-45.258 0l-75.328-75.328zM87.751 512.003c0 17.674 14.327 32 32 32h106.667c17.673 0 32-14.326 32-32s-14.327-32-32-32h-106.667c-17.673 0-32 14.326-32 32zM801.35 544.003c-17.674 0-32-14.326-32-32s14.326-32 32-32h106.669c17.67 0 32 14.326 32 32s-14.33 32-32 32h-106.669zM668.17 512c0-85.504-69.315-154.816-154.819-154.816-85.507 0-154.819 69.312-154.819 154.816 0 85.507 69.312 154.819 154.819 154.819 85.504 0 154.819-69.312 154.819-154.819zM726.682 512c0 117.821-95.51 213.334-213.331 213.334s-213.335-95.514-213.335-213.334c0-117.821 95.514-213.332 213.335-213.332s213.331 95.511 213.331 213.332z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["sun"],"defaultCode":59847,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1112,"name":"sun","prevSize":32,"id":200,"code":59847},"setIdx":0,"setId":6,"iconIdx":200},{"icon":{"paths":["M930.704 512c0 229.75-186.25 416-416 416s-415.999-186.25-415.999-416c0-229.75 186.25-416 415.999-416s416 186.25 416 416zM570.49 859.603l-41.827-156.102c-4.611 0.33-9.264 0.499-13.958 0.499-4.57 0-9.101-0.16-13.594-0.474l-41.837 156.134c18.058 2.854 36.573 4.339 55.43 4.339 18.986 0 37.616-1.504 55.786-4.397zM438.893 688.451c-47.549-20.454-85.181-59.571-103.674-108.125l-155.029 41.539c33.968 103.485 114.617 185.805 217.045 222.058l41.658-155.472zM162.705 512c0 16.090 1.080 31.926 3.17 47.443l156.906-42.042c-0.051-1.795-0.077-3.594-0.077-5.402 0-4.909 0.186-9.776 0.547-14.595l-156.051-41.814c-2.958 18.368-4.496 37.21-4.496 56.41zM396.31 180.407c-99.16 35.408-177.786 114.033-213.196 213.19l155.535 41.677c19.357-44.352 54.982-79.978 99.334-99.331l-41.674-155.536zM514.704 160c-19.197 0-38.035 1.537-56.4 4.494l41.814 156.053c4.813-0.362 9.68-0.547 14.586-0.547 5.030 0 10.019 0.192 14.95 0.573l41.808-156.021c-18.477-2.995-37.437-4.552-56.758-4.552zM632.512 843.802c102.659-36.451 183.392-119.194 217.094-223.12l-154.973-41.526c-18.291 48.982-56.010 88.493-103.786 109.155l41.664 155.491zM863.699 558.198c1.984-15.117 3.005-30.538 3.005-46.198 0-18.771-1.469-37.197-4.298-55.171l-156.157 41.84c0.301 4.406 0.454 8.851 0.454 13.331 0 1.376-0.013 2.752-0.042 4.122l157.037 42.077zM846.714 394.774c-35.165-99.6-113.885-178.641-213.277-214.247l-41.68 155.559c44.582 19.555 80.314 55.565 99.504 100.342l155.453-41.654zM642.704 512c0-70.691-57.306-128-128-128-70.691 0-128 57.309-128 128s57.309 128 128 128c70.694 0 128-57.309 128-128z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["support"],"defaultCode":59848,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1113,"name":"support","prevSize":32,"id":201,"code":59848},"setIdx":0,"setId":6,"iconIdx":201},{"icon":{"paths":["M368 412.982c-53.592 0-96-42.877-96-94.491 0-51.616 42.408-94.491 96-94.491 53.594 0 96 42.876 96 94.491 0 51.614-42.406 94.491-96 94.491zM368 476.982c88.365 0 160-70.96 160-158.491s-71.635-158.491-160-158.491c-88.365 0-160 70.959-160 158.491s71.635 158.491 160 158.491zM713.6 397.133c-35.92 0-64-28.685-64-62.794s28.080-62.792 64-62.792c35.92 0 64 28.684 64 62.792s-28.080 62.794-64 62.794zM713.6 461.133c70.691 0 128-56.768 128-126.794s-57.309-126.792-128-126.792c-70.691 0-128 56.767-128 126.792s57.309 126.794 128 126.794zM197.459 527.267c27.344-8.707 56.67-9.242 84.319-1.539l48.491 13.51c24.205 6.742 49.882 6.275 73.824-1.347l30.099-9.584c29.475-9.386 61.085-9.962 90.89-1.658 67.962 18.934 114.918 80.333 114.918 150.269v91.987c0 52.518-42.979 95.094-96 95.094h-352c-53.019 0-96-42.576-96-95.094v-103.766c0-62.909 40.999-118.621 101.459-137.872zM264.451 586.758c-15.545-4.333-32.034-4.032-47.407 0.864-33.993 10.822-57.044 42.147-57.044 77.517v103.766c0 17.507 14.327 31.699 32 31.699h352c17.674 0 32-14.192 32-31.699v-91.987c0-41.533-27.885-77.997-68.246-89.242-17.699-4.931-36.474-4.589-53.978 0.986l-30.099 9.584c-35.91 11.434-74.426 12.138-110.737 2.019l-48.489-13.507zM691.2 778.717h140.8c53.021 0 96-42.979 96-96v-30.611c0-56.877-38.614-106.49-93.747-120.454-21.398-5.418-43.853-5.040-65.056 1.098l-16.4 4.746c-21.843 6.323-44.973 6.714-67.018 1.13l-29.805-7.549c-19.907-5.043-40.797-4.691-60.522 1.018-1.066 0.31-2.122 0.634-3.174 0.97 10.71 4.048 20.896 9.539 30.253 16.374l2.429 1.776 15.040 13.206c9.939 8.726 18.141 19.248 24.182 31.014l2.208 4.301 3.677 0.931c33.062 8.374 67.76 7.789 100.525-1.693l16.4-4.749c10.282-2.976 21.171-3.158 31.546-0.531 26.736 6.771 45.462 30.832 45.462 58.413v30.611c0 17.674-14.326 32-32 32h-140.8v64z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["team"],"defaultCode":59849,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1114,"name":"team","prevSize":32,"id":202,"code":59849},"setIdx":0,"setId":6,"iconIdx":202},{"icon":{"paths":["M281.184 336c17.673 0 32-14.326 32-32s-14.327-32-32-32c-17.673 0-32 14.327-32 32s14.327 32 32 32zM281.184 400c-53.020 0-96-42.979-96-96 0-53.019 42.98-96 96-96 53.018 0 96 42.981 96 96 0 53.021-42.982 96-96 96zM576 320c0-26.51-21.491-48-48-48s-48 21.49-48 48c0 26.509 21.491 48 48 48s48-21.491 48-48zM640 320c0 61.856-50.144 112-112 112s-112-50.144-112-112c0-61.856 50.144-112 112-112s112 50.144 112 112zM477.901 478.515c-28.56-10.957-60.291-10.211-88.307 2.067-42.282 18.534-69.594 60.326-69.594 106.49v132.928c0 53.021 42.979 96 96 96h224c53.021 0 96-42.979 96-96v-125.062c0-51.162-31.536-97.034-79.306-115.354-30.352-11.642-64.067-10.851-93.84 2.198l-2.070 0.909c-21.523 9.434-45.901 10.006-67.843 1.59l-15.040-5.766zM415.286 539.2c12.595-5.52 26.858-5.856 39.699-0.931l15.040 5.77c37.664 14.445 79.504 13.462 116.451-2.73l2.070-0.909c14.349-6.288 30.602-6.669 45.229-1.059 23.024 8.829 38.224 30.938 38.224 55.597v125.062c0 17.674-14.326 32-32 32h-224c-17.674 0-32-14.326-32-32v-132.928c0-20.752 12.278-39.539 31.286-47.872zM768 336c-17.674 0-32-14.326-32-32s14.326-32 32-32c17.674 0 32 14.327 32 32s-14.326 32-32 32zM768 400c53.021 0 96-42.979 96-96 0-53.019-42.979-96-96-96s-96 42.981-96 96c0 53.021 42.979 96 96 96zM840.714 681.766h-72.714v-64h72.714c17.674 0 32-14.326 32-32v-44.688c0-15.050-9.664-28.394-23.958-33.091-7.536-2.474-15.69-2.304-23.114 0.483l-4.554 1.709c-19.77 7.421-40.89 9.978-61.619 7.632-12.438-31.683-37.722-57.549-70.774-70.227-1.754-0.672-3.52-1.302-5.296-1.894 18.058-5.312 37.36-5.040 55.344 0.867l14.182 4.659c14.886 4.893 30.998 4.554 45.667-0.954l4.554-1.709c21.069-7.91 44.205-8.394 65.581-1.37 40.566 13.325 67.987 51.197 67.987 93.894v44.688c0 53.021-42.982 96-96 96zM625.267 624h-0.797c0.259 0.598 0.525 1.194 0.797 1.786v-1.786zM357.594 448.582c2.528-1.107 5.088-2.122 7.674-3.043-17.907-5.155-37.014-4.832-54.824 1.018l-14.183 4.659c-14.887 4.893-30.998 4.554-45.668-0.954l-4.554-1.709c-21.067-7.91-44.203-8.394-65.581-1.37-40.565 13.325-67.986 51.197-67.986 93.894v44.688c0 53.021 42.981 96 96 96h79.53v-64h-79.53c-17.673 0-32-14.326-32-32v-44.688c0-15.050 9.664-28.394 23.96-33.091 7.534-2.474 15.688-2.304 23.112 0.483l4.554 1.709c21.238 7.974 44.041 10.333 66.238 7.027 10.398-30.173 32.994-55.357 63.259-68.624zM423.917 624h0.797c-0.259 0.598-0.525 1.194-0.797 1.786v-1.786z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["teams"],"defaultCode":59751,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1115,"name":"teams","prevSize":32,"id":203,"code":59751},"setIdx":0,"setId":6,"iconIdx":203},{"icon":{"paths":["M631.997 256h24v-56c0-57.437 46.563-104 104-104 57.44 0 104 46.562 104 104v56h24c17.674 0 32 14.327 32 32v192c0 17.674-14.326 32-32 32h-256c-17.67 0-32-14.326-32-32v-192c0-17.673 14.33-32 32-32zM759.997 160c-22.090 0-40 17.908-40 40v55.238h80v-55.238c0-22.092-17.907-40-40-40z","M527.997 224c10.096 0 19.882 1.336 29.184 3.84-13.251 16.46-21.184 37.383-21.184 60.16v0.664c-2.602-0.436-5.274-0.664-8-0.664-26.509 0-48 21.49-48 48s21.491 48 48 48c2.726 0 5.398-0.227 8-0.662v64.381c-2.64 0.186-5.309 0.282-8 0.282-61.856 0-112-50.144-112-112s50.144-112 112-112z","M492.941 500.282c14.883 5.709 30.883 7.283 46.355 4.758 6.182 22.938 20.646 42.474 39.987 55.206-35.123 13.318-74.019 13.309-109.261-0.208l-15.040-5.77c-12.838-4.925-27.104-4.589-39.699 0.931-19.008 8.333-31.286 27.12-31.286 47.872v132.928c0 17.674 14.33 32 32 32h224c17.674 0 32-14.326 32-32v-125.062c0-12.842-4.122-24.995-11.325-34.938h70.291c3.29 11.162 5.034 22.902 5.034 34.938v125.062c0 53.021-42.979 96-96 96h-224c-53.018 0-95.999-42.979-95.999-96v-132.928c0-46.163 27.311-87.955 69.592-106.49 28.019-12.278 59.747-13.024 88.31-2.067l15.040 5.766z","M887.997 576h-15.286v25.766c0 17.674-14.326 32-32 32h-72.714v64h72.714c53.021 0 96-42.979 96-96v-39.027c-14.278 8.426-30.931 13.261-48.714 13.261z","M281.182 416c53.020 0 95.999-42.979 95.999-96 0-53.019-42.979-96-95.999-96s-96 42.981-96 96c0 53.021 42.98 96 96 96zM281.182 352c-17.673 0-32-14.326-32-32s14.327-32 32-32c17.673 0 32 14.327 32 32s-14.327 32-32 32z","M625.267 640h-0.8c0.262 0.598 0.528 1.194 0.8 1.786v-1.786z","M357.59 464.582c2.531-1.107 5.091-2.122 7.674-3.043-17.907-5.155-37.011-4.832-54.823 1.018l-14.183 4.659c-14.887 4.893-30.998 4.554-45.668-0.954l-4.554-1.709c-21.067-7.91-44.203-8.394-65.581-1.37-40.565 13.325-67.986 51.197-67.986 93.894v44.688c0 53.021 42.98 96 96 96h79.53v-64h-79.53c-17.673 0-32-14.326-32-32v-44.688c0-15.050 9.664-28.394 23.96-33.091 7.534-2.474 15.688-2.304 23.112 0.483l4.554 1.709c21.238 7.974 44.041 10.333 66.238 7.027 10.398-30.173 32.992-55.357 63.258-68.624z","M423.914 640h0.797c-0.259 0.598-0.525 1.194-0.797 1.786v-1.786z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["teams-private"],"defaultCode":59750,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1116,"name":"teams-private","prevSize":32,"id":204,"code":59750},"setIdx":0,"setId":6,"iconIdx":204},{"icon":{"paths":["M170.664 192c0-17.673 14.327-32 32-32h618.667c17.674 0 32 14.327 32 32v128c0 17.674-14.326 32-32 32s-32-14.326-32-32v-96h-245.334v576h96c17.674 0 32 14.326 32 32s-14.326 32-32 32h-256c-17.67 0-32-14.326-32-32s14.33-32 32-32h96v-576h-245.333v96c0 17.674-14.327 32-32 32s-32-14.326-32-32v-128z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124319081245699212911624514522416519902101":[{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["text-format"],"defaultCode":59839,"grid":0},"attrs":[{}],"properties":{"order":1117,"id":205,"name":"text-format","prevSize":32,"code":59839},"setIdx":0,"setId":6,"iconIdx":205},{"icon":{"paths":["M223.311 308.609c-47.832 66.7-64.077 147.667-64.077 201.187v1.405l-0.127 1.398c-9.348 103.235 27.547 175.997 86.848 226.374 60.642 51.52 146.602 80.998 235.29 90.893 88.611 9.885 186.221 1.398 263.341-14.973 38.56-8.189 70.928-18.125 93.888-28.128 8.906-3.882 15.837-7.536 20.941-10.765-2.374-1.514-5.245-3.197-8.672-5.030-8.886-4.749-19.059-9.261-29.613-13.894l-1.843-0.81c-9.315-4.083-19.725-8.65-27.613-13.078-14.291-8.026-28.317-17.155-38.544-26.867-5.034-4.781-10.762-11.194-14.595-19.184-4.054-8.454-6.96-21.078-1.261-34.435 30.816-72.186 45.459-111.725 52.554-137.834 6.621-24.378 6.621-36.653 6.621-56.17v-0.179c0-15.51-8.979-86.595-53.776-152.876-43.376-64.174-121.398-125.729-264.832-125.729-129.725 0-207.83 53.576-254.529 118.696zM173.267 272.433c58.132-81.063 154.749-144.433 304.573-144.433 164.896 0 261.594 72.589 315.859 152.878 52.838 78.181 64.416 161.881 64.416 187.641 0 21.654-0.022 40.336-8.797 72.64-7.834 28.835-22.627 68.614-50.048 133.424 5.069 4.032 12.592 9.005 22.506 14.57 5.12 2.877 12.995 6.339 24.054 11.194 10.266 4.506 22.582 9.93 33.891 15.978 10.848 5.798 23.526 13.571 32.954 23.738 9.859 10.63 20.208 28.87 12.816 51.139-4.87 14.672-16.182 25.091-25.61 32.016-10.24 7.52-22.947 14.278-36.858 20.342-27.949 12.176-64.582 23.181-105.68 31.907-82.198 17.453-186.522 26.688-282.909 15.936-96.31-10.746-195.346-43.178-268.313-105.165-74.031-62.893-119.295-154.778-108.551-277.856 0.276-63.411 19.117-157.053 75.696-235.948zM333.952 422.051c0-17.648 14.25-31.955 31.83-31.955h183.008c17.578 0 31.827 14.307 31.827 31.955s-14.25 31.955-31.827 31.955h-183.008c-17.581 0-31.83-14.307-31.83-31.955zM365.782 539.709c-17.581 0-31.83 14.307-31.83 31.955s14.25 31.955 31.83 31.955h224.118c17.578 0 31.827-14.307 31.827-31.955s-14.25-31.955-31.827-31.955h-224.118z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["threads"],"defaultCode":59850,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1118,"name":"threads","prevSize":32,"id":206,"code":59850},"setIdx":0,"setId":6,"iconIdx":206},{"icon":{"paths":["M353.354 320c0-17.673 14.326-32 32-32h256c17.674 0 32 14.327 32 32s-14.326 32-32 32h-256c-17.674 0-32-14.326-32-32z","M385.354 416c-17.674 0-32 14.326-32 32s14.326 32 32 32c17.674 0 32-14.326 32-32s-14.326-32-32-32z","M481.354 448c0-17.674 14.326-32 32-32s32 14.326 32 32c0 17.674-14.326 32-32 32s-32-14.326-32-32z","M641.354 416c-17.674 0-32 14.326-32 32s14.326 32 32 32c17.674 0 32-14.326 32-32s-14.326-32-32-32z","M353.354 576c0-17.674 14.326-32 32-32s32 14.326 32 32c0 17.674-14.326 32-32 32s-32-14.326-32-32z","M513.354 544c-17.674 0-32 14.326-32 32s14.326 32 32 32c17.674 0 32-14.326 32-32s-14.326-32-32-32z","M609.354 576c0-17.674 14.326-32 32-32s32 14.326 32 32c0 17.674-14.326 32-32 32s-32-14.326-32-32z","M385.354 672c-17.674 0-32 14.326-32 32s14.326 32 32 32c17.674 0 32-14.326 32-32s-14.326-32-32-32z","M481.354 704c0-17.674 14.326-32 32-32s32 14.326 32 32c0 17.674-14.326 32-32 32s-32-14.326-32-32z","M641.354 672c-17.674 0-32 14.326-32 32s14.326 32 32 32c17.674 0 32-14.326 32-32s-14.326-32-32-32z","M289.353 160h448.001c35.344 0 64 28.654 64 64v576c0 35.347-28.656 64-64 64h-448.001c-35.346 0-64-28.653-64-64v-576c0-35.346 28.654-64 64-64zM289.353 224v576h448.001v-576h-448.001z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["total"],"defaultCode":59851,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1119,"name":"total","prevSize":32,"id":207,"code":59851},"setIdx":0,"setId":6,"iconIdx":207},{"icon":{"paths":["M713.613 91.356c13.162-11.794 33.392-10.685 45.187 2.477l129.034 144c10.89 12.154 10.89 30.556 0 42.71l-129.034 144.001c-11.795 13.162-32.026 14.269-45.187 2.477-13.162-11.795-14.272-32.026-2.477-45.187l81.222-90.646h-216.358c-17.674 0-32-14.327-32-32s14.326-32 32-32h216.358l-81.222-90.645c-11.795-13.162-10.685-33.393 2.477-45.187zM340.026 464.461c8.586-15.45 28.067-21.018 43.514-12.432l128.461 71.366 128.461-71.366c15.446-8.586 34.928-3.018 43.514 12.432 8.582 15.45 3.014 34.931-12.435 43.514l-159.539 88.634-159.539-88.634c-15.45-8.582-21.018-28.064-12.435-43.514zM192 288v448h640v-192c0-17.674 14.326-32 32-32s32 14.326 32 32v224c0 17.674-14.326 32-32 32h-704c-17.673 0-32-14.326-32-32v-512c0-17.673 14.327-32 32-32h272c17.674 0 32 14.327 32 32s-14.326 32-32 32h-240z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["transcript"],"defaultCode":59852,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1120,"name":"transcript","prevSize":32,"id":208,"code":59852},"setIdx":0,"setId":6,"iconIdx":208},{"icon":{"paths":["M378.861 853.331c317.456 0 491.091-262.662 491.091-490.442 0-7.462 0-14.89-0.506-22.282 33.779-24.401 62.938-54.614 86.112-89.224-31.501 13.94-64.918 23.082-99.136 27.12 36.032-21.542 62.998-55.424 75.882-95.34-33.878 20.078-70.944 34.228-109.597 41.839-53.501-56.814-138.515-70.72-207.37-33.919-68.851 36.801-104.426 115.155-86.768 191.127-138.774-6.947-268.074-72.409-355.715-180.093-45.811 78.76-22.412 179.517 53.436 230.1-27.467-0.813-54.335-8.214-78.337-21.574 0 0.704 0 1.443 0 2.182 0.022 82.051 57.937 152.723 138.47 168.97-25.41 6.922-52.071 7.933-77.933 2.957 22.611 70.218 87.409 118.32 161.25 119.706-61.116 47.968-136.616 74.010-214.35 73.933-13.732-0.026-27.452-0.858-41.087-2.486 78.931 50.586 170.772 77.418 264.557 77.293z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["twitter-monochromatic"],"defaultCode":59660,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1121,"name":"twitter-monochromatic","prevSize":32,"id":209,"code":59660},"setIdx":0,"setId":6,"iconIdx":209},{"icon":{"paths":["M384 320c0-17.673-14.326-32-32-32s-32 14.327-32 32v256c0 106.038 85.962 192 192 192s192-85.962 192-192v-256c0-17.673-14.326-32-32-32s-32 14.327-32 32v256c0 70.691-57.309 128-128 128s-128-57.309-128-128v-256zM352 856c-13.254 0-24 10.746-24 24s10.746 24 24 24h320c13.254 0 24-10.746 24-24s-10.746-24-24-24h-320z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["underline"],"defaultCode":59853,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1122,"name":"underline","prevSize":32,"id":210,"code":59853},"setIdx":0,"setId":6,"iconIdx":210},{"icon":{"paths":["M512 832c176.73 0 320-143.27 320-320s-143.27-320-320-320c-111.712 0-210.056 57.244-267.295 144h107.295c17.674 0 32 14.326 32 32s-14.326 32-32 32h-176c-17.673 0-32-14.326-32-32v-192c0-17.673 14.327-32 32-32s32 14.327 32 32v101.364c70.228-90.856 180.282-149.364 304-149.364 212.077 0 384 171.923 384 384s-171.923 384-384 384c-212.077 0-384-171.923-384-384h64c0 176.73 143.27 320 320 320z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["undo"],"defaultCode":59854,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1123,"name":"undo","prevSize":32,"id":211,"code":59854},"setIdx":0,"setId":6,"iconIdx":211},{"icon":{"paths":["M589.36 729.43c-107.366 23.603-252.288-9.875-422.339-221.158 65.137-95.478 165.885-189.15 280.79-213.871 108.314-23.302 251.286 10.604 413.674 221.404-61.546 95.187-158.653 188.682-272.125 213.626zM916.819 482.714c-347.59-456.963-669.742-211.156-808.018-2.662-12.655 19.082-10.846 44.304 3.402 62.227 362.786 456.419 677.038 209.142 808.011 0.563 11.674-18.589 9.894-42.656-3.395-60.128zM619.462 512c0-53.709-45.517-100.57-105.834-100.57s-105.834 46.861-105.834 100.57c0 53.709 45.517 100.573 105.834 100.573s105.834-46.864 105.834-100.573zM683.546 512c0 90.893-76.074 164.573-169.917 164.573s-169.917-73.68-169.917-164.573c0-90.89 76.074-164.57 169.917-164.57s169.917 73.68 169.917 164.57z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["unread-on-top"],"defaultCode":59857,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1124,"name":"unread-on-top","prevSize":32,"id":212,"code":59857},"setIdx":0,"setId":6,"iconIdx":212},{"icon":{"paths":["M829.168 153.372c12.515-12.497 32.803-12.497 45.315 0 12.515 12.497 12.515 32.758 0 45.255l-672.887 672c-12.513 12.496-32.801 12.496-45.315 0s-12.513-32.758 0-45.254l672.887-672zM110.155 480.051c101.936-153.699 303.797-327.676 542.114-225.436l-49.578 49.512c-56.528-19.209-108.077-19.504-153.526-9.726-114.906 24.721-215.653 118.392-280.79 213.871 38.633 48 75.969 86.822 111.862 117.885l-45.363 45.302c-39.684-34.736-80.189-77.437-121.317-129.181-14.248-17.923-16.056-43.146-3.402-62.227zM797.981 350.454l-45.328 45.27c35.546 31.427 72.336 70.947 110.186 120.080-61.546 95.187-158.656 188.682-272.125 213.626-46.752 10.278-100.624 9.734-160.592-11.603l-49.331 49.267c244.662 107.334 443.389-69.158 540.778-224.253 11.674-18.589 9.894-42.656-3.395-60.128-40.493-53.235-80.64-96.931-120.192-132.259zM514.982 347.43c13.709 0 27.037 1.571 39.802 4.541l-203.738 203.469c-3.901-13.837-5.981-28.403-5.981-43.44 0-90.89 76.074-164.57 169.917-164.57zM679.091 469.184l-203.264 202.998c12.57 2.87 25.68 4.39 39.155 4.39 93.843 0 169.917-73.68 169.917-164.573 0-14.81-2.019-29.162-5.808-42.816z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["unread-on-top-disabled"],"defaultCode":59856,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1125,"name":"unread-on-top-disabled","prevSize":32,"id":213,"code":59856},"setIdx":0,"setId":6,"iconIdx":213},{"icon":{"paths":["M273.128 356.678c-6.62 27.766-2.384 63.757 25.498 105.581l33.166 49.75h-59.792c-44.011 0-70.484 14.874-86.279 33.619-16.496 19.578-24.573 47.264-23.734 77.491 0.841 30.262 10.601 59.968 25.818 81.312 15.127 21.216 33.404 31.578 52.195 31.578h143.999v64h-144c-45.209 0-80.932-25.642-104.306-58.426-23.283-32.656-36.522-74.95-37.682-116.688-1.16-41.773 9.763-86.083 38.766-120.506 20.726-24.598 49.155-42.32 84.825-50.784-16.1-39.011-19.009-77.050-10.731-111.77 11.253-47.2 42.305-84.492 80.791-107.342 38.4-22.798 85.677-32.139 131.303-21.965 35.584 7.935 68.909 27.48 95.251 59.554 53.75-35.147 127.584-30.892 182.483-2.495 34.438 17.812 64.794 46.382 81.437 85.010 12.294 28.531 16.438 61.011 10.608 96.205 46.112 6.682 81.507 25.155 105.616 53.456 30.346 35.626 38.102 81.35 33.443 123.283-4.659 41.917-21.946 83.485-46.544 115.114-24.061 30.934-59.354 57.354-101.261 57.354h-144v-64h144c14.093 0 32.8-9.581 50.742-32.646 17.398-22.371 30.112-52.806 33.453-82.89 3.341-30.067-2.902-56.339-18.554-74.714-15.222-17.869-44.035-33.75-97.642-33.75h-45.686l15.613-42.938c13.546-37.251 11.091-66.742 1.437-89.149-9.856-22.87-28.502-41.302-52.064-53.488-49.587-25.649-107.475-18.625-134.717 14.064l-30.134 36.16-22.541-41.325c-19.757-36.219-47.232-54.175-74.87-60.339-28.378-6.327-59.098-0.669-84.701 14.53-25.512 15.148-44.461 38.855-51.208 67.152zM630.979 588.778l-96-99.050c-6.029-6.218-14.32-9.728-22.979-9.728s-16.95 3.51-22.979 9.728l-96 99.050c-12.298 12.691-11.981 32.95 0.707 45.251 12.691 12.298 32.95 11.981 45.251-0.707l41.021-42.326v273.005c0 17.674 14.326 32 32 32s32-14.326 32-32v-273.005l41.021 42.326c12.301 12.688 32.56 13.005 45.251 0.707 12.691-12.301 13.005-32.56 0.707-45.251z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["upload"],"defaultCode":59858,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1126,"name":"upload","prevSize":32,"id":214,"code":59858},"setIdx":0,"setId":6,"iconIdx":214},{"icon":{"paths":["M609.354 336c0-53.019-42.979-96-96-96s-96 42.981-96 96c0 53.021 42.979 96 96 96s96-42.979 96-96zM673.354 336c0 88.365-71.635 160-160 160s-160-71.635-160-160c0-88.365 71.635-160 160-160s160 71.635 160 160zM413.805 551.802c-24.621-5.77-50.285-5.366-74.714 1.178-67.086 17.968-113.738 78.762-113.738 148.211v66.81c0 53.021 42.98 96 96 96h384c53.021 0 96-42.979 96-96v-58.531c0-74.301-51.149-138.826-123.488-155.779l-6.458-1.514c-25.674-6.016-52.435-5.594-77.907 1.229l-49.626 13.293c-20.378 5.456-41.789 5.795-62.326 0.979l-67.744-15.875zM355.651 614.8c14.237-3.814 29.197-4.051 43.549-0.688l67.744 15.878c30.806 7.219 62.925 6.714 93.488-1.472l49.629-13.293c15.283-4.096 31.341-4.349 46.742-0.736l6.458 1.51c43.402 10.173 74.093 48.89 74.093 93.469v58.531c0 17.674-14.326 32-32 32h-384c-17.673 0-32-14.326-32-32v-66.81c0-40.483 27.193-75.917 66.298-86.39z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["user"],"defaultCode":59861,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1127,"name":"user","prevSize":32,"id":215,"code":59861},"setIdx":0,"setId":6,"iconIdx":215},{"icon":{"paths":["M553.411 326.282c0 91.578-75.846 165.818-169.411 165.818-93.564 0-169.412-74.24-169.412-165.818 0-91.581 75.848-165.821 169.412-165.821 93.565 0 169.411 74.24 169.411 165.821zM485.648 326.282c0-54.949-45.51-99.493-101.648-99.493s-101.647 44.544-101.647 99.493c0 54.947 45.509 99.491 101.647 99.491s101.648-44.544 101.648-99.491z","M203.427 511.232c28.952-9.11 60.004-9.67 89.279-1.61l51.342 14.131c25.632 7.056 52.819 6.566 78.166-1.408l31.872-10.026c31.206-9.821 64.678-10.422 96.234-1.738 71.962 19.811 121.68 84.051 121.68 157.219v96.24c0 54.947-45.51 99.491-101.648 99.491h-372.705c-56.138 0-101.647-44.544-101.647-99.491v-108.566c0-65.814 43.411-124.106 107.427-144.243zM274.359 573.472c-16.46-4.531-33.918-4.218-50.196 0.906-35.992 11.322-60.399 44.093-60.399 81.098v108.566c0 18.317 15.17 33.165 33.882 33.165h372.705c18.714 0 33.882-14.848 33.882-33.165v-96.24c0-43.453-29.523-81.603-72.259-93.366-18.739-5.158-38.618-4.8-57.152 1.030l-31.872 10.026c-38.022 11.962-78.803 12.698-117.248 2.115l-51.343-14.134z","M797.091 189.321c0-15.913-13.024-28.812-29.091-28.812s-29.091 12.9-29.091 28.812v100.844h-101.818c-16.067 0-29.091 12.9-29.091 28.812s13.024 28.812 29.091 28.812h101.818v100.845c0 15.914 13.024 28.813 29.091 28.813s29.091-12.899 29.091-28.813v-100.845h101.818c16.067 0 29.091-12.899 29.091-28.812s-13.024-28.812-29.091-28.812h-101.818v-100.844z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["user-add"],"defaultCode":59859,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1128,"name":"user-add","prevSize":32,"id":216,"code":59859},"setIdx":0,"setId":6,"iconIdx":216},{"icon":{"paths":["M464 318.747c0-51.548-42.406-94.366-96-94.366-53.592 0-96 42.819-96 94.366s42.408 94.367 96 94.367c53.594 0 96-42.819 96-94.367zM528 318.747c0 87.416-71.635 158.284-160 158.284s-160-70.867-160-158.284c0-87.417 71.635-158.282 160-158.282s160 70.865 160 158.282zM281.778 525.712c-27.649-7.693-56.976-7.158-84.319 1.536-60.46 19.226-101.459 74.864-101.459 137.69v103.629c0 52.451 42.981 94.97 96 94.97h352c3.606 0 7.165-0.195 10.666-0.579v-64.534c-3.334 1.168-6.925 1.802-10.666 1.802h-352c-17.673 0-32-14.173-32-31.658v-103.629c0-35.325 23.051-66.605 57.044-77.414 15.373-4.89 31.862-5.187 47.407-0.864l48.489 13.491c36.311 10.102 74.827 9.402 110.737-2.016l30.099-9.571c17.504-5.568 36.278-5.91 53.978-0.986 18.899 5.261 35.066 16.042 46.912 30.282v-79.712c-9.309-4.749-19.203-8.627-29.584-11.517-29.805-8.291-61.414-7.715-90.89 1.654l-30.099 9.574c-23.942 7.61-49.619 8.080-73.824 1.344l-48.491-13.491zM763.366 489.709c-12.326-12.646-32.586-12.918-45.248-0.608-12.666 12.31-12.938 32.544-0.611 45.19l102.842 105.51h-324.349c-17.674 0-32 14.307-32 31.958 0 17.648 14.326 31.958 32 31.958h324.349l-102.842 105.507c-12.326 12.65-12.054 32.88 0.611 45.194 12.662 12.31 32.922 12.038 45.248-0.611l155.718-159.757c12.093-12.406 12.093-32.176 0-44.582l-155.718-159.76z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["user-forward"],"defaultCode":59860,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1129,"name":"user-forward","prevSize":32,"id":217,"code":59860},"setIdx":0,"setId":6,"iconIdx":217},{"icon":{"paths":["M201.583 672c35.346 0 64-28.653 64-64s-28.654-64-64-64c-35.346 0-64 28.653-64 64s28.654 64 64 64z","M329.584 576c-17.674 0-32.001 14.326-32.001 32s14.327 32 32.001 32h544c17.674 0 32-14.326 32-32s-14.326-32-32-32h-544z","M201.583 480c35.346 0 64-28.653 64-64s-28.654-64-64-64c-35.346 0-64 28.653-64 64s28.654 64 64 64z","M329.584 384c-17.674 0-32.001 14.326-32.001 32s14.327 32 32.001 32h544c17.674 0 32-14.326 32-32s-14.326-32-32-32h-544z","M201.583 288c35.346 0 64-28.654 64-64s-28.654-64-64-64c-35.346 0-64 28.654-64 64s28.654 64 64 64z","M329.584 192c-17.674 0-32.001 14.327-32.001 32s14.327 32 32.001 32h544c17.674 0 32-14.327 32-32s-14.326-32-32-32h-544z","M201.583 864c35.346 0 64-28.653 64-64s-28.654-64-64-64c-35.346 0-64 28.653-64 64s28.654 64 64 64z","M329.584 768c-17.674 0-32.001 14.326-32.001 32s14.327 32 32.001 32h544c17.674 0 32-14.326 32-32s-14.326-32-32-32h-544z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["view-condensed"],"defaultCode":59862,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1130,"name":"view-condensed","prevSize":32,"id":218,"code":59862},"setIdx":0,"setId":6,"iconIdx":218},{"icon":{"paths":["M288 192c0-17.673 14.327-32 32-32h544c17.674 0 32 14.327 32 32s-14.326 32-32 32h-544c-17.673 0-32-14.327-32-32zM288 288c0-17.673 14.327-32 32-32h448c17.674 0 32 14.327 32 32s-14.326 32-32 32h-448c-17.673 0-32-14.327-32-32zM192 304c35.346 0 64-28.654 64-64s-28.654-64-64-64c-35.346 0-64 28.654-64 64s28.654 64 64 64z","M288 464c0-17.674 14.327-32 32-32h544c17.674 0 32 14.326 32 32s-14.326 32-32 32h-544c-17.673 0-32-14.326-32-32zM288 560c0-17.674 14.327-32 32-32h448c17.674 0 32 14.326 32 32s-14.326 32-32 32h-448c-17.673 0-32-14.326-32-32zM192 576c35.346 0 64-28.653 64-64s-28.654-64-64-64c-35.346 0-64 28.653-64 64s28.654 64 64 64z","M288 736c0-17.674 14.327-32 32-32h544c17.674 0 32 14.326 32 32s-14.326 32-32 32h-544c-17.673 0-32-14.326-32-32zM288 832c0-17.674 14.327-32 32-32h448c17.674 0 32 14.326 32 32s-14.326 32-32 32h-448c-17.673 0-32-14.326-32-32zM192 848c35.346 0 64-28.653 64-64s-28.654-64-64-64c-35.346 0-64 28.653-64 64s28.654 64 64 64z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["view-extended"],"defaultCode":59863,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1131,"name":"view-extended","prevSize":32,"id":219,"code":59863},"setIdx":0,"setId":6,"iconIdx":219},{"icon":{"paths":["M192 320c35.346 0 64-28.654 64-64s-28.654-64-64-64c-35.346 0-64 28.654-64 64s28.654 64 64 64z","M320 224c-17.673 0-32 14.327-32 32s14.327 32 32 32h544c17.674 0 32-14.327 32-32s-14.326-32-32-32h-544z","M192 576c35.346 0 64-28.653 64-64s-28.654-64-64-64c-35.346 0-64 28.653-64 64s28.654 64 64 64z","M320 480c-17.673 0-32 14.326-32 32s14.327 32 32 32h544c17.674 0 32-14.326 32-32s-14.326-32-32-32h-544z","M192 832c35.346 0 64-28.653 64-64s-28.654-64-64-64c-35.346 0-64 28.653-64 64s28.654 64 64 64z","M320 736c-17.673 0-32 14.326-32 32s14.327 32 32 32h544c17.674 0 32-14.326 32-32s-14.326-32-32-32h-544z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["view-medium"],"defaultCode":59864,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1132,"name":"view-medium","prevSize":32,"id":220,"code":59864},"setIdx":0,"setId":6,"iconIdx":220},{"icon":{"paths":["M640.854 256c26.512 0 48-21.49 48-48s-21.488-48-48-48c-26.509 0-48 21.49-48 48s21.491 48 48 48zM640.854 320c61.856 0 112-50.144 112-112s-50.144-112-112-112c-61.856 0-112 50.144-112 112s50.144 112 112 112zM592.854 416v256h-160v128h32v-96h224v-288h-96zM528.854 768h160c35.347 0 64-28.653 64-64v-288c0-35.347-28.653-64-64-64h-96c-35.344 0-64 28.653-64 64v192h-96c-35.344 0-64 28.653-64 64v128c0 35.347 28.656 64 64 64h32c35.347 0 64-28.653 64-64v-32zM784.854 448c0-17.674 14.326-32 32-32s32 14.326 32 32v384c0 17.674-14.326 32-32 32h-224c-17.674 0-32-14.326-32-32s14.326-32 32-32h192v-352zM368.403 401.52c9.677-9.059 10.176-24.246 1.117-33.923l-48.272-51.558v-47.925c0-13.255-10.746-24-24-24s-24 10.745-24 24v57.406c0 6.093 2.316 11.955 6.48 16.403l54.752 58.48c9.059 9.677 24.246 10.176 33.923 1.117zM170.974 414.278c53.308 74.218 156.687 91.171 230.908 37.862 10.765-7.731 25.76-5.274 33.494 5.491 7.731 10.768 5.274 25.763-5.494 33.494-95.75 68.771-229.121 46.902-297.894-48.848s-46.902-229.123 48.848-297.895c75.545-54.26 174.453-52.073 246.597-1.796 10.874 7.578 13.546 22.538 5.968 33.412s-22.538 13.547-33.411 5.968c-55.971-39.005-132.65-40.618-191.153 1.402-74.219 53.308-91.171 156.688-37.864 230.909z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["waiting-on-me"],"defaultCode":59865,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1133,"name":"waiting-on-me","prevSize":32,"id":221,"code":59865},"setIdx":0,"setId":6,"iconIdx":221},{"icon":{"paths":["M512 352.003c17.674 0 32 14.33 32 32v224c0 17.674-14.326 32-32 32s-32-14.326-32-32v-224c0-17.67 14.326-32 32-32z","M512 672.003c17.674 0 32 14.33 32 32 0 17.674-14.326 32-32 32s-32-14.326-32-32c0-17.67 14.326-32 32-32z","M567.101 158.348c-24.774-41.922-85.427-41.922-110.202 0l-359.92 609.099c-25.21 42.662 5.544 96.557 55.099 96.557h719.845c49.555 0 80.307-53.894 55.098-96.557l-359.92-609.099zM512 190.906l359.923 609.097h-719.845l359.922-609.097z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["warning"],"defaultCode":59866,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1134,"name":"warning","prevSize":32,"id":222,"code":59866},"setIdx":0,"setId":6,"iconIdx":222},{"icon":{"paths":["M784.131 240.143c-35.43-35.658-77.581-63.931-124.016-83.181s-96.227-29.094-146.493-28.961c-210.863 0-382.322 171.532-382.414 382.376-0.085 67.104 17.523 133.043 51.047 191.171l-54.256 198.154 202.72-53.174c56.064 30.531 118.883 46.531 182.717 46.538h0.166c210.752 0 382.32-171.552 382.394-382.394 0.16-50.25-9.645-100.029-28.848-146.464-19.2-46.436-47.418-88.604-83.018-124.065zM513.622 828.486h-0.186c-56.922 0.006-112.797-15.293-161.776-44.298l-11.606-6.896-120.302 31.555 32.124-117.347-7.573-12.029c-31.783-50.64-48.608-109.232-48.535-169.021 0-175.235 142.653-317.816 317.981-317.816 84.301 0.049 165.13 33.58 224.707 93.218 59.581 59.638 93.034 140.499 92.998 224.8-0.074 175.254-142.653 317.834-317.834 317.834zM687.958 590.451c-9.552-4.787-56.528-27.907-65.293-31.171s-15.126-4.768-21.491 4.784c-6.362 9.555-24.678 31.171-30.253 37.462-5.574 6.288-11.149 7.187-20.701 2.4-9.555-4.784-40.339-14.87-76.845-47.434-28.403-25.322-47.584-56.621-53.174-66.192-5.594-9.571-0.589-14.669 4.198-19.491 4.291-4.291 9.552-11.168 14.32-16.742s6.381-9.571 9.552-15.933c3.174-6.362 1.597-11.955-0.787-16.739-2.384-4.787-21.491-51.818-29.466-70.96-7.757-18.63-15.622-16.099-21.491-16.394-5.501-0.275-11.955-0.349-18.336-0.349-4.842 0.131-9.606 1.264-13.994 3.325-4.387 2.058-8.298 5.005-11.491 8.65-8.749 9.552-33.428 32.675-33.428 79.706s34.234 92.467 39.002 98.848c4.765 6.381 67.382 102.883 163.187 144.266 17.792 7.68 35.974 14.413 54.477 20.17 22.902 7.334 43.731 6.237 60.179 3.779 18.336-2.733 56.547-23.104 64.506-45.418 7.955-22.317 7.955-41.459 5.501-45.456-2.458-3.997-8.618-6.326-18.173-11.11z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["whatsapp-monochromatic"],"defaultCode":59868,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1135,"name":"whatsapp-monochromatic","prevSize":32,"id":223,"code":59868},"setIdx":0,"setId":6,"iconIdx":223},{"icon":{"paths":["M354.006 399.123l14.029 0.627-0.541-16.726-152.878 1.578c49.916-116.491 165.64-198.133 300.366-198.133 99.645 0 188.893 44.659 248.81 115.065-3.712 0.171-7.491 0.492-11.526 1.068 0 0-63.76 14.898-13.302 118.708 0 0 31.085 84.541-19.306 198.774l-28.403 73.306-99.101-264.723c0 0-5.984-28.154 23.61-28.154l23.76-1.472 0.339-16.035h-228.368v14.458c0 0 39.83-0.288 56.15 27.149l40.762 103.779-73.014 174.403-108.608-272.4c0 0-3.389-31.779 27.222-31.27z","M841.603 513.168c0-33.862-5.235-66.643-14.726-97.357l-145.949 378.755c96.134-56.88 160.675-161.571 160.675-281.398z","M411.478 823.011c32.49 10.912 67.267 16.778 103.488 16.778 37.85 0 74.102-6.406 107.898-18.256l-99.709-258.502-111.677 259.981z","M188.279 513.149c0-32.083 4.712-63.066 13.339-92.336l1 2.051 152.656 375.229c-99.606-55.882-166.994-162.538-166.994-284.944z","M130.705 512.093c0-211.775 172.316-384.093 384.076-384.093 211.725 0 383.923 172.318 383.923 384.093 0 211.776-172.198 384.010-383.923 384.010-211.757 0-384.076-172.234-384.076-384.010zM514.781 879.254c202.384 0 367.11-164.742 367.11-367.178 0-202.486-164.726-367.145-367.11-367.161-202.489 0-367.213 164.673-367.213 367.161 0 202.435 164.724 367.178 367.213 367.178z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["wordpress-monochromatic"],"defaultCode":59755,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1136,"name":"wordpress-monochromatic","prevSize":32,"id":224,"code":59755},"setIdx":0,"setId":6,"iconIdx":224},{"icon":{"paths":["M193.353 405.334h213.332v-213.334h-213.332v213.334zM129.353 170.667c0-23.564 19.102-42.667 42.667-42.667h256c23.565 0 42.666 19.102 42.666 42.667v255.999c0 23.565-19.101 42.669-42.666 42.669h-256c-23.564 0-42.667-19.104-42.667-42.669v-255.999zM620.019 405.334h213.334v-213.334h-213.334v213.334zM556.019 170.667c0-23.564 19.104-42.667 42.666-42.667h256c23.565 0 42.669 19.102 42.669 42.667v255.999c0 23.565-19.104 42.669-42.669 42.669h-256c-23.562 0-42.666-19.104-42.666-42.669v-255.999zM620.019 618.666h213.334v213.334h-213.334v-213.334zM598.685 554.666c-23.562 0-42.666 19.104-42.666 42.669v256c0 23.562 19.104 42.666 42.666 42.666h256c23.565 0 42.669-19.104 42.669-42.666v-256c0-23.565-19.104-42.669-42.669-42.669h-256zM193.353 832h213.332v-213.334h-213.332v213.334zM129.353 597.334c0-23.565 19.102-42.669 42.667-42.669h256c23.565 0 42.666 19.104 42.666 42.669v256c0 23.562-19.101 42.666-42.666 42.666h-256c-23.564 0-42.667-19.104-42.667-42.666v-256z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["workspaces"],"defaultCode":59870,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1137,"name":"workspaces","prevSize":32,"id":225,"code":59870},"setIdx":0,"setId":6,"iconIdx":225},{"icon":{"paths":["M384.509 149.333c0-11.782 9.562-21.333 21.36-21.333h85.446c11.798 0 21.363 9.551 21.363 21.333v106.667h-106.81c-11.798 0-21.36-9.551-21.36-21.333v-85.333z","M512.678 256h106.806c11.798 0 21.36 9.551 21.36 21.333v85.332c0 11.782-9.562 21.334-21.36 21.334h-106.806v-128z","M384.509 405.334c0-11.782 9.562-21.334 21.36-21.334h106.81v128h-106.81c-11.798 0-21.36-9.552-21.36-21.334v-85.331z","M512.678 512h106.806c11.798 0 21.36 9.552 21.36 21.334v106.666h-128.166v-128z","M427.232 640c-23.597 0-42.723 19.104-42.723 42.666v170.669c0 23.562 19.126 42.666 42.723 42.666h170.89c23.597 0 42.723-19.104 42.723-42.666v-213.334h-213.613zM491.315 725.334c-11.798 0-21.36 9.549-21.36 21.331v42.669c0 11.782 9.562 21.331 21.36 21.331h42.723c11.798 0 21.36-9.549 21.36-21.331v-42.669c0-11.782-9.562-21.331-21.36-21.331h-42.723z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["zip"],"defaultCode":59871,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1138,"name":"zip","prevSize":32,"id":226,"code":59871},"setIdx":0,"setId":6,"iconIdx":226},{"icon":{"paths":["M373.437 492.374c25.77-8.39 53.667-8.131 79.376 0.906l19.187 6.752c25.293 8.893 52.963 8.275 77.843-1.718l4.877-1.971c26.989-10.842 56.726-12.432 84.592-4.685 2.832 0.787 5.648 1.674 8.438 2.656 22.342 7.856 41.504 21.35 56.25 38.499 17.84 20.742 29.178 46.848 31.533 75.030 0.304 3.645 0.467 7.328 0.467 11.030v117.126c0 9.936-1.51 19.517-4.314 28.531-4.467 14.371-12.275 27.245-22.435 37.843-2.595 2.704-5.296 5.302-8.189 7.69-2.368 1.952-4.822 3.805-7.376 5.53-5.107 3.453-10.57 6.413-16.31 8.845-11.491 4.861-24.115 7.562-37.376 7.562l-260.938-0.125c-3.277-0.166-6.506-0.515-9.686-1.002-7.949-1.213-15.571-3.398-22.752-6.435-5.741-2.432-11.203-5.392-16.31-8.845-2.55-1.725-5.008-3.578-7.376-5.53-2.893-2.387-5.595-4.986-8.188-7.69-10.162-10.598-17.97-23.472-22.437-37.843-2.803-9.014-4.312-18.595-4.313-28.531v-125.968c0-0.675 0.052-1.357 0.062-2.032 0.487-29.827 11.671-57.741 30.531-79.344 12.578-14.41 28.523-26.032 47.032-33.469 2.576-1.034 5.187-1.958 7.811-2.813zM426.374 552.093c-10.461-2.643-21.446-2.406-31.779 0.688-1.728 0.518-3.443 1.104-5.126 1.782-1.757 0.704-3.466 1.488-5.126 2.342-0.115 0.061-0.227 0.128-0.342 0.189-19.514 10.24-31.997 30.573-32 52.938v125.968c0 17.674 14.326 32 32 32h256c17.674 0 32-14.326 32-32v-117.126c-0.003-23.798-12.39-45.472-32-57.718-0.253-0.157-0.525-0.282-0.781-0.435-1.555-0.944-3.142-1.837-4.781-2.656-0.57-0.288-1.139-0.576-1.718-0.845-2.006-0.934-4.070-1.786-6.189-2.531-3.894-1.37-7.878-2.394-11.907-3.030-10.070-1.597-20.403-0.883-30.218 2.061-1.958 0.589-3.901 1.264-5.811 2.032l-4.877 1.936c-9.818 3.946-19.914 6.973-30.157 9.062-12.81 2.618-25.85 3.763-38.874 3.469l-7.814-0.342c-10.406-0.704-20.774-2.333-30.966-4.906-2.547-0.643-5.072-1.366-7.594-2.125-2.522-0.762-5.037-1.562-7.533-2.438l-19.219-6.749c-1.709-0.602-3.443-1.123-5.187-1.565z","M174.188 458.624c19.051-8.506 40.722-9.024 60.156-1.437l7.906 3.094c8.268 3.229 17.489 2.992 25.594-0.624l0.844-0.378c20.012-8.931 42.773-9.469 63.188-1.498 6.358 2.483 12.262 5.722 17.658 9.562-27.331 11.914-50.085 31.030-66.283 54.688-20.961 6.541-43.62 5.914-64.281-2.157l-7.906-3.062c-3.484-1.36-7.366-1.274-10.781 0.25-5.037 2.25-8.281 7.264-8.281 12.781v49.219c0.001 15.981 12.956 28.938 28.938 28.938h35.125c-0.009 0.675-0.062 1.357-0.062 2.032v61.968h-35.062c-51.328 0-92.937-41.61-92.938-92.938v-49.219c0-30.768 18.093-58.672 46.188-71.219z","M878.406 422.813c11.197 14.163 17.594 31.891 17.594 50.563v102.624c0 53.021-42.979 96-96 96h-32v-53.126l-0.125-6.499c-0.058-1.462-0.246-2.922-0.342-4.374h32.467c17.674 0 32-14.326 32-32v-102.624c0-3.12-0.842-6.109-2.342-8.72 13.494-10.003 27.248-21.219 40.374-33.562 2.797-2.634 5.539-5.45 8.374-8.282z","M512.032 192c-0.106 19.205 0.71 40.743 2.938 64.156-0.986-0.045-1.974-0.156-2.97-0.156-35.347 0-64 28.654-64 64s28.653 64 64 64c14.624 0 28.035-4.995 38.813-13.251 12.131 18.838 26.362 35.45 40.406 49.718-21.798 17.213-49.29 27.533-79.219 27.533-70.691 0-128-57.309-128-128 0-70.692 57.338-128 128.032-128z","M256 224c53.019 0 96 42.981 96 96 0 53.021-42.981 96-96 96s-96-42.979-96-96c0-53.019 42.981-96 96-96zM256 288c-17.673 0-32 14.327-32 32s14.327 32 32 32c17.673 0 32-14.326 32-32s-14.327-32-32-32z","M735.997 96c44.746 0 121.2 10.367 153.827 29.086 4.662 18.723 11.184 75.812 0 154.423-11.187 78.625-107.213 145.092-153.824 168.49-46.614-23.402-142.637-89.869-153.824-168.49-11.184-78.609-4.662-135.699 0-154.423 32.627-18.719 109.072-29.084 153.821-29.086z"],"attrs":[{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["team-shield"]},"attrs":[{},{},{},{},{},{}],"properties":{"order":14,"id":1,"name":"team-shield","prevSize":32,"code":59877},"setIdx":4,"setId":2,"iconIdx":0},{"icon":{"paths":["M352 128c17.674 0 32 14.327 32 32v160h142.25c7.789 23.664 19.898 45.082 33.718 64h-175.968v256h256v-177.126c23.274 17.472 46 31.267 64 40.563v136.563h160c17.674 0 32 14.326 32 32s-14.326 32-32 32h-160v160c0 17.674-14.326 32-32 32s-32-14.326-32-32v-160h-256v160c0 17.674-14.326 32-32 32s-32-14.326-32-32v-160h-160c-17.673 0-32-14.326-32-32s14.327-32 32-32h160v-256h-160c-17.673 0-32-14.326-32-32s14.327-32 32-32h160v-160c0-17.673 14.326-32 32-32z","M735.997 96c44.746 0 121.2 10.367 153.827 29.086 4.662 18.723 11.184 75.812 0 154.423-11.187 78.625-107.213 145.092-153.824 168.49-46.614-23.402-142.637-89.869-153.824-168.49-11.184-78.609-4.662-135.699 0-154.423 32.627-18.719 109.072-29.084 153.821-29.086z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["hash-shield"]},"attrs":[{},{}],"properties":{"order":15,"id":0,"name":"hash-shield","prevSize":32,"code":59878},"setIdx":4,"setId":2,"iconIdx":1}],"height":1024,"metadata":{"name":"custom"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"custom","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon","name":"icomoon"},"historySize":50,"showCodes":true,"gridSize":16}}
\ No newline at end of file
+{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M511.981 352l23.158 0.531c27.558 1.075 67.286 3.907 110.31 9.533l21.722 3.062c51.43 7.702 107.453 19.722 152.624 38.406l10.282 4.717c21.552 10.906 38.384 26.317 49.718 45.75l2.531 4.563 4.282 9.187c7.645 18.461 9.974 37.693 9.248 55.75l-0.624 8.906c-4.24 44.458-26.202 87.302-47.219 114.624-15.325 19.914-40.765 28.912-64.966 23.376l-4.813-1.312-121.062-37.782c-6.442-2.010-12.534-5.027-18.032-8.938-5.062-3.6-9.328-7.738-12.813-12l-0.25-0.31c-8.304-10.291-12.813-22.16-14.374-33.533l-0.032 0.032-0.938-6.781c-0.39-2.394-0.851-4.656-1.344-6.752l-1.718-6.061c-0.301-0.877-0.595-1.642-0.877-2.314l-5.062-1.405c-3.606-0.835-7.811-1.603-12.499-2.314l-15.405-1.939c-21.978-2.285-46.368-3.091-61.875-3.091-11.638 0-28.234 0.464-45.062 1.654l-16.752 1.437c-11.101 1.158-20.694 2.554-27.904 4.221l0.029 0.032c-2.042 0.47-3.728 0.979-5.123 1.405l-0.845 2.314c-1.194 3.475-2.288 7.872-3.094 12.813l-0.906 6.781-0.061-0.032c-1.552 11.274-5.997 23.251-14.47 33.686l-0.218 0.25c-3.712 4.525-7.238 7.603-9.094 9.126-1.082 0.89-2.067 1.626-2.874 2.218-0.41 0.301-0.803 0.566-1.158 0.813-0.179 0.128-0.365 0.262-0.531 0.378-0.083 0.054-0.17 0.099-0.25 0.154l-0.125 0.096-0.064 0.061c-5.13 3.453-10.781 6.157-16.685 8l-121.032 37.782c-25.587 7.984-53.434-0.822-69.781-22.064-19.705-25.616-40.268-64.87-46.25-106.31l-0.969-8.314c-2.239-23.485 0.272-49.619 12.906-73.811l2.531-4.595c13.079-22.429 33.47-39.501 59.969-50.467l9.875-3.907c49.97-19.011 111.142-30.586 164.499-37.562l21.19-2.563c48.608-5.517 90.733-7.498 112.278-7.501zM511.952 416c-21.59 0.003-70.278 2.355-125.158 9.533l-20.842 2.934c-48.928 7.35-99.007 18.378-137.313 34.221-16.072 6.65-25.129 15.674-30.281 25.53-5.387 10.317-7.357 23.242-5.938 38.125 2.446 25.635 14.654 53.101 28.313 73.408l5.937 8.25 121.033-37.782 0.374-0.342c0.176-0.218 0.352-0.515 0.499-0.877l0.314-1.28 1.062-7.469c0.915-5.789 2.17-11.942 3.904-18.032l1.907-6.029c3.443-10.022 9.338-22.653 20.25-31.69l3.626-2.688c8.784-5.837 19.83-8.973 28.189-10.906 5.434-1.254 11.283-2.336 17.312-3.248l18.374-2.314c24.688-2.57 51.325-3.437 68.438-3.437 17.11 0 43.786 0.864 68.499 3.437 12.304 1.28 24.822 3.053 35.686 5.562 8.358 1.933 19.405 5.069 28.189 10.906l3.626 2.688c10.915 9.034 16.806 21.664 20.25 31.69 2.742 7.99 4.589 16.346 5.811 24.061l1.062 7.469c0.112 0.944 0.461 1.718 0.813 2.157 0.154 0.189 0.288 0.304 0.346 0.342l121.062 37.782c14.899-19.37 29.488-48.426 33.562-76.125l0.688-5.533c1.418-14.886-0.55-27.808-5.939-38.125-4.509-8.624-11.994-16.621-24.56-22.938l-5.722-2.592c-38.304-15.843-88.384-26.87-137.312-34.221l-20.842-2.934c-54.896-7.178-103.642-9.533-125.219-9.533z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["[redraw] phone-off"]},"attrs":[{}],"properties":{"order":1249,"id":2,"name":"phone-off","prevSize":32,"code":59805},"setIdx":0,"setId":4,"iconIdx":0},{"icon":{"paths":["M357.021 193.344c24.915-3.241 49.27 8.378 62.467 29.406l2.47 4.344 58.874 112.311c3.133 5.974 5.315 12.413 6.438 19.062 1.030 6.122 1.142 12.061 0.592 17.533l-0.061 0.406c-1.405 13.142-6.598 24.73-13.533 33.875l-4.093 5.469c-1.414 1.965-2.682 3.888-3.814 5.718l-3.091 5.501c-0.406 0.826-0.726 1.578-1.002 2.25l2.563 4.592c1.962 3.139 4.41 6.656 7.219 10.47l9.53 12.25c13.923 17.158 30.598 34.973 41.565 45.936 8.227 8.227 20.288 19.632 33.030 30.688l12.845 10.845c8.662 7.030 16.442 12.829 22.717 16.749v-0.061c1.779 1.11 3.338 1.971 4.624 2.656l2.253-1.062c3.296-1.613 7.162-3.955 11.216-6.877l5.44-4.125 0.029 0.064c9.069-6.877 20.691-12.205 34.064-13.594l0.314-0.032c5.821-0.573 10.515-0.266 12.906-0.032 1.389 0.138 2.605 0.317 3.594 0.47 0.493 0.077 0.954 0.176 1.376 0.25 0.214 0.038 0.454 0.086 0.656 0.125 0.096 0.019 0.189 0.045 0.282 0.064h0.25c6.067 1.187 11.99 3.283 17.469 6.154l112.282 58.877c23.734 12.445 37.21 38.358 33.747 64.938-4.179 32.045-17.395 74.342-42.467 107.875l-5.187 6.563c-15.024 18.189-35.302 34.886-61.344 43.062l-5.030 1.469c-25.107 6.608-51.606 4.262-78.096-6.72l-9.75-4.218c-48.774-21.891-100.214-56.989-142.874-89.782l-16.781-13.155c-38.272-30.474-69.482-58.861-84.72-74.096l-15.968-16.749c-18.726-20.246-44.835-50.349-71.281-84.749l-13.188-17.501c-30.919-41.814-62.020-89.946-80.75-135.094l-3.938-10.595c-7.528-22.95-8.54-45.773-2.812-67.53l1.437-5 3.469-9.531c7.649-18.457 19.596-33.715 32.875-45.969l6.75-5.844c34.436-28.435 80.257-43.198 114.439-47.656zM365.27 256.812c-24.234 3.162-55.1 13.389-77.564 30.094l-4.375 3.406c-11.528 9.521-19.294 20.053-22.781 31.156-2.911 9.286-3.262 20.243 1.156 33.594l2.219 5.875c15.884 38.291 43.475 81.52 72.874 121.312l12.688 16.813c33.738 43.885 66.525 80.022 81.782 95.28 15.267 15.267 51.37 48.019 95.248 81.75l16.813 12.656c39.792 29.398 82.995 57.024 121.283 72.909 16.064 6.659 28.854 6.669 39.469 3.341 11.101-3.485 21.635-11.219 31.155-22.749 16.397-19.856 27.203-47.92 31.907-71.936l1.622-10.032-112.31-58.845-0.499-0.032c-0.278 0.032-0.614 0.102-0.97 0.253l-1.126 0.685-6.032 4.531c-4.739 3.446-9.971 6.925-15.498 10l-5.626 2.909c-9.52 4.653-22.614 9.418-36.72 8.093l-4.467-0.656c-10.339-2.083-20.381-7.677-27.658-12.218-4.726-2.954-9.626-6.326-14.531-9.939l-14.624-11.376c-19.277-15.638-38.71-33.869-50.813-45.968-12.099-12.099-30.374-31.549-46.032-50.845-7.795-9.606-15.373-19.731-21.28-29.187-4.541-7.27-10.134-17.29-12.221-27.622l-0.656-4.47c-1.328-14.099 3.411-27.197 8.064-36.72 3.709-7.584 8.317-14.806 12.906-21.123l4.531-6.032c0.592-0.746 0.909-1.565 0.97-2.125 0.022-0.227 0.010-0.397 0-0.467l-58.906-112.314z","M735.987 448c17.674 0 32 14.326 32 32s-14.326 32-32 32c-17.667-0.006-32-14.333-32-32s14.333-31.994 32-32z","M735.987 128c26.314 0 52.234 7.542 74.032 21.906 21.834 14.393 38.666 35.096 47.408 59.5 8.758 24.467 8.758 50.94 0 75.406-8.742 24.404-25.574 45.076-47.408 59.469-4.662 3.072-9.594 5.478-14.032 7.344-19.552 8.224-27.994 21.402-28 31.779v0.595c0 17.674-14.326 32-32 32-17.667-0.006-32-14.333-32-32v-0.595c0.006-46.109 34.675-77.103 67.187-90.78 2.208-0.928 3.322-1.583 3.626-1.781 10.966-7.229 18.586-17.045 22.374-27.625 3.763-10.514 3.766-21.737 0-32.25-3.789-10.58-11.408-20.396-22.374-27.625-10.995-7.245-24.595-11.344-38.813-11.344-14.214 0.003-27.818 4.097-38.813 11.344-10.96 7.229-18.586 17.046-22.374 27.625-3.763 10.511-3.757 21.739 0 32.25 5.958 16.635-2.678 34.976-19.312 40.937-16.634 5.95-34.979-2.709-40.938-19.344-8.758-24.464-8.758-50.942 0-75.406 8.739-24.403 25.578-45.107 47.408-59.5 21.795-14.366 47.718-21.904 74.029-21.906z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["phone-question-mark"]},"attrs":[{},{},{}],"properties":{"order":1250,"id":1,"name":"phone-question-mark","prevSize":32,"code":59835},"setIdx":0,"setId":4,"iconIdx":1},{"icon":{"paths":["M357.018 193.349c24.918-3.241 49.27 8.378 62.47 29.406l2.467 4.312 58.877 112.343c3.133 5.974 5.315 12.413 6.438 19.062 1.030 6.118 1.142 12.058 0.592 17.533l-0.061 0.406c-1.408 13.142-6.598 24.73-13.533 33.875l-4.093 5.469c-1.414 1.962-2.682 3.888-3.814 5.718l-3.091 5.498c-0.406 0.829-0.726 1.581-1.002 2.253l2.563 4.56c1.962 3.142 4.406 6.685 7.219 10.502l9.53 12.25c13.923 17.155 30.598 34.97 41.565 45.936 8.227 8.227 20.288 19.629 33.030 30.688l12.842 10.845c8.669 7.030 16.445 12.829 22.72 16.749v-0.061c1.776 1.107 3.341 1.939 4.624 2.624l2.253-1.030c3.296-1.616 7.162-3.955 11.216-6.877l5.44-4.157 0.029 0.096c9.069-6.877 20.691-12.208 34.064-13.594l0.314-0.032c5.821-0.576 10.515-0.266 12.906-0.032 1.389 0.138 2.605 0.317 3.594 0.47 0.493 0.074 0.954 0.173 1.376 0.25 0.214 0.035 0.454 0.054 0.656 0.093 0.096 0.019 0.186 0.077 0.278 0.093h0.253c6.067 1.19 11.99 3.286 17.469 6.157l112.278 58.877c23.738 12.445 37.213 38.358 33.75 64.934-4.179 32.048-17.395 74.346-42.467 107.875l-5.187 6.563c-15.024 18.192-35.302 34.89-61.344 43.062l-5.030 1.469c-25.107 6.608-51.606 4.262-78.096-6.717l-9.75-4.221c-48.774-21.891-100.214-56.986-142.874-89.779l-16.781-13.158c-38.272-30.47-69.482-58.858-84.72-74.093l-15.968-16.749c-18.726-20.25-44.835-50.352-71.281-84.752l-13.188-17.501c-30.918-41.811-62.020-89.946-80.75-135.091l-3.937-10.595c-7.529-22.95-8.54-45.773-2.812-67.531l1.437-5 3.469-9.531c7.649-18.458 19.595-33.714 32.875-45.969l6.75-5.844c34.436-28.435 80.257-43.198 114.436-47.656zM365.27 256.818c-24.234 3.162-55.1 13.389-77.564 30.094l-4.375 3.406c-11.529 9.522-19.295 20.053-22.781 31.157-2.911 9.286-3.263 20.24 1.156 33.594l2.219 5.875c15.882 38.285 43.479 81.491 72.875 121.28l12.688 16.845c33.738 43.885 66.525 80.022 81.782 95.28 15.267 15.267 51.37 48.019 95.248 81.75l16.813 12.656c39.792 29.398 82.995 57.024 121.283 72.906 16.064 6.662 28.854 6.672 39.469 3.344 11.101-3.485 21.635-11.222 31.155-22.749 16.397-19.856 27.203-47.92 31.907-71.939l1.622-10.029-112.31-58.845-0.502-0.032c-0.275 0.029-0.611 0.099-0.966 0.25l-1.126 0.688-6.032 4.531c-4.739 3.446-9.971 6.925-15.498 10l-5.626 2.906c-9.52 4.653-22.618 9.421-36.72 8.096l-4.467-0.656c-10.339-2.083-20.381-7.677-27.658-12.221-4.726-2.954-9.626-6.323-14.531-9.936l-14.624-11.376c-19.277-15.638-38.71-33.869-50.813-45.968-12.099-12.099-30.378-31.552-46.032-50.845-7.795-9.606-15.373-19.731-21.28-29.187-4.541-7.27-10.134-17.293-12.221-27.626l-0.656-4.467c-1.328-14.099 3.414-27.2 8.064-36.72 3.709-7.584 8.317-14.81 12.906-21.123l4.531-6.064c0.589-0.746 0.909-1.536 0.97-2.093 0.022-0.227 0.010-0.397 0-0.47l-58.906-112.312z","M841.363 137.38c12.496-12.497 32.784-12.497 45.28 0 12.486 12.495 12.486 32.756 0 45.25l-73.498 73.469 73.498 73.501c12.486 12.493 12.483 32.752 0 45.248-12.496 12.496-32.784 12.496-45.28 0l-73.501-73.499-73.248 73.281c-12.499 12.49-32.758 12.493-45.251 0-12.49-12.496-12.486-32.755 0-45.251l73.251-73.28-73.251-73.25c-12.486-12.496-12.49-32.756 0-45.25 12.496-12.497 32.784-12.497 45.28 0l73.251 73.25 73.469-73.469z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["[redraw] phone-issue"]},"attrs":[{},{}],"properties":{"order":1251,"id":0,"name":"phone-issue","prevSize":32,"code":59879},"setIdx":0,"setId":4,"iconIdx":2},{"icon":{"paths":["M727.050 406.195c12.259-12.73 11.878-32.986-0.854-45.245-12.73-12.259-32.986-11.878-45.245 0.854l-254.285 264.061-115.615-120.061c-12.259-12.733-32.516-13.114-45.247-0.854s-13.113 32.515-0.854 45.245l138.666 144c6.032 6.266 14.355 9.805 23.050 9.805 8.698 0 17.021-3.539 23.053-9.805l277.331-288z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["check-single"],"grid":0},"attrs":[{}],"properties":{"order":1151,"id":0,"name":"check-single","prevSize":32,"code":59876},"setIdx":2,"setId":2,"iconIdx":0},{"icon":{"paths":["M599.050 406.195c12.259-12.73 11.878-32.986-0.854-45.245-12.73-12.259-32.986-11.878-45.245 0.854l-254.284 264.061-115.616-120.061c-12.259-12.733-32.516-13.114-45.247-0.854s-13.113 32.515-0.854 45.245l138.667 144c6.032 6.266 14.354 9.805 23.050 9.805s17.018-3.539 23.052-9.805l277.331-288z","M887.021 406.227c12.275-12.714 11.92-32.973-0.794-45.248s-32.973-11.92-45.248 0.794l-255.040 264.157-50.918-52.739c-12.275-12.714-32.534-13.069-45.248-0.794s-13.069 32.534-0.794 45.248l73.939 76.582c6.029 6.246 14.339 9.773 23.021 9.773s16.992-3.526 23.021-9.773l278.061-288z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{},{}]},"tags":["check-double"],"grid":0},"attrs":[{},{}],"properties":{"order":1150,"id":1,"name":"check-double","prevSize":32,"code":59875},"setIdx":2,"setId":2,"iconIdx":1},{"icon":{"paths":["M511.997 256c35.347 0 64-28.654 64-64s-28.653-64-64-64c-35.344 0-64 28.654-64 64s28.656 64 64 64zM639.997 192c0 70.692-57.306 128-128 128-70.691 0-128-57.308-128-128s57.309-128 128-128c70.694 0 128 57.308 128 128z","M192.859 431.645c0.669 1.446 2.097 3.488 5.957 5.232 18.33 8.272 67.426 22.054 115.377 34.39 23.244 5.981 45.187 11.366 61.327 15.261 8.067 1.946 14.672 3.517 19.258 4.598l7.078 1.664c0 0 0.026 0.003-0.218 1.046l0.218-1.046c8.33 1.933 15.562 7.123 20.042 14.406 4.48 7.28 5.859 16.054 3.834 24.358l-83.856 343.437c-0.483 1.984-1.155 3.914-2.006 5.77-1.155 2.509-1.242 5.302-0.272 7.853 0.982 2.573 3.053 4.893 6.006 6.237 2.976 1.357 6.438 1.523 9.568 0.435 3.114-1.082 5.44-3.238 6.688-5.754 0.362-0.73 0.749-1.443 1.165-2.144l121.434-204.461c5.766-9.706 16.224-15.658 27.514-15.658 11.293 0 21.747 5.952 27.514 15.658l121.437 204.461c0.413 0.701 0.803 1.414 1.165 2.144 1.245 2.515 3.571 4.672 6.685 5.754 3.13 1.088 6.592 0.922 9.568-0.435 2.957-1.344 5.027-3.664 6.006-6.237 0.97-2.55 0.883-5.344-0.269-7.853-0.854-1.856-1.526-3.786-2.010-5.77l-83.853-343.437c-2.029-8.304-0.65-17.075 3.83-24.358 4.48-7.28 11.686-12.467 20.013-14.4l0.266 1.139c-0.262-1.139-0.266-1.139-0.266-1.139l1.821-0.426 5.283-1.245c4.582-1.082 11.184-2.653 19.248-4.598 16.138-3.894 38.074-9.28 61.312-15.261 47.936-12.333 97.046-26.118 115.424-34.4 3.888-1.75 5.322-3.802 5.994-5.248 0.813-1.763 1.155-4.179 0.557-6.861-0.602-2.678-1.974-4.858-3.629-6.259-1.402-1.187-3.76-2.499-8.109-2.499h-615.975c-4.316 0-6.656 1.302-8.052 2.486-1.647 1.402-3.026 3.581-3.628 6.272s-0.26 5.12 0.556 6.886zM172.486 495.21c-75.805-34.218-48.392-143.21 31.498-143.21h615.975c79.907 0 107.44 108.989 31.478 143.216-24.554 11.066-79.939 26.24-125.766 38.032-21.494 5.533-41.85 10.554-57.651 14.384l75.597 309.616c6.986 17.306 7.216 36.614 0.538 54.147-7.085 18.598-21.283 33.501-39.283 41.699-17.978 8.189-38.474 9.126-57.123 2.64-18.234-6.342-33.469-19.36-42.39-36.566l-93.386-157.232-93.386 157.232c-8.918 17.206-24.157 30.224-42.387 36.566-18.653 6.486-39.146 5.549-57.126-2.64-18-8.198-32.198-23.101-39.282-41.699-6.678-17.533-6.449-36.842 0.539-54.147l75.595-309.613c-15.808-3.83-36.172-8.854-57.676-14.387-45.829-11.789-101.229-26.966-125.761-38.038z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{},{}]},"tags":["accessibility"],"grid":0},"attrs":[{},{}],"properties":{"order":1147,"id":2,"name":"accessibility","prevSize":32,"code":59874},"setIdx":2,"setId":2,"iconIdx":2},{"icon":{"paths":["M512 928c-229.75 0-416-186.246-416-416 0-229.75 186.25-416 416-416 229.754 0 416 186.25 416 416 0 229.754-186.246 416-416 416zM678.176 433.884c12.742-12.247 13.139-32.504 0.896-45.246-12.25-12.742-32.506-13.143-45.247-0.896l-207.030 198.991-68.644-65.834c-12.755-12.232-33.012-11.809-45.245 0.946s-11.809 33.012 0.946 45.245l90.819 87.1c12.39 11.885 31.948 11.872 44.324-0.026l229.183-220.28z"],"attrs":[{"fill":"rgb(20, 134, 96)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":0}]},"tags":["success-circle"],"grid":0},"attrs":[{"fill":"rgb(20, 134, 96)"}],"properties":{"order":1143,"id":3,"name":"success-circle","prevSize":32,"code":59869},"setIdx":2,"setId":2,"iconIdx":3},{"icon":{"paths":["M928 512c0-229.75-186.246-416-416-416-229.75 0-416 186.25-416 416 0 229.754 186.25 416 416 416 229.754 0 416-186.246 416-416zM662.63 361.373c12.493 12.497 12.493 32.758 0 45.254l-105.375 105.373 105.375 105.373c12.493 12.497 12.493 32.758 0 45.258-12.499 12.493-32.761 12.493-45.258 0l-105.373-105.375-105.373 105.375c-12.497 12.493-32.758 12.493-45.254 0-12.497-12.499-12.497-32.761 0-45.258l105.372-105.373-105.372-105.373c-12.497-12.497-12.497-32.758 0-45.254s32.758-12.497 45.254 0l105.373 105.372 105.373-105.372c12.497-12.497 32.758-12.497 45.258 0z"],"attrs":[{"fill":"rgb(212, 12, 38)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":1}]},"tags":["error-circle"],"grid":0},"attrs":[{"fill":"rgb(212, 12, 38)"}],"properties":{"order":1144,"id":4,"name":"error-circle","prevSize":32,"code":59873},"setIdx":2,"setId":2,"iconIdx":4},{"icon":{"paths":["M512 819.2c169.661 0 307.2-137.539 307.2-307.2s-137.539-307.2-307.2-307.2c-169.662 0-307.2 137.538-307.2 307.2s137.538 307.2 307.2 307.2z","M1024 512c0-282.77-229.228-512-512-512-282.77 0-512 229.23-512 512 0 282.772 229.23 512 512 512 282.772 0 512-229.228 512-512zM921.6 512c0 226.217-183.383 409.6-409.6 409.6-226.216 0-409.6-183.383-409.6-409.6 0-226.215 183.384-409.6 409.6-409.6 226.217 0 409.6 183.385 409.6 409.6z"],"attrs":[{"fill":"rgb(21, 111, 245)"},{"fill":"rgb(21, 111, 245)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912111124512431405712431908124569921291162451452241651":[{"f":2},{"f":2}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":4},{"f":4}]},"tags":["radio-checked"],"grid":0},"attrs":[{"fill":"rgb(21, 111, 245)"},{"fill":"rgb(21, 111, 245)"}],"properties":{"order":5,"id":5,"name":"radio-checked","prevSize":32,"code":59855},"setIdx":2,"setId":2,"iconIdx":5},{"icon":{"paths":["M512 0c282.767 0 512 229.23 512 512 0 282.767-229.233 512-512 512-282.77 0-512-229.233-512-512 0-282.77 229.23-512 512-512zM512 921.6c226.217 0 409.6-183.383 409.6-409.6 0-226.216-183.383-409.6-409.6-409.6-226.216 0-409.6 183.384-409.6 409.6 0 226.217 183.384 409.6 409.6 409.6z"],"attrs":[{"fill":"rgb(158, 162, 168)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912111124512431405712431908124569921291162451452241651":[{"f":7}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":9}]},"tags":["radio-unchecked"],"grid":0},"attrs":[{"fill":"rgb(158, 162, 168)"}],"properties":{"order":4,"id":6,"name":"radio-unchecked","prevSize":32,"code":59867},"setIdx":2,"setId":2,"iconIdx":6},{"icon":{"paths":["M678.736 135.922c7.414-5.157 16.23-7.922 25.264-7.922s17.85 2.764 25.264 7.922c7.414 5.157 13.075 12.46 16.218 20.928l0.074 0.2 32.371 89.024 89.226 32.445c8.467 3.143 15.77 8.803 20.928 16.219 5.155 7.415 7.92 16.231 7.92 25.264 0 9.034-2.765 17.85-7.92 25.264-5.158 7.414-12.461 13.075-20.931 16.218l-0.198 0.074-89.024 32.371-32.445 89.226c-3.142 8.467-8.803 15.77-16.218 20.928-7.414 5.155-16.23 7.92-25.264 7.92s-17.85-2.765-25.264-7.92c-7.414-5.158-13.075-12.461-16.218-20.931l-0.074-0.198-32.371-89.024-89.226-32.445c-8.467-3.142-15.77-8.803-20.928-16.218-5.155-7.414-7.92-16.23-7.92-25.264 0-9.032 2.765-17.848 7.92-25.264 5.158-7.415 12.461-13.075 20.931-16.218l0.198-0.074 89.024-32.372 32.445-89.224c3.142-8.468 8.803-15.771 16.218-20.928zM713.437 384l7.533-20.717c2.224-6.029 5.725-11.504 10.269-16.045 4.541-4.544 10.016-8.045 16.045-10.269l0.128-0.045 46.541-16.925-46.669-16.971c-6.029-2.221-11.504-5.724-16.045-10.267-4.544-4.542-8.045-10.017-10.269-16.044l-0.045-0.128-16.925-46.541-16.97 46.669c-2.221 6.028-5.725 11.502-10.269 16.044-4.541 4.543-10.016 8.045-16.045 10.267l-0.128 0.047-46.541 16.924 46.669 16.97c6.029 2.221 11.504 5.725 16.045 10.269 4.544 4.541 8.045 10.016 10.269 16.045l0.045 0.128 16.925 46.541 9.437-25.952z","M323.091 265.629c8.256-6.153 18.346-9.629 28.909-9.629s20.653 3.477 28.909 9.629c8.224 6.127 14.17 14.542 17.402 23.873l0.067 0.191 47.674 140.467 130.595 50.883c9.696 3.856 17.67 10.64 23.126 19.046 5.44 8.381 8.227 18.118 8.227 27.91s-2.787 19.53-8.227 27.91c-5.456 8.406-13.434 15.19-23.126 19.046l-0.208 0.083-130.387 50.8-47.741 140.659c-3.232 9.328-9.178 17.744-17.402 23.872-8.256 6.15-18.346 9.629-28.909 9.629s-20.653-3.478-28.909-9.629c-8.223-6.128-14.17-14.544-17.402-23.875l-0.066-0.189-47.673-140.467-130.596-50.883c-9.694-3.856-17.669-10.64-23.125-19.046-5.442-8.381-8.228-18.118-8.228-27.91s2.787-19.53 8.228-27.91c5.456-8.406 13.431-15.19 23.125-19.046l0.208-0.083 130.388-50.8 47.739-140.658c3.233-9.331 9.18-17.746 17.403-23.873zM381.222 617.712l6.314-18.602c2.291-6.659 5.958-12.874 10.88-18.147 4.928-5.28 11.014-9.507 17.917-12.23l0.134-0.054 104.41-40.678-104.544-40.733c-6.902-2.723-12.989-6.95-17.917-12.23-4.922-5.274-8.589-11.488-10.88-18.147l-0.042-0.125-35.494-104.579-35.536 104.704c-2.291 6.659-5.959 12.874-10.881 18.147-4.929 5.28-11.015 9.507-17.916 12.23l-0.133 0.054-104.411 40.678 104.544 40.733c6.901 2.723 12.988 6.95 17.916 12.23 4.923 5.274 8.59 11.488 10.881 18.147l0.042 0.125 35.494 104.579 29.222-86.102z","M704 544c-9.034 0-17.85 2.765-25.264 7.92-7.414 5.158-13.075 12.461-16.218 20.928l-32.445 89.226-89.222 32.445c-8.47 3.142-15.773 8.803-20.931 16.218-5.155 7.414-7.92 16.23-7.92 25.264s2.765 17.85 7.92 25.264c5.158 7.414 12.461 13.075 20.928 16.218l89.226 32.445 32.445 89.222c3.142 8.47 8.803 15.773 16.218 20.931 7.414 5.155 16.23 7.92 25.264 7.92s17.85-2.765 25.264-7.92c7.414-5.158 13.075-12.461 16.218-20.928l32.445-89.226 89.222-32.445c8.47-3.142 15.773-8.803 20.931-16.218 5.155-7.414 7.92-16.23 7.92-25.264s-2.765-17.85-7.92-25.264c-5.158-7.414-12.461-13.075-20.928-16.218l-89.226-32.445-32.445-89.222c-3.142-8.47-8.803-15.773-16.218-20.931-7.414-5.155-16.23-7.92-25.264-7.92zM720.97 779.283l-6.829 18.784-10.141 27.885-16.97-46.669c-2.224-6.029-5.725-11.504-10.269-16.045-4.541-4.544-10.016-8.048-16.045-10.269l-46.669-16.97 46.669-16.97c6.029-2.221 11.504-5.725 16.045-10.269 4.544-4.541 8.048-10.016 10.269-16.045l16.97-46.669 16.97 46.669c2.224 6.029 5.725 11.504 10.269 16.045 4.541 4.544 10.016 8.048 16.045 10.269l46.669 16.97-46.669 16.97c-6.029 2.224-11.504 5.725-16.045 10.269-4.544 4.541-8.045 10.016-10.269 16.045z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{},{},{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{},{},{}]},"tags":["stars"],"grid":0},"attrs":[{},{},{}],"properties":{"order":1139,"id":7,"name":"stars","prevSize":32,"code":59845},"setIdx":2,"setId":2,"iconIdx":7},{"icon":{"paths":["M810.666 512c0.022 8.358-2.173 16.579-6.371 23.862-4.195 7.283-10.253 13.382-17.581 17.706l-454.067 271.187c-7.658 4.576-16.425 7.075-25.4 7.235-8.975 0.163-17.832-2.016-25.656-6.314-7.749-4.23-14.205-10.397-18.702-17.872-4.498-7.472-6.875-15.981-6.888-24.65v-542.311c0.013-8.668 2.39-17.176 6.888-24.649s10.953-13.642 18.702-17.872c7.824-4.297 16.681-6.477 25.656-6.315s17.743 2.661 25.4 7.237l454.067 271.186c7.328 4.323 13.386 10.422 17.581 17.706 4.198 7.283 6.394 15.504 6.371 23.862z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["play-shape-filled"],"grid":0},"attrs":[{}],"properties":{"order":4,"id":8,"name":"play-shape-filled","prevSize":32,"code":59842},"setIdx":2,"setId":2,"iconIdx":8},{"icon":{"paths":["M832 245.333v533.332c0 14.147-5.693 27.712-15.824 37.712-10.131 10.003-23.872 15.622-38.202 15.622h-135.066c-14.33 0-28.070-5.619-38.202-15.622-10.131-10-15.824-23.565-15.824-37.712v-533.332c0-14.145 5.693-27.71 15.824-37.712s23.872-15.621 38.202-15.621h135.066c14.33 0 28.070 5.619 38.202 15.621s15.824 23.567 15.824 37.712zM381.091 192h-135.065c-14.329 0-28.070 5.619-38.202 15.621s-15.824 23.567-15.824 37.712v533.332c0 14.147 5.692 27.712 15.824 37.712 10.132 10.003 23.874 15.622 38.202 15.622h135.065c14.33 0 28.070-5.619 38.202-15.622 10.131-10 15.824-23.565 15.824-37.712v-533.332c0-14.145-5.693-27.71-15.824-37.712s-23.872-15.621-38.202-15.621z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["pause-shape-filled"],"grid":0},"attrs":[{}],"properties":{"order":3,"id":9,"name":"pause-shape-filled","prevSize":32,"code":59843},"setIdx":2,"setId":2,"iconIdx":9},{"icon":{"paths":["M593.158 920.006c-80.698 16.051-164.342 7.814-240.355-23.674-76.014-31.485-140.984-84.806-186.695-153.216s-70.108-148.842-70.108-231.117h64c0 69.619 20.644 137.674 59.323 195.562 38.678 57.885 93.653 103.002 157.973 129.645 64.32 26.64 135.094 33.613 203.376 20.029 68.282-13.581 131.002-47.107 180.23-96.333 49.226-49.229 82.752-111.949 96.333-180.23 13.584-68.282 6.611-139.056-20.029-203.376-26.643-64.32-71.76-119.295-129.645-157.973-57.888-38.678-125.942-59.323-195.562-59.323v-64c82.278 0 162.707 24.398 231.117 70.109s121.731 110.681 153.216 186.695v0c31.488 76.013 39.725 159.658 23.674 240.355-16.051 80.694-55.67 154.819-113.85 212.998s-132.304 97.798-212.998 113.85z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["loading"],"grid":0},"attrs":[{}],"properties":{"order":2,"id":10,"name":"loading","prevSize":32,"code":59844},"setIdx":2,"setId":2,"iconIdx":10},{"icon":{"paths":["M544 208c0-17.673-14.326-32-32-32s-32 14.327-32 32v271.997h-271.998c-17.673 0-32 14.326-32 32s14.327 32 32 32h271.998v272.003c0 17.674 14.326 32 32 32s32-14.326 32-32v-272.003l272-0.003c17.674 0 32-14.326 32-32s-14.326-32-32-32l-272 0.003v-271.997z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["add"],"defaultCode":59872,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":923,"name":"add","prevSize":32,"id":11,"code":59872},"setIdx":2,"setId":2,"iconIdx":11},{"icon":{"paths":["M512 928c-14.218 0-28.275-0.714-42.144-2.112-16.694-1.68-30.557-12.528-36.688-27.395l-40.538-98.304-98.162 40.838c-14.837 6.173-32.3 4.048-45.292-6.554-21.838-17.818-41.831-37.811-59.65-59.648-10.601-12.992-12.726-30.454-6.553-45.293l40.839-98.16-98.307-40.541c-14.864-6.131-25.714-19.994-27.395-36.688-1.396-13.869-2.111-27.926-2.111-42.144 0-14.214 0.714-28.275 2.11-42.141 1.681-16.694 12.531-30.557 27.395-36.688l98.308-40.541-40.84-98.163c-6.173-14.837-4.047-32.3 6.553-45.292 17.818-21.838 37.81-41.83 59.648-59.648 12.992-10.6 30.455-12.726 45.292-6.553l98.165 40.84 40.541-98.309c6.128-14.865 19.994-25.714 36.688-27.395 13.866-1.396 27.926-2.11 42.141-2.11s28.275 0.714 42.141 2.11c16.694 1.681 30.56 12.531 36.688 27.395l40.541 98.309 98.163-40.84c14.838-6.173 32.301-4.047 45.293 6.553 21.837 17.818 41.83 37.81 59.648 59.648 10.602 12.992 12.726 30.455 6.554 45.292l-40.842 98.163 98.31 40.541c14.864 6.131 25.712 19.994 27.392 36.688 1.398 13.866 2.112 27.926 2.112 42.141 0 14.218-0.714 28.275-2.112 42.144-1.68 16.694-12.528 30.557-27.395 36.688l-98.307 40.541 40.842 98.16c6.173 14.838 4.045 32.301-6.554 45.293-17.821 21.837-37.811 41.83-59.651 59.648-12.992 10.602-30.454 12.726-45.29 6.554l-98.163-40.838-40.538 98.304c-6.131 14.867-19.994 25.715-36.688 27.395-13.869 1.398-27.93 2.112-42.144 2.112zM444.451 757.984l43.386 105.2c7.981 0.541 16.038 0.816 24.163 0.816s16.182-0.275 24.163-0.816l43.382-105.2c9.456-22.925 35.731-33.808 58.627-24.285l105.056 43.709c12.157-10.602 23.578-22.022 34.179-34.179l-43.709-105.056c-9.526-22.893 1.36-49.171 24.282-58.624l105.203-43.386c0.541-7.978 0.816-16.038 0.816-24.163s-0.275-16.182-0.816-24.16l-105.203-43.386c-22.922-9.453-33.808-35.731-24.282-58.624l43.709-105.060c-10.602-12.156-22.022-23.577-34.176-34.177l-105.059 43.708c-22.896 9.525-49.171-1.359-58.627-24.283l-43.382-105.204c-7.981-0.54-16.038-0.815-24.163-0.815s-16.182 0.275-24.163 0.815l-43.386 105.204c-9.453 22.924-35.728 33.808-58.624 24.283l-105.058-43.708c-12.156 10.6-23.577 22.021-34.177 34.177l43.708 105.059c9.525 22.893-1.359 49.171-24.284 58.624l-105.203 43.386c-0.54 7.978-0.815 16.035-0.815 24.16 0 8.128 0.275 16.186 0.815 24.163l105.203 43.386c22.924 9.453 33.809 35.731 24.284 58.624l-43.708 105.056c10.601 12.157 22.022 23.578 34.178 34.179l105.056-43.709c22.896-9.523 49.171 1.36 58.624 24.285zM416 512c0-53.021 42.979-96 96-96s96 42.979 96 96c0 53.021-42.979 96-96 96s-96-42.979-96-96zM512 352c-88.365 0-160 71.635-160 160s71.635 160 160 160c88.365 0 160-71.635 160-160s-71.635-160-160-160z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["administration"],"defaultCode":59662,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":924,"name":"administration","prevSize":32,"id":12,"code":59662},"setIdx":2,"setId":2,"iconIdx":12},{"icon":{"paths":["M878.739 567.622c-41.853-41.136-161.235-29.824-220.925-22.282-59.005-35.997-98.458-85.706-126.243-158.73 13.379-55.194 34.646-139.185 18.525-191.98-14.41-89.82-129.674-80.907-146.141-20.227-15.094 55.195-1.373 131.988 24.013 230.034-34.304 81.936-85.421 191.984-121.441 255.062-68.611 35.312-161.235 89.821-174.957 158.384-11.321 54.166 89.194 189.238 261.063-106.96 76.845-25.37 160.547-56.566 234.65-68.909 64.835 34.97 140.65 58.282 191.421 58.282 87.478 0 96.054-96.678 60.035-132.675zM199.152 834.342c17.496-46.97 84.048-101.133 104.288-119.99-65.18 103.875-104.288 122.39-104.288 119.99zM479.082 180.918c25.386 0 22.986 110.047 6.176 139.873-15.094-47.653-14.752-139.873-6.176-139.873zM395.379 649.216c33.274-57.936 61.747-126.845 84.733-187.526 28.474 51.766 64.838 93.251 103.258 121.706-71.354 14.739-133.446 44.909-187.99 65.821zM846.835 632.074c0 0-17.152 20.57-127.958-26.739 120.413-8.912 140.307 18.512 127.958 26.739z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["adobe-reader-monochromatic"],"defaultCode":59663,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":925,"name":"adobe-reader-monochromatic","prevSize":32,"id":13,"code":59663},"setIdx":2,"setId":2,"iconIdx":13},{"icon":{"paths":["M512 192c-13.056 0-25.578 5.187-34.813 14.419-9.232 9.233-14.419 21.755-14.419 34.812v162.462c0 12.122-6.848 23.2-17.686 28.621l-253.082 126.541v49.498l232.493-46.499c9.402-1.882 19.149 0.554 26.563 6.63 7.414 6.080 11.712 15.162 11.712 24.749v108.307c0 8.486-3.37 16.624-9.373 22.627l-44.781 44.781v47.789l91.501-36.602c7.629-3.050 16.141-3.050 23.77 0l91.501 36.602v-47.789l-44.781-44.781c-6.003-6.003-9.373-14.141-9.373-22.627v-108.307c0-9.587 4.298-18.669 11.712-24.749 7.414-6.077 17.162-8.512 26.563-6.63l232.493 46.499v-49.498l-253.082-126.541c-10.838-5.421-17.686-16.499-17.686-28.621v-162.462c0-13.057-5.187-25.579-14.419-34.812-9.235-9.232-21.757-14.419-34.813-14.419zM431.933 161.164c21.235-21.235 50.035-33.164 80.067-33.164s58.832 11.93 80.067 33.164c21.235 21.235 33.165 50.036 33.165 80.066v142.686l253.078 126.538c10.842 5.421 17.69 16.502 17.69 28.624v108.307c0 9.587-4.298 18.669-11.712 24.746s-17.162 8.512-26.563 6.63l-232.493-46.496v56.019l44.781 44.781c6 6 9.373 14.141 9.373 22.627v108.307c0 10.618-5.267 20.544-14.061 26.499-8.794 5.952-19.965 7.155-29.824 3.213l-123.501-49.402-123.501 49.402c-9.859 3.942-21.030 2.739-29.824-3.213-8.794-5.955-14.061-15.882-14.061-26.499v-108.307c0-8.486 3.373-16.627 9.373-22.627l44.781-44.781v-56.019l-232.492 46.496c-9.401 1.882-19.149-0.554-26.564-6.63s-11.712-15.158-11.712-24.746v-108.307c0-12.122 6.848-23.203 17.689-28.624l253.079-126.538v-142.686c0-30.031 11.93-58.831 33.165-80.066z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["airplane"],"defaultCode":59815,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":926,"id":14,"name":"airplane","prevSize":32,"code":59815},"setIdx":2,"setId":2,"iconIdx":14},{"icon":{"paths":["M448 188.865c0 33.615 27.251 60.865 60.864 60.865 33.616 0 60.867-27.25 60.867-60.865s-27.251-60.865-60.867-60.865c-33.613 0-60.864 27.25-60.864 60.865zM384 188.865c0 59.026 40.957 108.485 96 121.512v77.745c-44.314 11.69-78.986 47.13-89.578 91.878h-80.045c-13.027-55.043-62.486-96-121.512-96-68.961 0-124.865 55.904-124.865 124.864 0 68.963 55.904 124.867 124.865 124.867 56.762 0 104.678-37.875 119.854-89.731h83.361c12.227 41.773 45.696 74.47 87.92 85.61v77.744c-55.043 13.027-96 62.486-96 121.51 0 68.963 55.904 124.867 124.864 124.867 68.963 0 124.867-55.904 124.867-124.867 0-56.762-37.875-104.675-89.731-119.853v-79.437c42.163-11.171 75.578-43.846 87.789-85.574h77.222c15.178 51.856 63.091 89.731 119.853 89.731 68.963 0 124.867-55.904 124.867-124.867 0-68.96-55.904-124.864-124.867-124.864-59.024 0-108.483 40.957-121.51 96h-73.907c-10.579-44.707-45.194-80.122-89.446-91.843v-79.438c51.856-15.176 89.731-63.092 89.731-119.854 0-68.961-55.904-124.865-124.867-124.865-68.96 0-124.864 55.904-124.864 124.865zM828.864 569.731c-33.613 0-60.864-27.251-60.864-60.867 0-33.613 27.251-60.864 60.864-60.864 33.616 0 60.867 27.251 60.867 60.864 0 33.616-27.251 60.867-60.867 60.867zM188.865 569.731c-33.615 0-60.865-27.251-60.865-60.867 0-33.613 27.25-60.864 60.865-60.864s60.865 27.251 60.865 60.864c0 33.616-27.25 60.867-60.865 60.867zM451.069 508.864c0 33.616 27.251 60.867 60.867 60.867 33.613 0 60.864-27.251 60.864-60.867 0-33.613-27.251-60.864-60.864-60.864-33.616 0-60.867 27.251-60.867 60.864zM508.864 889.731c-33.613 0-60.864-27.251-60.864-60.867 0-33.613 27.251-60.864 60.864-60.864 33.616 0 60.867 27.251 60.867 60.864 0 33.616-27.251 60.867-60.867 60.867z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["all-contacts-in-channels"],"defaultCode":59664,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":927,"name":"all-contacts-in-channels","prevSize":32,"id":15,"code":59664},"setIdx":2,"setId":2,"iconIdx":15},{"icon":{"paths":["M861.437 160c17.67 0 32 14.327 32 32s-14.33 32-32 32h-384c-17.674 0-32-14.327-32-32s14.326-32 32-32h384zM334.717 442.397c-24.962 0-45.197-20.237-45.197-45.2 0-24.96 20.236-45.197 45.197-45.197 24.963 0 45.2 20.237 45.2 45.197 0 24.963-20.237 45.2-45.2 45.2zM334.717 506.397c-60.308 0-109.197-48.89-109.197-109.2 0-60.307 48.89-109.197 109.197-109.197 60.31 0 109.2 48.89 109.2 109.197 0 60.31-48.89 109.2-109.2 109.2zM456.278 535.504c-18.288-4.899-37.504-5.2-55.939-0.88l-45.005 10.547c-13.194 3.091-26.947 2.877-40.036-0.63l-31.676-8.483c-19.669-5.27-40.384-5.562-60.154-0.928-55.68 13.050-95.468 62.781-95.468 120.179v34.752c0 42.906 34.783 77.686 77.689 77.686h258.057c42.906 0 77.69-34.781 77.69-77.686v-43.587c0-52-34.928-97.514-85.158-110.97zM414.944 596.934c8.166-1.914 16.675-1.779 24.774 0.39 22.246 5.958 37.718 26.118 37.718 49.149v43.587c0 7.558-6.131 13.686-13.69 13.686h-258.057c-7.56 0-13.689-6.128-13.689-13.686v-34.752c0-27.469 19.123-51.552 46.072-57.869 9.556-2.24 19.564-2.086 28.99 0.438l31.676 8.483c23.277 6.237 47.738 6.621 71.2 1.12l45.005-10.547zM893.437 512c0-17.674-14.33-32-32-32h-224c-17.674 0-32 14.326-32 32s14.326 32 32 32h224c17.67 0 32-14.326 32-32zM861.437 640c17.67 0 32 14.326 32 32s-14.33 32-32 32h-192c-17.674 0-32-14.326-32-32s14.326-32 32-32h192zM893.437 352c0-17.674-14.33-32-32-32h-288c-17.674 0-32 14.326-32 32s14.326 32 32 32h288c17.67 0 32-14.326 32-32zM861.437 800c17.67 0 32 14.326 32 32s-14.33 32-32 32h-256c-17.674 0-32-14.326-32-32s14.326-32 32-32h256z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["all-contacts-in-queue"],"defaultCode":59665,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":928,"name":"all-contacts-in-queue","prevSize":32,"id":16,"code":59665},"setIdx":2,"setId":2,"iconIdx":16},{"icon":{"paths":["M523.571 295.385c33.133 0 74.669-22.133 99.402-51.645 22.4-26.745 38.733-64.095 38.733-101.445 0-5.072-0.467-10.144-1.402-14.294-36.864 1.383-81.2 24.439-107.798 55.334-21.002 23.517-40.134 60.406-40.134 98.218 0 5.533 0.934 11.067 1.402 12.911 2.333 0.461 6.067 0.922 9.798 0.922zM406.906 853.334c45.267 0 65.334-29.974 121.798-29.974 57.402 0 70 29.050 120.4 29.050 49.469 0 82.602-45.187 113.869-89.456 34.998-50.72 49.466-100.522 50.4-102.829-3.267-0.922-98-39.194-98-146.634 0-93.146 74.666-135.107 78.867-138.333-49.469-70.090-124.602-71.935-145.136-71.935-55.533 0-100.8 33.199-129.264 33.199-30.8 0-71.402-31.354-119.469-31.354-91.466 0-184.333 74.701-184.333 215.802 0 87.61 34.533 180.294 77 240.24 36.402 50.723 68.133 92.224 113.867 92.224z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["apple-monochromatic"],"defaultCode":59666,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":929,"name":"apple-monochromatic","prevSize":32,"id":17,"code":59666},"setIdx":2,"setId":2,"iconIdx":17},{"icon":{"paths":["M498.694 141.561l-298.666 136.533c-11.39 5.207-18.696 16.58-18.696 29.103v386.844c0 11.818 6.513 22.675 16.941 28.237l298.667 159.286c9.411 5.021 20.707 5.021 30.118 0l298.666-159.286c10.429-5.562 16.941-16.419 16.941-28.237v-386.844c0-12.524-7.306-23.896-18.694-29.103l-298.666-136.533c-8.451-3.862-18.16-3.862-26.611 0zM245.333 357.011l234.667 107.277v335.709l-234.667-125.155v-317.83zM544 799.997l234.666-125.155v-317.83l-234.666 107.277v335.709zM512 408.544l-221.7-101.347 221.7-101.348 221.699 101.348-221.699 101.347z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["apps"],"defaultCode":59667,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":930,"name":"apps","prevSize":32,"id":18,"code":59667},"setIdx":2,"setId":2,"iconIdx":18},{"icon":{"paths":["M374.627 297.372c-12.496-12.497-32.758-12.497-45.254 0l-192 192c-12.497 12.496-12.497 32.758 0 45.254l192 192c12.496 12.496 32.758 12.496 45.254 0s12.496-32.758 0-45.254l-137.372-137.373h578.745v128c0 17.674 14.326 32 32 32s32-14.326 32-32v-160c0-17.674-14.326-32-32-32h-610.745l137.372-137.373c12.496-12.496 12.496-32.758 0-45.255z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-back"],"defaultCode":59668,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":931,"name":"arrow-back","prevSize":32,"id":19,"code":59668},"setIdx":2,"setId":2,"iconIdx":19},{"icon":{"paths":["M551.392 242.502c0.189-17.672 14.669-31.845 32.339-31.656 17.674 0.189 31.846 14.668 31.658 32.34l-1.318 123.489 193.44-193.439c12.496-12.497 32.755-12.497 45.254 0 12.496 12.497 12.496 32.758 0 45.255l-193.44 193.439 123.488-1.318c17.674-0.189 32.154 13.984 32.339 31.654 0.189 17.674-13.984 32.154-31.654 32.342l-201.92 2.154c-8.605 0.093-16.886-3.283-22.97-9.37-6.086-6.083-9.462-14.365-9.373-22.97l2.157-201.92zM475.981 782.147c-0.189 17.674-14.669 31.846-32.339 31.658-17.674-0.189-31.846-14.669-31.658-32.342l1.318-123.488-193.438 193.44c-12.497 12.496-32.758 12.496-45.255 0s-12.497-32.758 0-45.254l193.438-193.44-123.488 1.318c-17.672 0.189-32.151-13.984-32.34-31.654-0.189-17.674 13.984-32.154 31.656-32.342l201.922-2.154c8.605-0.093 16.883 3.283 22.966 9.37 6.086 6.083 9.462 14.365 9.373 22.97l-2.157 201.92z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-collapse"],"defaultCode":59669,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":932,"name":"arrow-collapse","prevSize":32,"id":20,"code":59669},"setIdx":2,"setId":2,"iconIdx":20},{"icon":{"paths":["M576 672c-17.674 0-32 14.326-32 32s14.326 32 32 32h224c17.674 0 32-14.326 32-32v-208c0-17.674-14.326-32-32-32s-32 14.326-32 32v130.746l-233.373-233.373c-12.496-12.496-32.758-12.496-45.254 0l-73.373 73.373-169.372-169.373c-12.497-12.497-32.758-12.497-45.255 0s-12.497 32.759 0 45.255l192 192c12.496 12.496 32.758 12.496 45.254 0l73.373-73.373 210.746 210.746h-146.746z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-decrease"],"defaultCode":59670,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":933,"name":"arrow-decrease","prevSize":32,"id":21,"code":59670},"setIdx":2,"setId":2,"iconIdx":21},{"icon":{"paths":["M726.88 526.064c12.355 12.637 12.128 32.896-0.509 45.254l-191.968 187.715c-12.438 12.163-32.31 12.163-44.746 0l-191.97-187.715c-12.636-12.358-12.863-32.618-0.507-45.254 12.356-12.634 32.615-12.861 45.252-0.506l137.597 134.55v-372.109c0-17.673 14.33-32 32-32 17.674 0 32 14.327 32 32v372.109l137.6-134.55c12.634-12.355 32.896-12.128 45.251 0.506z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-down"],"defaultCode":59673,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":934,"name":"arrow-down","prevSize":32,"id":22,"code":59673},"setIdx":2,"setId":2,"iconIdx":22},{"icon":{"paths":["M329.373 550.627c-12.497-12.496-12.497-32.758 0-45.254s32.758-12.496 45.254 0l105.373 105.373v-418.746c0-17.673 14.326-32 32-32s32 14.327 32 32v418.746l105.373-105.373c12.496-12.496 32.758-12.496 45.254 0s12.496 32.758 0 45.254l-160 160c-12.496 12.496-32.758 12.496-45.254 0l-160-160zM112 864c0 17.674 14.327 32 32 32h768c17.674 0 32-14.326 32-32v-512c0-17.674-14.326-32-32-32h-96c-17.674 0-32 14.326-32 32s14.326 32 32 32h64v448h-704v-448h64c17.673 0 32-14.326 32-32s-14.327-32-32-32h-96c-17.673 0-32 14.326-32 32v512z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-down-box"],"defaultCode":59671,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":935,"name":"arrow-down-box","prevSize":32,"id":23,"code":59671},"setIdx":2,"setId":2,"iconIdx":23},{"icon":{"paths":["M866.49 512c0-194.404-157.802-352-352.464-352-194.661 0-352.465 157.596-352.465 352s157.804 352 352.465 352c194.662 0 352.464-157.597 352.464-352zM930.576 512c0 229.75-186.496 416-416.55 416s-416.549-186.25-416.549-416c0-229.75 186.495-416 416.549-416s416.55 186.25 416.55 416zM696.525 571.37c12.682-12.33 12.957-32.589 0.611-45.251-12.342-12.666-32.63-12.938-45.309-0.611l-105.789 102.842v-276.349c0-17.674-14.346-32-32.045-32-17.696 0-32.042 14.326-32.042 32v276.349l-105.789-102.842c-12.678-12.326-32.966-12.054-45.309 0.611-12.344 12.662-12.071 32.922 0.608 45.251l160.182 155.715c12.438 12.093 32.259 12.093 44.701 0l160.179-155.715z"],"width":1056,"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124319081245699212911624514522416519902101":[{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["arrow-down-circle"],"defaultCode":59672,"grid":0},"attrs":[{}],"properties":{"order":936,"name":"arrow-down-circle","prevSize":32,"id":24,"code":59672},"setIdx":2,"setId":2,"iconIdx":24},{"icon":{"paths":["M859.978 398.15c-0.189 17.67-14.666 31.843-32.339 31.654-17.67-0.189-31.846-14.666-31.658-32.339l1.318-123.488-193.437 193.437c-12.496 12.499-32.758 12.499-45.254 0-12.496-12.496-12.496-32.755 0-45.254l193.437-193.437-123.488 1.318c-17.67 0.189-32.15-13.984-32.339-31.656s13.984-32.151 31.658-32.34l201.92-2.156c8.605-0.092 16.883 3.286 22.97 9.371 6.083 6.085 9.462 14.364 9.37 22.969l-2.157 201.922zM167.394 626.522c0.189-17.674 14.668-31.846 32.34-31.658s31.845 14.669 31.657 32.339l-1.319 123.488 193.438-193.437c12.496-12.499 32.758-12.499 45.254 0 12.496 12.496 12.496 32.758 0 45.254l-193.438 193.437 123.489-1.318c17.67-0.189 32.15 13.984 32.339 31.658 0.189 17.67-13.984 32.15-31.658 32.339l-201.92 2.157c-8.605 0.093-16.884-3.286-22.969-9.37-6.085-6.086-9.463-14.365-9.371-22.97l2.156-201.92z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-expand"],"defaultCode":59674,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":937,"name":"arrow-expand","prevSize":32,"id":25,"code":59674},"setIdx":2,"setId":2,"iconIdx":25},{"icon":{"paths":["M623.488 420.944h-129.030c-146.778 0-279.962 128.675-298.822 309.533 98.511-81.834 219.072-127.946 345.446-127.946h82.406v123.408l188.595-214.202-188.595-214.2v123.406zM888.045 501.165c5.322 6.045 5.325 15.104 0 21.149l-300.547 341.354c-9.747 11.069-28.010 4.176-28.010-10.573v-186.563h-18.406c-15.286 0-30.496 0.774-45.594 2.298-112.397 11.35-218.514 64.397-302.132 150.954-2.078 2.15-4.142 4.32-6.191 6.512-7.238 7.741-14.299 15.738-21.173 23.984-2.611 3.133-5.195 6.301-7.751 9.504l-0.376 0.474c-9.438 11.834-28.508 5.158-28.508-9.978v-75.606c0-230.707 163.46-417.728 365.102-417.728h65.030v-186.56c0-14.749 18.262-21.643 28.010-10.573l300.547 341.354z"],"width":1056,"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["arrow-forward"],"defaultCode":59841,"grid":0},"attrs":[{}],"properties":{"order":938,"id":26,"name":"arrow-forward","prevSize":32,"code":59841},"setIdx":2,"setId":2,"iconIdx":26},{"icon":{"paths":["M576 352c-17.674 0-32-14.326-32-32s14.326-32 32-32h224c17.674 0 32 14.327 32 32v208c0 17.674-14.326 32-32 32s-32-14.326-32-32v-130.746l-233.373 233.373c-12.496 12.496-32.758 12.496-45.254 0l-73.373-73.373-169.372 169.373c-12.497 12.496-32.758 12.496-45.255 0s-12.497-32.758 0-45.254l192-192c12.496-12.496 32.758-12.496 45.254 0l73.373 73.373 210.746-210.746h-146.746z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-increase"],"defaultCode":59675,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":939,"name":"arrow-increase","prevSize":32,"id":27,"code":59675},"setIdx":2,"setId":2,"iconIdx":27},{"icon":{"paths":["M297.766 105.372c12.513-12.497 32.801-12.497 45.316 0 12.512 12.497 12.512 32.758 0 45.255l-105.513 105.372h611.551c17.699 0 32.045 14.327 32.045 32v112c0 17.674-14.346 32-32.045 32-17.696 0-32.042-14.326-32.042-32v-80h-579.51l105.513 105.373c12.512 12.496 12.512 32.758 0 45.254-12.515 12.496-32.803 12.496-45.316 0l-160.212-160c-12.513-12.497-12.513-32.758 0-45.255l160.212-160zM711.568 918.627c-12.515 12.496-32.803 12.496-45.315 0-12.515-12.496-12.515-32.758 0-45.254l105.51-105.373h-611.552c-17.696 0-32.042-14.326-32.042-32v-112c0-17.674 14.346-32 32.042-32s32.042 14.326 32.042 32v80h579.509l-105.51-105.373c-12.515-12.496-12.515-32.758 0-45.254 12.512-12.496 32.8-12.496 45.315 0l160.211 160c12.512 12.496 12.512 32.758 0 45.254l-160.211 160z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-looping"],"defaultCode":59677,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":940,"name":"arrow-looping","prevSize":32,"id":28,"code":59677},"setIdx":2,"setId":2,"iconIdx":28},{"icon":{"paths":["M374.627 769.296c-12.496 12.496-32.758 12.496-45.254 0l-192-192c-12.497-12.496-12.497-32.758 0-45.254l192-192c12.496-12.499 32.758-12.499 45.254 0 12.496 12.496 12.496 32.758 0 45.254l-137.372 137.373h578.745v-192h-192c-17.674 0-32-14.328-32-32.001s14.326-32 32-32h224c17.674 0 32 14.327 32 32v256.001c0 17.674-14.326 32-32 32h-610.745l137.372 137.373c12.496 12.496 12.496 32.758 0 45.254z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-return"],"defaultCode":59678,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":941,"name":"arrow-return","prevSize":32,"id":29,"code":59678},"setIdx":2,"setId":2,"iconIdx":29},{"icon":{"paths":["M526.064 297.121c12.637-12.356 32.896-12.129 45.254 0.507l187.715 191.969c12.163 12.438 12.163 32.31 0 44.746l-187.715 191.971c-12.358 12.634-32.618 12.861-45.254 0.506-12.634-12.355-12.861-32.614-0.506-45.251l134.55-137.597h-372.109c-17.673 0-32-14.33-32-32 0-17.674 14.327-32 32-32h372.109l-134.55-137.6c-12.355-12.634-12.128-32.894 0.506-45.251z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124319081245699212911624514522416519902101":[{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["arrow-right"],"defaultCode":59838,"grid":0},"attrs":[{}],"properties":{"order":942,"id":30,"name":"arrow-right","prevSize":32,"code":59838},"setIdx":2,"setId":2,"iconIdx":30},{"icon":{"paths":["M297.181 498.090c-12.356-12.634-12.129-32.896 0.507-45.251l191.97-187.717c12.435-12.161 32.307-12.161 44.746 0l191.968 187.717c12.637 12.355 12.864 32.618 0.509 45.251-12.355 12.637-32.618 12.864-45.251 0.509l-137.6-134.55v372.109c0 17.674-14.326 32-32 32-17.67 0-32-14.326-32-32v-372.109l-137.597 134.55c-12.637 12.355-32.895 12.128-45.251-0.509z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-up"],"defaultCode":59680,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":943,"name":"arrow-up","prevSize":32,"id":31,"code":59680},"setIdx":2,"setId":2,"iconIdx":31},{"icon":{"paths":["M694.627 473.373c12.496 12.496 12.496 32.758 0 45.254s-32.758 12.496-45.254 0l-105.373-105.373v418.746c0 17.674-14.326 32-32 32s-32-14.326-32-32v-418.746l-105.373 105.373c-12.496 12.496-32.758 12.496-45.254 0s-12.497-32.758 0-45.254l160-160c12.496-12.497 32.758-12.497 45.254 0l160 160zM912 160c0-17.673-14.326-32-32-32h-768c-17.673 0-32 14.327-32 32v512c0 17.674 14.327 32 32 32h96c17.673 0 32-14.326 32-32s-14.327-32-32-32h-64v-448h704v448h-64c-17.674 0-32 14.326-32 32s14.326 32 32 32h96c17.674 0 32-14.326 32-32v-512z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["arrow-up-box"],"defaultCode":59679,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":944,"name":"arrow-up-box","prevSize":32,"id":32,"code":59679},"setIdx":2,"setId":2,"iconIdx":32},{"icon":{"paths":["M649.427 192c-26.454 0-52.016 10.804-71.005 30.343l-305.1 313.906c-31.48 32.387-49.322 76.506-49.322 122.694 0 46.186 17.842 90.304 49.322 122.694 31.451 32.355 73.91 50.362 117.984 50.362s86.531-18.006 117.981-50.362l305.101-313.907c12.317-12.672 32.576-12.96 45.248-0.643 12.675 12.317 12.963 32.576 0.646 45.251l-305.101 313.904c-43.302 44.554-102.23 69.757-163.875 69.757s-120.574-25.203-163.877-69.757c-43.273-44.522-67.428-104.717-67.428-167.299s24.155-122.781 67.428-167.302l305.1-313.905c30.845-31.735 72.874-49.737 116.899-49.737s86.054 18.002 116.899 49.737c30.816 31.704 47.971 74.514 47.971 118.968s-17.155 87.263-47.971 118.969l-305.43 313.904c-0.003 0.006 0.003-0.003 0 0-18.384 18.909-43.523 29.718-69.923 29.718-26.406 0-51.539-10.8-69.923-29.718-18.356-18.883-28.512-44.31-28.512-70.634 0-26.326 10.156-51.754 28.512-70.637l281.872-289.668c12.326-12.666 32.586-12.942 45.251-0.617s12.941 32.585 0.618 45.251l-281.846 289.638c-6.557 6.752-10.406 16.106-10.406 26.032 0 9.93 3.843 19.277 10.406 26.029 6.531 6.72 15.194 10.323 24.029 10.323s17.498-3.603 24.029-10.323l305.43-313.907c19.024-19.568 29.866-46.301 29.866-74.361 0-28.059-10.842-54.791-29.866-74.362-18.989-19.54-44.55-30.343-71.005-30.343z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["attach"],"defaultCode":59676,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":945,"name":"attach","prevSize":32,"id":33,"code":59676},"setIdx":2,"setId":2,"iconIdx":33},{"icon":{"paths":["M300.1 631.12h-113.433v-280.89h113.433l12.366-48.048c11.054-42.953 50.123-74.619 96.423-74.619h58.666v526.223h-58.666c-46.301 0-85.37-31.667-96.423-74.621l-12.366-48.045zM163.556 695.12h86.931c18.156 70.541 82.192 122.666 158.403 122.666h81.776c22.582 0 40.89-18.307 40.89-40.89v-572.444c0-22.582-18.307-40.889-40.89-40.889h-81.776c-76.211 0-140.247 52.124-158.403 122.667h-86.931c-22.582 0-40.889 18.306-40.889 40.89v327.11c0 22.582 18.307 40.89 40.889 40.89zM646.461 316.515c17.146-4.286 34.518 6.138 38.806 23.284l11.136 44.55c20.81 83.229 20.81 170.301 0 253.533l-11.136 44.55c-4.288 17.146-21.661 27.568-38.806 23.283-17.146-4.288-27.571-21.661-23.283-38.806l11.136-44.55c18.262-73.040 18.262-149.45 0.003-222.486l-11.139-44.55c-4.288-17.146 6.138-34.522 23.283-38.807zM807.472 235.936c-5.197-16.892-23.104-26.372-39.994-21.174-16.893 5.197-26.371 23.104-21.174 39.996l35.536 115.489c28.112 91.37 26.976 189.242-3.254 279.933l-32.054 96.16c-5.59 16.765 3.472 34.886 20.237 40.477 16.768 5.587 34.89-3.472 40.48-20.24l32.051-96.16c34.448-103.344 35.747-214.87 3.709-318.989l-35.536-115.491z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["audio"],"defaultCode":59683,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":946,"name":"audio","prevSize":32,"id":34,"code":59683},"setIdx":2,"setId":2,"iconIdx":34},{"icon":{"paths":["M866.128 153.127c-12.496-12.497-32.758-12.497-45.254 0l-668.246 668.245c-12.497 12.496-12.497 32.758 0 45.254s32.758 12.496 45.255 0l668.246-668.245c12.496-12.497 12.496-32.758 0-45.255zM674.643 480.358l55.92-55.923c16.259 79.565 14.515 161.866-5.229 240.842l-11.622 46.49c-4.288 17.146-21.661 27.571-38.806 23.283-17.146-4.285-27.568-21.661-23.283-38.806l11.622-46.486c13.875-55.507 17.677-112.874 11.398-169.398zM817.162 385.923l-11.312-36.771 51.203-51.206 21.28 69.155c33.344 108.368 31.994 224.445-3.859 332.010l-33.45 100.342c-5.587 16.765-23.709 25.827-40.477 20.24-16.765-5.59-25.827-23.712-20.237-40.48l33.446-100.339c31.635-94.912 32.826-197.334 3.405-292.95zM490.666 664.333l64-64v210.346c0 23.562-19.101 42.666-42.666 42.666h-85.334c-35.459 0-68.394-10.816-95.683-29.325l46.611-46.611c14.701 7.629 31.395 11.936 49.072 11.936h64v-125.011zM128 682.678c0 19.738 13.403 36.346 31.604 41.216l62.552-62.55h-30.156v-298.666h118.99l12.367-48.049c11.843-46.020 53.696-79.953 103.309-79.953h64v158.155l64-64v-115.488c0-23.564-19.101-42.667-42.666-42.667h-85.334c-79.523 0-146.343 54.39-165.289 128h-90.71c-23.564 0-42.667 19.102-42.667 42.667v341.334z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["audio-disabled"],"defaultCode":59681,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":947,"name":"audio-disabled","prevSize":32,"id":35,"code":59681},"setIdx":2,"setId":2,"iconIdx":35},{"icon":{"paths":["M310.99 661.344h-118.99v-298.666h118.99l12.367-48.049c11.843-46.020 53.696-79.953 103.309-79.953h64v554.667h-64c-49.613 0-91.466-33.933-103.309-79.952l-12.367-48.048zM170.667 725.344h90.71c18.946 73.61 85.766 128 165.289 128h85.334c23.565 0 42.666-19.104 42.666-42.666v-597.335c0-23.564-19.101-42.667-42.666-42.667h-85.334c-79.523 0-146.343 54.39-165.289 128h-90.71c-23.564 0-42.667 19.102-42.667 42.667v341.334c0 23.562 19.103 42.666 42.667 42.666zM886.627 393.373c12.496 12.496 12.496 32.758 0 45.254l-73.373 73.373 73.373 73.373c12.496 12.496 12.496 32.758 0 45.254s-32.758 12.496-45.254 0l-73.373-73.373-73.373 73.373c-12.496 12.496-32.758 12.496-45.254 0s-12.496-32.758 0-45.254l73.373-73.373-73.373-73.373c-12.496-12.496-12.496-32.758 0-45.254s32.758-12.496 45.254 0l73.373 73.373 73.373-73.373c12.496-12.496 32.758-12.496 45.254 0z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["audio-unavailable"],"defaultCode":59682,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":948,"name":"audio-unavailable","prevSize":32,"id":36,"code":59682},"setIdx":2,"setId":2,"iconIdx":36},{"icon":{"paths":["M418.704 128c-35.344 0-64 28.654-64 64v226.637c20.774-2.822 42.134-3.456 64-1.526v-225.11h176v180.707c0 35.344 28.656 64 64 64h176v331.293h-120.554c-17.155 22.179-36.323 43.869-57.312 64h177.866c35.347 0 64-28.653 64-64v-363.293c0-6.413-1.923-12.675-5.526-17.978l-156.63-230.681c-11.914-17.544-31.741-28.049-52.947-28.049h-264.896zM658.704 372.707v-180.707h24.896l122.698 180.707h-147.594zM167.939 668.547c120.524 156.138 218.24 174.586 285.133 158.739 73.293-17.36 139.232-81.648 183.466-151.763-115.155-155.869-211.581-174.589-279.149-158.915-74.362 17.251-142.707 81.683-189.45 151.939zM104.428 649.037c100.621-162.8 337.62-357.19 593.252 1.789 9.072 12.739 10.32 29.818 2.422 43.315-95.27 162.854-326.394 358.346-593.234-0.224-9.745-13.094-11.022-30.995-2.44-44.88zM401.664 735.994c31.514 0 60.269-26.858 60.269-64 0-37.146-28.755-64-60.269-64-31.51 0-60.266 26.854-60.266 64 0 37.142 28.755 64 60.266 64zM401.664 799.994c68.634 0 124.269-57.309 124.269-128 0-70.694-55.635-128-124.269-128-68.63 0-124.267 57.306-124.267 128 0 70.691 55.636 128 124.267 128z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["auditing"],"defaultCode":59684,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":949,"name":"auditing","prevSize":32,"id":37,"code":59684},"setIdx":2,"setId":2,"iconIdx":37},{"icon":{"paths":["M224 224c-17.673 0-32 14.327-32 32v544c0 17.674 14.327 32 32 32h544c17.674 0 32-14.326 32-32v-544c0-17.673-14.326-32-32-32h-544zM128 256c0-53.019 42.981-96 96-96h544c53.021 0 96 42.981 96 96v544c0 53.021-42.979 96-96 96h-544c-53.019 0-96-42.979-96-96v-544zM608 460.813c0 41.798-26.714 77.357-64 90.538v133.462h-64v-133.462c-37.286-13.181-64-48.739-64-90.538 0-53.021 42.979-96 96-96s96 42.979 96 96zM608 588.826c38.861-29.19 64-75.667 64-128.013 0-88.365-71.635-160-160-160s-160 71.636-160 160c0 52.346 25.139 98.822 64 128.013v127.987c0 17.674 14.326 32 32 32h128c17.674 0 32-14.326 32-32v-127.987z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["auth"],"defaultCode":59685,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":950,"name":"auth","prevSize":32,"id":38,"code":59685},"setIdx":2,"setId":2,"iconIdx":38},{"icon":{"paths":["M513.35 554.019c66.467 0 120.349-52.493 120.349-117.242 0-64.752-53.882-117.243-120.349-117.243-66.464 0-120.346 52.491-120.346 117.243 0 64.749 53.882 117.242 120.346 117.242zM513.35 490.019c-32.704 0-56.346-25.405-56.346-53.242 0-27.84 23.642-53.242 56.346-53.242 32.707 0 56.349 25.402 56.349 53.242 0 27.837-23.642 53.242-56.349 53.242z","M365.478 894.144h-172.126c-17.673 0-32-14.33-32-32v-702.144c0-17.673 14.327-32 32-32h640.001c17.674 0 32 14.327 32 32v702.144c0 17.67-14.326 32-32 32h-172.128c-6.24 1.274-12.701 1.942-19.318 1.942h-257.11c-6.618 0-13.078-0.669-19.318-1.942zM225.353 830.144h68.244c-3.114-9.456-4.799-19.558-4.799-30.058v-93.446c0-56.109 37.881-105.142 92.172-119.309 19.171-5.002 39.264-5.312 58.579-0.902l42.778 9.766c20.051 4.579 40.909 4.259 60.81-0.934l28.070-7.325c20.694-5.398 42.384-5.734 63.232-0.973 60.534 13.821 103.469 67.664 103.469 129.754v83.37c0 10.499-1.686 20.602-4.8 30.058h68.246v-638.144h-576.001v638.144zM652.918 830.144c12.246-4.49 20.989-16.253 20.989-30.058v-83.37c0-32.234-22.288-60.186-53.715-67.36-10.822-2.47-22.083-2.298-32.826 0.506l-28.070 7.325c-29.853 7.789-61.139 8.272-91.216 1.405l-42.774-9.766c-9.293-2.122-18.957-1.974-28.176 0.432-26.112 6.813-44.333 30.397-44.333 57.382v93.446c0 13.805 8.742 25.568 20.989 30.058h279.133z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["avatar"],"defaultCode":59686,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":951,"name":"avatar","prevSize":32,"id":39,"code":59686},"setIdx":2,"setId":2,"iconIdx":39},{"icon":{"paths":["M737.779 361.376c12.499 12.496 12.499 32.758 0 45.254l-110.947 110.95 110.947 110.947c12.499 12.496 12.499 32.758 0 45.254-12.496 12.499-32.758 12.499-45.254 0l-110.947-110.947-110.95 110.947c-12.496 12.499-32.758 12.499-45.254 0-12.496-12.496-12.496-32.758 0-45.254l110.95-110.947-110.95-110.95c-12.496-12.496-12.496-32.758 0-45.254s32.758-12.496 45.254 0l110.95 110.95 110.947-110.95c12.496-12.496 32.758-12.496 45.254 0z","M312.246 218.073c12.061-16.393 31.2-26.073 51.552-26.073h468.202c35.347 0 64 28.654 64 64v512c0 35.347-28.653 64-64 64h-468.202c-20.352 0-39.491-9.68-51.552-26.074l-188.343-256c-16.598-22.56-16.598-53.293 0-75.853l188.343-256.001zM363.798 256l-188.343 256 188.343 256h468.202v-512h-468.202z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["backspace"],"defaultCode":59687,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":952,"name":"backspace","prevSize":32,"id":40,"code":59687},"setIdx":2,"setId":2,"iconIdx":40},{"icon":{"paths":["M896 512c0-212.077-171.923-384-384-384s-384 171.923-384 384c0 212.077 171.923 384 384 384s384-171.923 384-384zM480 544v286.419c-56.483-5.606-108.646-25.904-152.618-57.011 46.403-78.992 67.251-156.97 71.734-229.408h80.883zM334.8 544c-4.282 58.995-21.005 122.198-56.631 186.458-46.616-49.875-77.462-114.678-84.589-186.458h141.22zM398.954 480c-6.192-93.13-37.366-173.574-70.627-230.072 43.773-30.733 95.594-50.78 151.674-56.348v286.42h-81.046zM279.095 292.556c26.251 47.457 50.118 112.532 55.644 187.444h-141.159c7.174-72.253 38.381-137.437 85.515-187.444zM544 544h80.883c4.483 72.438 25.331 150.416 71.734 229.408-43.971 31.107-96.134 51.405-152.618 57.011v-286.419zM830.419 544c-7.126 71.779-37.971 136.582-84.589 186.458-35.626-64.259-52.349-127.462-56.63-186.458h141.219zM830.419 480h-141.158c5.526-74.912 29.395-139.987 55.645-187.444 47.133 50.008 78.339 115.192 85.514 187.444zM544 193.58c56.080 5.568 107.901 25.614 151.674 56.348-33.261 56.499-64.435 136.943-70.627 230.072h-81.046v-286.42z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["basketball"],"defaultCode":59776,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":953,"id":41,"name":"basketball","prevSize":32,"code":59776},"setIdx":2,"setId":2,"iconIdx":41},{"icon":{"paths":["M233.358 169.364c6.002-6.001 14.141-9.372 22.629-9.372l304.020 0.020c0 0 0.003 0 0 0 46.678 0 91.446 18.543 124.451 51.549 33.008 33.006 51.549 77.772 51.549 124.452s-18.541 91.443-51.549 124.451c-0.803 0.803-1.616 1.6-2.435 2.387 22.867 9.552 43.888 23.533 61.75 41.395 36.006 36.006 56.234 84.845 56.234 135.766s-20.227 99.757-56.234 135.763c-36.006 36.006-84.845 56.237-135.766 56.237l-352.024-0.019c-17.673-0.003-31.998-14.33-31.998-32v-608.001c0-8.487 3.372-16.627 9.373-22.628zM560.006 448.013c29.706 0 58.192-11.802 79.197-32.806 21.005-21.002 32.803-49.491 32.803-79.194 0-29.705-11.798-58.193-32.803-79.197s-49.491-32.804-79.197-32.804l-272.022-0.018v224.019h272.022zM287.984 512.013v255.981l320.022 0.019c0 0 0.003 0 0 0 33.949 0 66.506-13.488 90.512-37.491 24.003-24.006 37.488-56.563 37.488-90.509 0-33.949-13.485-66.506-37.488-90.512-24.006-24.003-56.563-37.488-90.512-37.488h-320.022z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124319081245699212911624514522416519902101":[{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["bold"],"defaultCode":59688,"grid":0},"attrs":[{}],"properties":{"order":954,"name":"bold","prevSize":32,"id":42,"code":59688},"setIdx":2,"setId":2,"iconIdx":42},{"icon":{"paths":["M352 445.437c0-17.67 14.326-32 32-32h256c17.674 0 32 14.33 32 32 0 17.674-14.326 32-32 32h-256c-17.674 0-32-14.326-32-32z","M352 322.557c0-17.672 14.326-31.999 32-31.999h256c17.674 0 32 14.327 32 31.999 0 17.674-14.326 32-32 32h-256c-17.674 0-32-14.326-32-32z","M864 679.68c0 17.674-14.326 32-32 32h-18.509c-8.218 40.547-8.218 82.333 0 122.88h19.789c16.966 0 30.72 13.754 30.72 30.72s-13.754 30.72-30.72 30.72h-545.28c-70.692 0-128-55.014-128-122.88v-453.12c0-106.038 85.961-192 192-192h480c17.674 0 32 14.327 32 32v519.68zM748.419 834.56c-6.787-40.678-6.787-82.202 0-122.88h-460.419c-35.346 0-64 27.507-64 61.44s28.654 61.44 64 61.44h460.419zM224 647.68h576v-455.68h-448c-70.692 0-128 57.308-128 128v327.68z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["book"],"defaultCode":59689,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":955,"name":"book","prevSize":32,"id":43,"code":59689},"setIdx":2,"setId":2,"iconIdx":43},{"icon":{"paths":["M193.603 416h-33.603c-17.673 0-32 14.326-32 32s14.327 32 32 32h704c17.674 0 32-14.326 32-32s-14.326-32-32-32h-33.603c-7.347-73.117-39.702-141.853-92.122-194.274-60.013-60.012-141.405-93.726-226.275-93.726s-166.262 33.714-226.274 93.726c-52.421 52.421-84.777 121.157-92.123 194.274zM330.979 266.981c48.010-48.010 113.126-74.981 181.021-74.981s133.011 26.971 181.021 74.981c40.403 40.404 65.907 92.923 72.973 149.019h-507.987c7.066-56.096 32.57-108.615 72.972-149.019z","M877.242 605.133c16.090-7.315 23.203-26.285 15.891-42.374-7.315-16.090-26.285-23.203-42.374-15.891l-127.558 57.981-127.558-57.981c-8.413-3.824-18.070-3.824-26.483 0l-127.558 57.981-127.558-57.981c-8.413-3.824-18.070-3.824-26.483 0l-140.8 64c-16.089 7.315-23.203 26.285-15.89 42.374s26.284 23.203 42.373 15.891l18.758-8.528v29.68c0 38.102 15.908 74.31 43.672 100.752 27.712 26.394 64.978 40.963 103.528 40.963h345.6c38.55 0 75.814-14.57 103.526-40.963 27.766-26.442 43.674-62.65 43.674-100.752v-64.589l45.242-20.563zM736.442 669.133l31.558-14.346v35.498c0 20.093-8.368 39.699-23.811 54.41-15.494 14.758-36.832 23.306-59.389 23.306h-345.6c-22.556 0-43.893-8.547-59.39-23.306-15.444-14.71-23.81-34.317-23.81-54.41v-58.771l44.8-20.362 127.558 57.981c8.413 3.824 18.070 3.824 26.483 0l127.558-57.981 127.558 57.981c8.413 3.824 18.070 3.824 26.483 0z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["burger"],"defaultCode":59813,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":956,"id":44,"name":"burger","prevSize":32,"code":59813},"setIdx":2,"setId":2,"iconIdx":44},{"icon":{"paths":["M224 224h320v576h-96v-112c0-8.835-7.165-16-16-16h-96c-8.835 0-16 7.165-16 16v112h-96v-576zM608 448h192v352h-192v-352zM832 384h-224v-192c0-17.673-14.326-32-32-32h-384c-17.673 0-32 14.327-32 32v640c0 17.674 14.327 32 32 32h640c17.674 0 32-14.326 32-32v-416c0-17.674-14.326-32-32-32zM304 288c-8.836 0-16 7.164-16 16v32c0 8.835 7.164 16 16 16h32c8.835 0 16-7.165 16-16v-32c0-8.836-7.165-16-16-16h-32zM288 432c0-8.835 7.164-16 16-16h32c8.835 0 16 7.165 16 16v32c0 8.835-7.165 16-16 16h-32c-8.836 0-16-7.165-16-16v-32zM304 544c-8.836 0-16 7.165-16 16v32c0 8.835 7.164 16 16 16h32c8.835 0 16-7.165 16-16v-32c0-8.835-7.165-16-16-16h-32zM416 304c0-8.836 7.165-16 16-16h32c8.835 0 16 7.164 16 16v32c0 8.835-7.165 16-16 16h-32c-8.835 0-16-7.165-16-16v-32zM432 416c-8.835 0-16 7.165-16 16v32c0 8.835 7.165 16 16 16h32c8.835 0 16-7.165 16-16v-32c0-8.835-7.165-16-16-16h-32zM416 560c0-8.835 7.165-16 16-16h32c8.835 0 16 7.165 16 16v32c0 8.835-7.165 16-16 16h-32c-8.835 0-16-7.165-16-16v-32zM688 512c-8.835 0-16 7.165-16 16v32c0 8.835 7.165 16 16 16h32c8.835 0 16-7.165 16-16v-32c0-8.835-7.165-16-16-16h-32zM672 656c0-8.835 7.165-16 16-16h32c8.835 0 16 7.165 16 16v32c0 8.835-7.165 16-16 16h-32c-8.835 0-16-7.165-16-16v-32z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["business"],"defaultCode":59690,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":957,"name":"business","prevSize":32,"id":45,"code":59690},"setIdx":2,"setId":2,"iconIdx":45},{"icon":{"paths":["M277.831 157.44c0-16.259 13.181-29.44 29.44-29.44s29.439 13.181 29.439 29.44v58.876h353.28v-58.876c0-16.259 13.181-29.44 29.44-29.44s29.44 13.181 29.44 29.44v58.876h85.76c17.674 0 32 14.327 32 32v583.68c0 17.674-14.326 32-32 32h-642.559c-17.673 0-32-14.326-32-32v-583.68c0-1.105 0.056-2.196 0.165-3.272 1.639-16.136 15.266-28.728 31.835-28.728h85.76v-58.876zM802.63 392.957h-578.559v407.040h578.559v-407.040zM425.034 644.474c0-8.835 7.162-16 16-16h26.88c8.835 0 16 7.165 16 16v26.88c0 8.838-7.165 16-16 16h-26.88c-8.838 0-16-7.162-16-16v-26.88zM323.27 510.72c-8.836 0-15.999 7.162-15.999 16v26.88c0 8.835 7.163 16 15.999 16h26.88c8.838 0 16-7.165 16-16v-26.88c0-8.838-7.162-16-16-16h-26.88zM542.79 526.72c0-8.835 7.165-16 16-16h26.88c8.838 0 16 7.165 16 16v26.88c0 8.835-7.162 16-16 16h-26.88c-8.835 0-16-7.165-16-16v-26.88zM323.27 628.474c-8.835 0-15.999 7.165-15.999 16v26.88c0 8.838 7.164 16 15.999 16h26.88c8.838 0 16-7.162 16-16v-26.88c0-8.835-7.162-16-16-16h-26.88zM542.79 644.474c0-8.835 7.165-16 16-16h26.88c8.838 0 16 7.165 16 16v26.88c0 8.838-7.162 16-16 16h-26.88c-8.835 0-16-7.162-16-16v-26.88zM441.030 510.72c-8.835 0-16 7.165-16 16v26.88c0 8.835 7.165 16 16 16h26.88c8.838 0 16-7.165 16-16v-26.88c0-8.835-7.162-16-16-16h-26.88zM660.55 526.72c0-8.835 7.165-16 16-16h26.88c8.838 0 16 7.165 16 16v26.88c0 8.835-7.162 16-16 16h-26.88c-8.835 0-16-7.165-16-16v-26.88zM676.55 628.474c-8.835 0-16 7.165-16 16v26.88c0 8.838 7.165 16 16 16h26.88c8.838 0 16-7.162 16-16v-26.88c0-8.835-7.162-16-16-16h-26.88z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["calendar"],"defaultCode":59691,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":958,"name":"calendar","prevSize":32,"id":46,"code":59691},"setIdx":2,"setId":2,"iconIdx":46},{"icon":{"paths":["M256 202.672c0-17.673 19.102-32 42.667-32h255.999c23.565 0 42.669 14.327 42.669 32s-19.104 32-42.669 32h-255.999c-23.564 0-42.667-14.327-42.667-32zM160 383.994c0-5.891 4.776-10.666 10.667-10.666h511.999c5.891 0 10.669 4.774 10.669 10.666v85.334c0 11.376 6.038 21.894 15.859 27.632s21.949 5.83 31.856 0.243l97.83-55.165c2.531-1.427 4.858-3.19 6.912-5.248 6.72-6.717 18.208-1.958 18.208 7.546v263.318c0 9.504-11.488 14.262-18.208 7.542-2.054-2.054-4.381-3.818-6.912-5.245l-97.83-55.165c-9.907-5.587-22.035-5.494-31.856 0.243s-15.859 16.256-15.859 27.632v85.331c0 5.891-4.778 10.669-10.669 10.669h-511.999c-5.891 0-10.667-4.778-10.667-10.669v-384zM170.667 309.328c-41.237 0-74.667 33.43-74.667 74.666v384c0 41.238 33.429 74.669 74.667 74.669h511.999c41.238 0 74.669-33.43 74.669-74.669v-30.55l46.778 26.374c47.418 41.99 123.888 8.701 123.888-56.163v-263.318c0-64.864-76.47-98.157-123.888-56.166l-46.778 26.378v-30.554c0-41.235-33.43-74.666-74.669-74.666h-511.999z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["camera"],"defaultCode":59696,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":959,"name":"camera","prevSize":32,"id":47,"code":59696},"setIdx":2,"setId":2,"iconIdx":47},{"icon":{"paths":["M866.128 153.126c-12.496-12.497-32.758-12.497-45.254 0l-668.246 668.246c-12.497 12.496-12.497 32.758 0 45.254s32.758 12.496 45.255 0l668.246-668.246c12.496-12.497 12.496-32.758 0-45.255zM298.667 170.671c-23.564 0-42.667 14.327-42.667 32s19.102 32 42.667 32h255.999c23.565 0 42.669-14.327 42.669-32s-19.104-32-42.669-32h-255.999zM574.173 309.327h-403.506c-41.237 0-74.667 33.428-74.667 74.667v384c0 6.010 0.71 11.856 2.051 17.453l61.949-61.949v-339.504c0-5.891 4.776-10.666 10.667-10.666h339.506l64-64.001zM376.339 778.659h306.326c5.891 0 10.669-4.774 10.669-10.666v-85.334c0-11.373 6.038-21.891 15.859-27.629s21.949-5.83 31.856-0.243l97.83 55.162c2.531 1.427 4.858 3.194 6.912 5.248 6.72 6.72 18.208 1.962 18.208-7.542v-263.322c0-9.501-11.488-14.262-18.208-7.542-2.054 2.054-4.381 3.821-6.912 5.248l-97.83 55.162c-9.907 5.587-22.035 5.494-31.856-0.243-9.821-5.734-15.859-16.256-15.859-27.629v-7.661l110.778-73.498c47.418-41.99 123.888-8.701 123.888 56.163v263.322c0 64.864-76.47 98.154-123.888 56.163l-46.778-26.378v30.554c0 41.238-33.43 74.666-74.669 74.666h-370.327l64.001-64z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["camera-disabled"],"defaultCode":59692,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":960,"name":"camera-disabled","prevSize":32,"id":48,"code":59692},"setIdx":2,"setId":2,"iconIdx":48},{"icon":{"paths":["M288 224c-17.673 0-32 14.327-32 32s14.327 32 32 32h256c17.674 0 32-14.327 32-32s-14.326-32-32-32h-256z","M170.667 341.328c-23.564 0-42.667 19.104-42.667 42.666v384c0 23.565 19.102 42.669 42.667 42.669h511.999c23.565 0 42.669-19.104 42.669-42.669v-128l97.83 97.83c26.877 26.88 72.835 7.843 72.835-30.17v-263.318c0-38.013-45.958-57.050-72.835-30.173l-97.83 97.83v-128c0-23.562-19.104-42.666-42.669-42.666h-511.999z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["camera-filled"],"defaultCode":59693,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":961,"name":"camera-filled","prevSize":32,"id":49,"code":59693},"setIdx":2,"setId":2,"iconIdx":49},{"icon":{"paths":["M196.731 191.997c0-15.807 12.814-28.622 28.622-28.622h128.001c15.805 0 28.621 12.814 28.621 28.622s-12.816 28.621-28.621 28.621h-128.001c-15.807 0-28.622-12.814-28.622-28.621z","M737.354 559.997c0 97.203-78.8 176-176 176-97.203 0-176-78.797-176-176s78.797-176 176-176c97.2 0 176 78.797 176 176zM673.354 559.997c0-61.856-50.144-112-112-112s-112 50.144-112 112c0 61.856 50.144 112 112 112s112-50.144 112-112z","M193.353 255.997c-35.346 0-64 28.654-64 64v448c0 35.347 28.654 64 64 64h640.001c35.344 0 64-28.653 64-64v-448c0-35.346-28.656-64-64-64h-640.001zM833.354 319.997v448h-640.001v-448h640.001z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["camera-photo"],"defaultCode":59694,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":962,"name":"camera-photo","prevSize":32,"id":50,"code":59694},"setIdx":2,"setId":2,"iconIdx":50},{"icon":{"paths":["M298.667 170.672c-23.564 0-42.667 14.327-42.667 32s19.102 32 42.667 32h255.999c23.565 0 42.669-14.327 42.669-32s-19.104-32-42.669-32h-255.999z","M545.712 503.453c11.267-11.267 11.19-29.61-0.17-40.97s-29.706-11.437-40.973-0.17l-71.402 71.402-71.994-71.997c-11.363-11.36-29.706-11.437-40.973-0.17s-11.19 29.61 0.17 40.97l71.997 71.997-71.402 71.402c-11.266 11.267-11.19 29.61 0.17 40.97 11.363 11.36 29.706 11.437 40.973 0.17l71.402-71.402 71.997 71.997c11.36 11.36 29.702 11.437 40.97 0.17s11.19-29.61-0.17-40.97l-71.997-71.997 71.402-71.402z","M96 383.994c0-41.235 33.429-74.666 74.667-74.666h511.999c41.238 0 74.669 33.43 74.669 74.666v30.554l46.778-26.378c47.418-41.99 123.888-8.698 123.888 56.166v263.318c0 64.864-76.47 98.154-123.888 56.163l-46.778-26.374v30.55c0 41.238-33.43 74.669-74.669 74.669h-511.999c-41.237 0-74.667-33.43-74.667-74.669v-384zM170.667 373.328c-5.891 0-10.667 4.774-10.667 10.666v384c0 5.891 4.776 10.669 10.667 10.669h511.999c5.891 0 10.669-4.778 10.669-10.669v-85.331c0-11.376 6.038-21.894 15.859-27.632s21.949-5.83 31.856-0.243l97.83 55.165c2.531 1.427 4.858 3.19 6.912 5.245 6.72 6.72 18.208 1.962 18.208-7.542v-263.318c0-9.504-11.488-14.262-18.208-7.546-2.054 2.058-4.381 3.821-6.912 5.248l-97.83 55.165c-9.907 5.587-22.035 5.494-31.856-0.243s-15.859-16.256-15.859-27.632v-85.334c0-5.891-4.778-10.666-10.669-10.666h-511.999z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["camera-unavailable"],"defaultCode":59695,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":963,"name":"camera-unavailable","prevSize":32,"id":51,"code":59695},"setIdx":2,"setId":2,"iconIdx":51},{"icon":{"paths":["M224.248 304.026c-49.642 68.947-66.502 152.646-66.502 207.968v1.453l-0.132 1.446c-9.702 106.717 28.59 181.93 90.135 234.006 62.938 53.254 152.152 83.731 244.197 93.958 91.965 10.218 193.27 1.446 273.306-15.482 40.022-8.461 73.616-18.733 97.443-29.075 9.245-4.013 16.438-7.786 21.734-11.126-2.464-1.565-5.446-3.306-9.002-5.197-9.222-4.912-19.779-9.578-30.733-14.368l-1.914-0.835c-9.667-4.221-20.47-8.941-28.656-13.517-14.835-8.298-29.389-17.734-40.006-27.776-5.222-4.941-11.165-11.571-15.146-19.827-4.208-8.742-7.226-21.792-1.306-35.597 31.978-74.621 47.178-115.494 54.538-142.483 6.874-25.2 6.874-37.888 6.874-58.064v-0.182c0-16.035-9.318-89.517-55.811-158.032-45.018-66.338-125.99-129.968-274.854-129.968-134.637 0-215.698 55.382-264.165 122.698zM172.309 266.63c60.333-83.796 160.606-149.302 316.103-149.302 171.136 0 271.494 75.037 327.811 158.032 54.842 80.819 66.854 167.338 66.854 193.968 0 22.384-0.022 41.696-9.126 75.088-8.131 29.805-23.485 70.928-51.946 137.923 5.261 4.166 13.072 9.306 23.36 15.062 5.315 2.97 13.485 6.55 24.963 11.568 10.653 4.659 23.437 10.266 35.174 16.515 11.258 5.994 24.416 14.029 34.202 24.538 10.234 10.992 20.973 29.846 13.299 52.864-5.056 15.168-16.794 25.939-26.576 33.094-10.63 7.776-23.818 14.762-38.253 21.030-29.008 12.589-67.030 23.962-109.683 32.982-85.309 18.038-193.581 27.587-293.616 16.474-99.955-11.107-202.74-44.634-278.468-108.71-76.833-65.011-123.811-159.994-112.66-287.222 0.286-65.549 19.841-162.349 78.561-243.904zM493.744 320c17.674 0 32 14.326 32 32v224c0 17.674-14.326 32-32 32s-32-14.326-32-32v-224c0-17.674 14.326-32 32-32zM525.744 672c0-17.674-14.326-32-32-32s-32 14.326-32 32c0 17.674 14.326 32 32 32s32-14.326 32-32z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["canned-response"],"defaultCode":59697,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":964,"name":"canned-response","prevSize":32,"id":52,"code":59697},"setIdx":2,"setId":2,"iconIdx":52},{"icon":{"paths":["M193.352 181.331c-53.020 0-96 42.981-96 96v469.335c0 53.018 42.98 96 96 96h639.999c53.021 0 96-42.982 96-96v-469.335c0-53.019-42.979-96-96-96h-639.999zM161.352 277.331c0-17.673 14.327-32 32-32h639.999c17.674 0 32 14.327 32 32v202.673h-703.999v-202.673zM161.352 544.003h703.999v202.662c0 17.67-14.326 32-32 32h-639.999c-17.673 0-32-14.33-32-32v-202.662zM812.016 661.331c0-35.347-28.653-64-64-64-35.344 0-64 28.653-64 64s28.656 64 64 64c35.347 0 64-28.653 64-64z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["card"],"defaultCode":59698,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":965,"name":"card","prevSize":32,"id":53,"code":59698},"setIdx":2,"setId":2,"iconIdx":53},{"icon":{"paths":["M368 182.4c0-17.673-14.326-32-32-32s-32 14.327-32 32v144h-144c-17.673 0-32 14.326-32 32s14.327 32 32 32h144v288h-144c-17.673 0-32 14.326-32 32s14.327 32 32 32h144v144c0 17.674 14.327 32 32 32s32-14.326 32-32v-144h288v144c0 17.674 14.326 32 32 32s32-14.326 32-32v-144h144c17.674 0 32-14.326 32-32s-14.326-32-32-32h-144v-80h-64v80h-288v-288h80v-64h-80v-144z","M640.515 327.283c-15.328-3.59-31.306-3.338-46.512 0.733-41.763 11.187-70.803 49.030-70.803 92.269v35.539c0 36.003 29.187 65.194 65.194 65.194h210.413c36.006 0 65.194-29.19 65.194-65.194v-28.336c0-47.667-33.040-88.957-79.27-99.792-16.413-3.846-33.613-3.603-49.946 0.771l-25.827 6.918c-10.381 2.781-21.286 2.95-31.747 0.499l-36.694-8.602z","M782.637 217.037c0 49.174-39.862 89.037-89.037 89.037s-89.037-39.863-89.037-89.037c0-49.174 39.862-89.037 89.037-89.037s89.037 39.863 89.037 89.037z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["channel-auto-join"],"defaultCode":59746,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":966,"name":"channel-auto-join","prevSize":32,"id":54,"code":59746},"setIdx":2,"setId":2,"iconIdx":54},{"icon":{"paths":["M236.709 162.578c11.779-5.037 25.426-2.564 34.688 6.286l150.709 144c6.32 6.037 9.894 14.396 9.894 23.136s-3.574 17.101-9.894 23.136l-150.709 144c-9.262 8.851-22.909 11.325-34.688 6.288s-19.419-16.614-19.419-29.424v-112h-73.29c-17.673 0-32-14.326-32-32 0-17.672 14.327-31.999 32-31.999h73.29v-112c0-12.81 7.64-24.386 19.419-29.423zM320 368.179v-0.179h0.189l-0.189 0.179zM320.189 304.001h-0.189v-0.179l0.189 0.179z","M492.899 303.258c8.762-9.388 21.245-15.258 35.101-15.258 26.509 0 48 21.49 48 48s-21.491 48-48 48c-16.582 0-31.203-8.41-39.824-21.197l-43.098 48.483c20.49 22.554 50.051 36.714 82.922 36.714 61.856 0 112-50.144 112-112s-50.144-112-112-112c-25.549 0-49.098 8.554-67.942 22.955l32.842 56.303z","M145.615 483.229l32.174 64.349c-0.861 3.040-1.318 6.23-1.318 9.501v44.688c0 17.674 14.327 32 32 32h79.53v64h-79.53c-53.019 0-96-42.979-96-96v-44.688c0-28.848 12.515-55.488 33.144-73.85z","M625.267 640h-0.797c0.259 0.598 0.525 1.194 0.797 1.786v-1.786z","M424.714 640h-0.797v1.786c0.272-0.592 0.538-1.187 0.797-1.786z","M477.901 494.515c-28.56-10.957-60.291-10.211-88.307 2.067-42.282 18.534-69.594 60.326-69.594 106.49v132.928c0 53.021 42.979 96 96 96h224c53.021 0 96-42.979 96-96v-125.062c0-51.162-31.536-97.034-79.306-115.354-30.352-11.642-64.067-10.851-93.84 2.198l-2.070 0.909c-21.523 9.434-45.901 10.006-67.843 1.59l-15.040-5.766zM415.286 555.2c12.595-5.52 26.858-5.856 39.699-0.931l15.040 5.77c37.664 14.445 79.504 13.462 116.451-2.73l2.070-0.909c14.349-6.288 30.602-6.669 45.229-1.059 23.024 8.829 38.224 30.938 38.224 55.597v125.062c0 17.674-14.326 32-32 32h-224c-17.674 0-32-14.326-32-32v-132.928c0-20.752 12.278-39.539 31.286-47.872z","M864 320c0-53.019-42.979-96-96-96s-96 42.981-96 96c0 53.021 42.979 96 96 96s96-42.979 96-96zM800 320c0 17.674-14.326 32-32 32s-32-14.326-32-32c0-17.673 14.326-32 32-32s32 14.327 32 32z","M840.714 697.766h-72.714v-64h72.714c17.674 0 32-14.326 32-32v-44.688c0-15.050-9.664-28.394-23.958-33.091-7.536-2.474-15.69-2.304-23.114 0.483l-4.554 1.709c-19.77 7.421-40.89 9.978-61.619 7.632-12.438-31.683-37.722-57.549-70.774-70.227-1.754-0.672-3.52-1.302-5.296-1.894 18.058-5.312 37.36-5.040 55.344 0.867l14.182 4.659c14.886 4.893 30.998 4.554 45.667-0.954l4.554-1.709c21.069-7.91 44.205-8.394 65.581-1.37 40.566 13.325 67.987 51.197 67.987 93.894v44.688c0 53.021-42.982 96-96 96z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["channel-move-to-team"],"defaultCode":59747,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":967,"name":"channel-move-to-team","prevSize":32,"id":55,"code":59747},"setIdx":2,"setId":2,"iconIdx":55},{"icon":{"paths":["M368 160c0-17.673-14.326-32-32-32s-32 14.327-32 32v144h-144c-17.673 0-32 14.327-32 32s14.327 32 32 32h144v288h-144c-17.673 0-32 14.326-32 32s14.327 32 32 32h144v144c0 17.674 14.327 32 32 32s32-14.326 32-32v-144h288v144c0 17.674 14.326 32 32 32s32-14.326 32-32v-144h144c17.674 0 32-14.326 32-32s-14.326-32-32-32h-144v-80h-58.666c-1.786 0-3.565-0.042-5.334-0.118v80.118h-288v-288h168.79c-0.522-5.264-0.79-10.602-0.79-16v-48h-168v-144z","M760 96c-57.437 0-104 46.562-104 104v56h-24c-17.674 0-32 14.327-32 32v192c0 17.674 14.326 32 32 32h256c17.674 0 32-14.326 32-32v-192c0-17.673-14.326-32-32-32h-24v-56c0-57.438-46.563-104-104-104zM800 255.238h-80v-55.238c0-22.092 17.907-40 40-40s40 17.908 40 40v55.238z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["channel-private"],"defaultCode":59699,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":968,"name":"channel-private","prevSize":32,"id":56,"code":59699},"setIdx":2,"setId":2,"iconIdx":56},{"icon":{"paths":["M336 128c17.674 0 32 14.327 32 32v144h288v-144c0-17.673 14.326-32 32-32s32 14.327 32 32v144h144c17.674 0 32 14.327 32 32s-14.326 32-32 32h-144v288h144c17.674 0 32 14.326 32 32s-14.326 32-32 32h-144v144c0 17.674-14.326 32-32 32s-32-14.326-32-32v-144h-288v144c0 17.674-14.326 32-32 32s-32-14.326-32-32v-144h-144c-17.673 0-32-14.326-32-32s14.327-32 32-32h144v-288h-144c-17.673 0-32-14.326-32-32s14.327-32 32-32h144v-144c0-17.673 14.327-32 32-32zM368 368v288h288v-288h-288z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["channel-public"],"defaultCode":59700,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":969,"name":"channel-public","prevSize":32,"id":57,"code":59700},"setIdx":2,"setId":2,"iconIdx":57},{"icon":{"paths":["M886.627 105.372c12.496 12.497 12.496 32.758 0 45.255l-89.373 89.372 89.373 89.373c12.496 12.496 12.496 32.758 0 45.254s-32.758 12.496-45.254 0l-89.373-89.372-89.373 89.372c-12.496 12.496-32.758 12.496-45.254 0s-12.496-32.758 0-45.254l89.373-89.373-89.373-89.372c-12.496-12.497-12.496-32.758 0-45.255s32.758-12.497 45.254 0l89.373 89.373 89.373-89.373c12.496-12.497 32.758-12.497 45.254 0zM226.501 304.042c-49.642 68.947-66.502 152.646-66.502 207.968v1.453l-0.132 1.446c-9.701 106.717 28.59 181.93 90.135 234.006 62.938 53.254 152.151 83.731 244.196 93.958 91.968 10.218 193.27 1.446 273.309-15.482 40.019-8.461 73.613-18.733 97.44-29.075 9.245-4.013 16.438-7.786 21.738-11.126-2.467-1.565-5.446-3.306-9.005-5.2-9.222-4.909-19.776-9.574-30.733-14.365l-1.917-0.838c-9.667-4.221-20.47-8.938-28.653-13.517-14.835-8.294-29.389-17.731-40.003-27.773-5.226-4.941-11.168-11.571-15.146-19.827-4.211-8.742-7.226-21.792-1.309-35.6 42.086-98.205 54.957-137.722 59.219-163.318 2.906-17.434 19.392-29.21 36.822-26.307 17.434 2.906 29.213 19.389 26.307 36.822-5.453 32.749-20.333 76.41-58.006 165.088 5.261 4.166 13.069 9.306 23.357 15.059 5.315 2.973 13.485 6.554 24.963 11.571 10.656 4.656 23.437 10.266 35.174 16.515 11.261 5.994 24.419 14.029 34.202 24.538 10.234 10.992 20.973 29.846 13.299 52.864-5.053 15.168-16.794 25.939-26.576 33.094-10.627 7.776-23.814 14.762-38.253 21.027-29.005 12.592-67.027 23.965-109.68 32.986-85.312 18.038-193.584 27.587-293.616 16.47-99.955-11.104-202.742-44.63-278.471-108.707-76.833-65.014-123.811-159.997-112.66-287.222 0.286-65.549 19.841-162.349 78.561-243.904 60.333-83.796 160.605-149.302 316.103-149.302 17.674 0 32 14.327 32 32s-14.326 32-32 32c-134.637 0-215.697 55.382-264.164 122.698z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["chat-close"],"defaultCode":59701,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":970,"name":"chat-close","prevSize":32,"id":58,"code":59701},"setIdx":2,"setId":2,"iconIdx":58},{"icon":{"paths":["M778 93.833c-11.795-13.162-32.026-14.271-45.187-2.477s-14.272 32.025-2.477 45.187l81.222 90.645h-216.358c-17.674 0-32 14.327-32 32s14.326 32 32 32h216.358l-81.222 90.646c-11.795 13.162-10.685 33.392 2.477 45.187 13.162 11.792 33.392 10.685 45.187-2.477l129.030-144.001c10.893-12.154 10.893-30.556 0-42.71l-129.030-144zM159.999 512.010c0-55.322 16.86-139.021 66.502-207.968 48.467-67.316 129.527-122.698 264.164-122.698 17.674 0 32-14.327 32-32s-14.326-32-32-32c-155.498 0-255.77 65.507-316.102 149.302-58.72 81.555-78.275 178.355-78.561 243.904-11.151 127.229 35.827 222.211 112.66 287.222 75.729 64.077 178.516 97.603 278.471 108.707 100.032 11.117 208.304 1.568 293.616-16.47 42.653-9.021 80.675-20.394 109.68-32.982 14.438-6.269 27.626-13.254 38.253-21.030 9.782-7.155 21.523-17.926 26.579-33.094 7.67-23.018-3.069-41.872-13.302-52.864-9.782-10.509-22.941-18.544-34.202-24.538-11.738-6.25-24.518-11.859-35.171-16.515-11.482-5.018-19.651-8.598-24.966-11.571-10.288-5.754-18.096-10.89-23.357-15.059 37.674-88.678 52.554-132.339 58.010-165.088 2.902-17.43-8.877-33.917-26.31-36.822-17.43-2.902-33.917 8.877-36.822 26.307-4.262 25.597-17.133 65.114-59.219 163.318-5.917 13.808-2.902 26.858 1.309 35.6 3.978 8.256 9.92 14.886 15.146 19.827 10.614 10.042 25.171 19.478 40.003 27.776 8.186 4.576 18.989 9.296 28.656 13.517v0l1.914 0.835c10.957 4.79 21.51 9.456 30.733 14.368 3.558 1.891 6.541 3.632 9.005 5.197-5.299 3.341-12.493 7.114-21.738 11.126-23.827 10.342-57.421 20.614-97.44 29.075-80.038 16.928-181.341 25.699-273.309 15.482-92.045-10.227-181.258-40.704-244.196-93.958-61.545-52.077-99.836-127.29-90.135-234.006l0.132-1.446v-1.453z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["chat-forward"],"defaultCode":59702,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":971,"name":"chat-forward","prevSize":32,"id":59,"code":59702},"setIdx":2,"setId":2,"iconIdx":59},{"icon":{"paths":["M854.506 233.252c12.563 12.429 12.672 32.691 0.243 45.254l-474.877 480c-6.013 6.077-14.208 9.498-22.755 9.494-8.55-0.003-16.742-3.427-22.752-9.507l-165.126-167.088c-12.423-12.57-12.303-32.832 0.268-45.254s32.831-12.304 45.254 0.269l142.375 144.067 452.115-456.992c12.429-12.564 32.691-12.672 45.254-0.243z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["check"],"defaultCode":59703,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":972,"name":"check","prevSize":32,"id":60,"code":59703},"setIdx":2,"setId":2,"iconIdx":60},{"icon":{"paths":["M204.8 128h614.4c42.416 0 76.8 34.385 76.8 76.8v614.4c0 42.416-34.384 76.8-76.8 76.8h-614.4c-42.415 0-76.8-34.384-76.8-76.8v-614.4c0-42.415 34.385-76.8 76.8-76.8zM769.062 336.88c9.322-9.424 9.238-24.619-0.182-33.941-9.424-9.322-24.621-9.241-33.942 0.182l-339.085 342.745-106.782-108.051c-9.317-9.43-24.513-9.52-33.94-0.202s-9.518 24.512-0.201 33.939l123.842 125.318c4.509 4.56 10.653 7.126 17.066 7.13s12.557-2.563 17.069-7.12l356.157-360z"],"attrs":[{"fill":"rgb(29, 116, 245)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":5}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":4}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":6}]},"tags":["checkbox-checked"],"defaultCode":59654,"grid":0},"attrs":[{"fill":"rgb(29, 116, 245)"}],"properties":{"order":973,"name":"checkbox-checked","prevSize":32,"id":61,"code":59654},"setIdx":2,"setId":2,"iconIdx":61},{"icon":{"paths":["M819.2 204.8v614.4h-614.4v-614.4h614.4zM204.8 128c-42.415 0-76.8 34.385-76.8 76.8v614.4c0 42.416 34.385 76.8 76.8 76.8h614.4c42.416 0 76.8-34.384 76.8-76.8v-614.4c0-42.415-34.384-76.8-76.8-76.8h-614.4z"],"attrs":[{"fill":"rgb(203, 206, 209)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":8}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":8}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":10}]},"tags":["checkbox-unchecked"],"defaultCode":59653,"grid":0},"attrs":[{"fill":"rgb(203, 206, 209)"}],"properties":{"order":974,"name":"checkbox-unchecked","prevSize":32,"id":62,"code":59653},"setIdx":2,"setId":2,"iconIdx":62},{"icon":{"paths":["M281.372 436.042c12.497-12.499 32.758-12.499 45.255 0l185.373 185.373 185.373-185.373c12.496-12.499 32.758-12.499 45.254 0 12.496 12.496 12.496 32.758 0 45.254l-208 208c-12.496 12.496-32.758 12.496-45.254 0l-208-208c-12.497-12.496-12.497-32.758 0-45.254z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["chevron-down"],"defaultCode":59704,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":975,"name":"chevron-down","prevSize":32,"id":63,"code":59704},"setIdx":2,"setId":2,"iconIdx":63},{"icon":{"paths":["M587.962 281.372c12.496 12.497 12.496 32.758 0 45.255l-185.373 185.373 185.373 185.373c12.496 12.496 12.496 32.758 0 45.254-12.499 12.496-32.758 12.496-45.258 0l-208-208c-12.496-12.496-12.496-32.758 0-45.254l208-208c12.499-12.497 32.758-12.497 45.258 0z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["chevron-left"],"defaultCode":59706,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":976,"name":"chevron-left","prevSize":32,"id":64,"code":59706},"setIdx":2,"setId":2,"iconIdx":64},{"icon":{"paths":["M670.17 183.165c16.662 16.662 16.662 43.677 0 60.34l-268.496 268.495 268.496 268.499c16.662 16.662 16.662 43.677 0 60.339s-43.677 16.662-60.339 0l-298.668-298.669c-8.002-8-12.497-18.851-12.497-30.17 0-11.315 4.495-22.166 12.497-30.17l298.668-298.666c16.662-16.662 43.677-16.662 60.339 0z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["chevron-left-big"],"defaultCode":59705,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":977,"name":"chevron-left-big","prevSize":32,"id":65,"code":59705},"setIdx":2,"setId":2,"iconIdx":65},{"icon":{"paths":["M436.038 742.627c-12.496-12.496-12.496-32.758 0-45.254l185.373-185.373-185.373-185.373c-12.496-12.497-12.496-32.758 0-45.254 12.499-12.497 32.758-12.497 45.254 0l208 208c12.499 12.496 12.499 32.758 0 45.254l-207.997 208c-12.499 12.496-32.758 12.496-45.258 0z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["chevron-right"],"defaultCode":59707,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":978,"name":"chevron-right","prevSize":32,"id":66,"code":59707},"setIdx":2,"setId":2,"iconIdx":66},{"icon":{"paths":["M742.627 587.958c-12.496 12.499-32.758 12.499-45.254 0l-185.373-185.373-185.373 185.373c-12.496 12.499-32.758 12.499-45.254 0-12.497-12.496-12.497-32.758 0-45.254l208-208c12.496-12.496 32.758-12.496 45.254 0l208 208c12.496 12.496 12.496 32.758 0 45.254z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["chevron-up"],"defaultCode":59708,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":979,"name":"chevron-up","prevSize":32,"id":67,"code":59708},"setIdx":2,"setId":2,"iconIdx":67},{"icon":{"paths":["M512 864c194.403 0 352-157.597 352-352 0-46.522-9.024-90.931-25.418-131.581l48.518-48.518c26.211 54.496 40.899 115.581 40.899 180.099 0 229.75-186.25 416-416 416s-416-186.25-416-416c0-229.75 186.25-416 416-416 95.376 0 183.254 32.096 253.424 86.076l-45.712 45.712c-58.221-42.623-130.029-67.788-207.712-67.788-194.404 0-352 157.596-352 352s157.596 352 352 352zM902.63 230.623c12.496-12.499 12.493-32.76-0.006-45.255s-32.762-12.491-45.254 0.008l-345.386 345.503-105.341-105.491c-12.486-12.506-32.749-12.522-45.254-0.032-12.506 12.486-12.522 32.749-0.032 45.254l127.971 128.157c6 6.006 14.144 9.386 22.634 9.389 8.493 0 16.637-3.373 22.64-9.376l368.029-368.157z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["circle-check"],"defaultCode":59709,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":980,"name":"circle-check","prevSize":32,"id":68,"code":59709},"setIdx":2,"setId":2,"iconIdx":68},{"icon":{"paths":["M608 192c0-53.019-42.979-96-96-96s-96 42.981-96 96h-192c-17.673 0-32 14.327-32 32v672c0 17.674 14.327 32 32 32h576c17.674 0 32-14.326 32-32v-672c0-17.673-14.326-32-32-32h-192zM256 864v-608h96v64c0 17.674 14.326 32 32 32h256c17.674 0 32-14.326 32-32v-64h96v608h-512zM512 224c17.674 0 32-14.327 32-32s-14.326-32-32-32c-17.674 0-32 14.327-32 32s14.326 32 32 32z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["clipboard"],"defaultCode":59710,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":981,"name":"clipboard","prevSize":32,"id":69,"code":59710},"setIdx":2,"setId":2,"iconIdx":69},{"icon":{"paths":["M864 512c0 194.403-157.597 352-352 352s-352-157.597-352-352c0-194.404 157.596-352 352-352s352 157.596 352 352zM928 512c0-229.75-186.25-416-416-416s-416 186.25-416 416c0 229.75 186.25 416 416 416s416-186.25 416-416zM544 288c0-17.673-14.326-32-32-32s-32 14.327-32 32v224c0 8.486 3.373 16.627 9.373 22.627l96 96c12.496 12.496 32.758 12.496 45.254 0s12.496-32.758 0-45.254l-86.627-86.627v-210.746z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["clock"],"defaultCode":59711,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":982,"name":"clock","prevSize":32,"id":70,"code":59711},"setIdx":2,"setId":2,"iconIdx":70},{"icon":{"paths":["M806.627 262.628c12.496-12.497 12.496-32.758 0-45.255s-32.758-12.497-45.254 0l-249.373 249.373-249.372-249.373c-12.497-12.497-32.758-12.497-45.255 0s-12.497 32.758 0 45.255l249.373 249.372-249.373 249.373c-12.497 12.496-12.497 32.758 0 45.254s32.758 12.496 45.255 0l249.372-249.373 249.373 249.373c12.496 12.496 32.758 12.496 45.254 0s12.496-32.758 0-45.254l-249.373-249.373 249.373-249.372z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["close"],"defaultCode":59712,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":983,"name":"close","prevSize":32,"id":71,"code":59712},"setIdx":2,"setId":2,"iconIdx":71},{"icon":{"paths":["M273.129 356.678c6.747-28.298 25.696-52.004 51.21-67.152 25.6-15.2 56.323-20.858 84.698-14.53 27.642 6.163 55.117 24.12 74.874 60.339l22.541 41.325 30.134-36.16c27.238-32.689 85.126-39.713 134.714-14.064 23.562 12.186 42.208 30.618 52.064 53.488 9.654 22.406 12.112 51.898-1.434 89.149l-15.616 42.938h45.686c53.606 0 82.419 15.882 97.642 33.75 15.651 18.374 21.898 44.646 18.557 74.714-3.344 30.083-16.054 60.518-33.456 82.89-17.939 23.066-36.646 32.646-50.742 32.646h-543.998c-18.791 0-37.068-10.362-52.195-31.578-15.217-21.344-24.978-51.050-25.818-81.312-0.84-30.227 7.237-57.914 23.733-77.491 15.796-18.746 42.268-33.619 86.279-33.619h59.791l-33.165-49.75c-27.882-41.824-32.118-77.814-25.498-105.581zM518.218 272.084c-26.339-32.073-59.667-51.619-95.251-59.554-45.626-10.174-92.902-0.833-131.301 21.965-38.487 22.85-69.538 60.142-80.791 107.342-8.278 34.72-5.369 72.758 10.731 111.77-35.67 8.464-64.099 26.186-84.825 50.784-29.004 34.422-39.927 78.733-38.766 120.506 1.159 41.738 14.399 84.032 37.682 116.688 23.373 32.784 59.097 58.426 104.306 58.426h543.999c41.907 0 77.2-26.419 101.261-57.354 24.598-31.629 41.888-73.197 46.544-115.114 4.659-41.933-3.094-87.658-33.443-123.283-24.106-28.301-59.504-46.774-105.616-53.456 5.83-35.194 1.686-67.674-10.605-96.205-16.646-38.628-46.998-67.197-81.437-85.010-54.902-28.397-128.733-32.652-182.486 2.495zM512 437.331c17.674 0 32 14.33 32 32v53.328h53.334c17.674 0 32 14.33 32 32 0 17.674-14.326 32-32 32h-53.334v53.341c0 17.674-14.326 32-32 32s-32-14.326-32-32v-53.341h-53.331c-17.674 0-32-14.326-32-32 0-17.67 14.326-32 32-32h53.331v-53.328c0-17.67 14.326-32 32-32z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["cloud-connectivity"],"defaultCode":59713,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":984,"name":"cloud-connectivity","prevSize":32,"id":72,"code":59713},"setIdx":2,"setId":2,"iconIdx":72},{"icon":{"paths":["M630.157 204.798c16.493 6.344 24.723 24.859 18.378 41.355l-213.331 554.667c-6.346 16.496-24.861 24.723-41.357 18.381-16.493-6.346-24.723-24.861-18.378-41.357l213.331-554.666c6.346-16.495 24.861-24.724 41.357-18.38zM321.296 361.37c12.496 12.499 12.496 32.758 0 45.258l-105.373 105.37 105.373 105.373c12.496 12.499 12.496 32.758 0 45.258-12.497 12.496-32.759 12.496-45.255 0l-128-128c-12.497-12.499-12.497-32.758 0-45.258l128-128c12.497-12.496 32.758-12.496 45.255 0zM702.707 361.37c12.496-12.496 32.758-12.496 45.254 0l128 128c12.496 12.499 12.496 32.758 0 45.258l-128 128c-12.496 12.496-32.758 12.496-45.254 0-12.496-12.499-12.496-32.758 0-45.258l105.373-105.373-105.373-105.37c-12.496-12.499-12.496-32.758 0-45.258z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124319081245699212911624514522416519902101":[{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["code"],"defaultCode":59714,"grid":0},"attrs":[{}],"properties":{"order":985,"name":"code","prevSize":32,"id":73,"code":59714},"setIdx":2,"setId":2,"iconIdx":73},{"icon":{"paths":["M507.488 130.134c16.496 6.344 24.723 24.859 18.378 41.354l-160 416c-6.342 16.496-24.858 24.723-41.354 18.381-16.494-6.346-24.723-24.861-18.379-41.357l160.002-415.998c6.342-16.495 24.858-24.724 41.354-18.38z","M278.628 249.373c12.497 12.497 12.497 32.758 0 45.255l-73.373 73.372 73.373 73.373c12.497 12.496 12.497 32.758 0 45.254-12.497 12.499-32.758 12.499-45.255 0l-96-96c-6.001-6-9.372-14.141-9.372-22.627s3.372-16.624 9.372-22.627l96-95.999c12.497-12.497 32.758-12.497 45.255 0z","M553.373 249.373c12.496-12.497 32.758-12.497 45.254 0l96 95.999c6 6.003 9.373 14.141 9.373 22.627s-3.373 16.627-9.373 22.627l-96 96c-12.496 12.499-32.758 12.499-45.254 0-12.496-12.496-12.496-32.758 0-45.254l73.373-73.373-73.373-73.372c-12.496-12.497-12.496-32.758 0-45.255z","M672 160c0-17.673 14.326-32 32-32h96c53.021 0 96 42.981 96 96v576c0 53.021-42.979 96-96 96h-576c-53.020 0-96-42.979-96-96v-160c0-17.674 14.327-32 32-32s32 14.326 32 32v192h640v-640h-128c-17.674 0-32-14.327-32-32z"],"attrs":[{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124319081245699212911624514522416519902101":[{},{},{},{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{},{},{},{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{},{},{},{}]},"tags":["code-block"],"defaultCode":59840,"grid":0},"attrs":[{},{},{},{}],"properties":{"order":986,"id":74,"name":"code-block","prevSize":32,"code":59840},"setIdx":2,"setId":2,"iconIdx":74},{"icon":{"paths":["M770.704 224c17.674 0 32 14.327 32 32v544c0 17.674-14.326 32-32 32h-543.999c-17.673 0-32-14.326-32-32v-128c17.673 0 32-14.326 32-32s-14.327-32-32-32v-192c17.673 0 32-14.326 32-32s-14.327-32-32-32v-96c0-17.673 14.327-32 32-32h543.999zM130.705 608c-17.673 0-32 14.326-32 32s14.327 32 32 32v128c0 53.021 42.981 96 96 96h543.999c53.021 0 96-42.979 96-96v-544c0-53.019-42.979-96-96-96h-543.999c-53.019 0-96 42.981-96 96v96c-17.673 0-32 14.326-32 32s14.327 32 32 32v192zM427.91 514.266c13.315-3.568 27.309-3.789 40.73-0.643l31.52 7.389c8.73 2.045 17.83 1.904 26.49-0.416l22.186-5.942c14.285-3.827 29.328-4.042 43.683-0.675 40.429 9.475 69.325 45.584 69.325 87.277v24.336c0 31.811-25.789 57.6-57.6 57.6h-180.739c-31.811 0-57.6-25.789-57.6-57.6v-30.525c0-37.862 25.434-71.005 62.006-80.8zM456.957 563.472c-5.206-1.219-10.634-1.133-15.798 0.25-14.189 3.798-24.054 16.656-24.054 31.344v30.525c0 3.536 2.867 6.4 6.4 6.4h180.739c3.533 0 6.4-2.864 6.4-6.4v-24.336c0-17.75-12.365-33.341-29.808-37.427-6.186-1.45-12.662-1.35-18.752 0.282l-22.186 5.942c-16.813 4.502-34.474 4.781-51.421 0.81l-31.52-7.389zM539.155 420.48c0-13.962-11.318-25.28-25.28-25.28s-25.283 11.318-25.283 25.28c0 13.962 11.322 25.28 25.283 25.28s25.28-11.318 25.28-25.28zM590.355 420.48c0 42.24-34.243 76.48-76.48 76.48-42.24 0-76.483-34.24-76.483-76.48s34.243-76.48 76.483-76.48c42.237 0 76.48 34.24 76.48 76.48z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["contacts"],"defaultCode":59715,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":987,"name":"contacts","prevSize":32,"id":75,"code":59715},"setIdx":2,"setId":2,"iconIdx":75},{"icon":{"paths":["M464 272c-35.347 0-64 28.654-64 64v480c0 35.347 28.653 64 64 64h352c35.347 0 64-28.653 64-64v-304c0-6.509-1.984-12.864-5.69-18.214l-134.458-194.215c-11.952-17.267-31.619-27.571-52.621-27.571h-223.232zM464 336h144v144c0 35.347 28.653 64 64 64h144v272h-352v-480zM672 480v-144h15.232l99.693 144h-114.925zM144 208c0-35.346 28.654-64 64-64h241.844c18.032 0 35.229 7.607 47.357 20.949l39.136 43.051h-328.336v480h128v64h-128c-35.346 0-64-28.653-64-64v-480z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["copy"],"defaultCode":59716,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":988,"name":"copy","prevSize":32,"id":76,"code":59716},"setIdx":2,"setId":2,"iconIdx":76},{"icon":{"paths":["M824.682 183.521c-37.19-37.986-98.202-38.583-136.131-1.333l-348.48 342.237c-12.739 12.512-21.733 28.32-25.976 45.654l-23.681 96.749c-6.94 28.355 16.754 54.845 45.747 51.142l90.691-11.578c20.224-2.582 39.104-11.52 53.907-25.52l360.486-340.922c38.986-36.868 40.173-98.482 2.637-136.82l-19.2-19.61zM733.485 227.821c12.643-12.417 32.979-12.218 45.376 0.444l19.2 19.61c12.512 12.78 12.115 33.317-0.88 45.607l-69.965 66.169-63.446-63.364 69.715-68.466zM618.074 341.162l62.592 62.512-243.971 230.73c-4.934 4.666-11.229 7.645-17.968 8.506l-58.307 7.443 15.926-65.075c1.414-5.779 4.413-11.046 8.659-15.219l233.069-228.896zM193.608 265.602c0-17.673 14.346-32 32.042-32h281.332c17.696 0 32.042-14.327 32.042-32s-14.346-32-32.042-32h-281.332c-53.089 0-96.127 42.981-96.127 96v534.402c0 53.018 43.037 95.997 96.127 95.997h529.764c53.091 0 96.128-42.979 96.128-96v-279.414c0-17.67-14.346-32-32.042-32s-32.042 14.33-32.042 32v279.414c0 17.674-14.346 32-32.045 32h-529.764c-17.696 0-32.042-14.326-32.042-31.997v-534.402z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["create"],"defaultCode":59717,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":989,"name":"create","prevSize":32,"id":77,"code":59717},"setIdx":2,"setId":2,"iconIdx":77},{"icon":{"paths":["M717.373 298.663c0-17.673-14.326-32-32-32s-32 14.327-32 32v426.665c0 17.674 14.326 32 32 32s32-14.326 32-32v-426.665z","M514.704 394.672c17.674 0 32 14.326 32 32v298.666c0 17.674-14.326 32-32 32s-32-14.326-32-32v-298.666c0-17.674 14.326-32 32-32z","M376.038 554.672c0-17.674-14.326-32-32-32s-32 14.326-32 32v170.669c0 17.67 14.327 32 32 32s32-14.33 32-32v-170.669z","M130.705 199.556v624.889c0 39.52 32.036 71.555 71.556 71.555h624.888c39.52 0 71.555-32.035 71.555-71.555v-624.889c0-39.519-32.035-71.556-71.555-71.556h-624.888c-39.519 0-71.556 32.036-71.556 71.556zM202.26 192h624.888c4.173 0 7.555 3.383 7.555 7.556v624.889c0 4.173-3.382 7.555-7.555 7.555h-624.888c-4.173 0-7.556-3.382-7.556-7.555v-624.889c0-4.173 3.383-7.556 7.556-7.556z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["dashboard"],"defaultCode":59718,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":990,"name":"dashboard","prevSize":32,"id":78,"code":59718},"setIdx":2,"setId":2,"iconIdx":78},{"icon":{"paths":["M739.68 864v-448h-448.593v448h448.593zM227.003 864v-448c-35.393 0-64.084-28.653-64.084-64v-128c0-35.346 28.692-64 64.084-64h224.297c0-35.346 28.691-64 64.083-64 35.395 0 64.086 28.654 64.086 64h224.294c35.395 0 64.086 28.654 64.086 64v128c0 35.347-28.691 64-64.086 64v448c0 35.347-28.691 64-64.083 64h-448.593c-35.393 0-64.085-28.653-64.085-64zM803.763 224h-576.761v128h576.761v-128zM419.258 544v192c0 17.674 14.346 32 32.042 32s32.042-14.326 32.042-32v-192c0-17.674-14.346-32-32.042-32s-32.042 14.326-32.042 32zM579.469 512c17.696 0 32.042 14.326 32.042 32v192c0 17.674-14.346 32-32.042 32s-32.042-14.326-32.042-32v-192c0-17.674 14.346-32 32.042-32z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["delete"],"defaultCode":59719,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":991,"name":"delete","prevSize":32,"id":79,"code":59719},"setIdx":2,"setId":2,"iconIdx":79},{"icon":{"paths":["M341.334 778.672c-17.674 0-32 14.326-32 32s14.327 32 32 32h341.334c17.67 0 32-14.326 32-32s-14.33-32-32-32h-341.334z","M85.334 298.672c0-70.692 57.308-128 128-128h597.335c70.691 0 128 57.308 128 128v298.666c0 70.694-57.309 128-128 128h-597.335c-70.692 0-128-57.306-128-128v-298.666zM213.334 234.672c-35.346 0-64 28.654-64 64v298.666c0 35.347 28.654 64 64 64h597.335c35.344 0 64-28.653 64-64v-298.666c0-35.347-28.656-64-64-64h-597.335z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["desktop"],"defaultCode":59720,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":992,"name":"desktop","prevSize":32,"id":80,"code":59720},"setIdx":2,"setId":2,"iconIdx":80},{"icon":{"paths":["M325.837 160c0-17.673-14.347-32-32.043-32h-64.085c-17.696 0-32.042 14.327-32.042 32v64c0 17.673 14.346 32 32.042 32h64.085c17.696 0 32.043-14.327 32.043-32v-64zM325.837 586.666c0-17.674-14.347-32-32.043-32h-64.085c-17.696 0-32.042 14.326-32.042 32v64c0 17.674 14.346 32 32.042 32h64.085c17.696 0 32.043-14.326 32.043-32v-64zM454.006 160c0-17.673 14.346-32 32.042-32h64.083c17.696 0 32.042 14.327 32.042 32v64c0 17.673-14.346 32-32.042 32h-64.083c-17.696 0-32.042-14.327-32.042-32v-64zM582.173 373.334c0-17.674-14.346-32-32.042-32h-64.083c-17.696 0-32.042 14.326-32.042 32v64c0 17.674 14.346 32 32.042 32h64.083c17.696 0 32.042-14.326 32.042-32v-64zM454.006 586.666c0-17.674 14.346-32 32.042-32h64.083c17.696 0 32.042 14.326 32.042 32v64c0 17.674-14.346 32-32.042 32h-64.083c-17.696 0-32.042-14.326-32.042-32v-64zM582.173 800c0-17.674-14.346-32-32.042-32h-64.083c-17.696 0-32.042 14.326-32.042 32v64c0 17.674 14.346 32 32.042 32h64.083c17.696 0 32.042-14.326 32.042-32v-64zM710.342 160c0-17.673 14.346-32 32.045-32h64.083c17.696 0 32.042 14.327 32.042 32v64c0 17.673-14.346 32-32.042 32h-64.083c-17.699 0-32.045-14.327-32.045-32v-64zM838.512 373.334c0-17.674-14.346-32-32.042-32h-64.083c-17.699 0-32.045 14.326-32.045 32v64c0 17.674 14.346 32 32.045 32h64.083c17.696 0 32.042-14.326 32.042-32v-64zM710.342 586.666c0-17.674 14.346-32 32.045-32h64.083c17.696 0 32.042 14.326 32.042 32v64c0 17.674-14.346 32-32.042 32h-64.083c-17.699 0-32.045-14.326-32.045-32v-64zM325.837 373.334c0-17.674-14.347-32-32.043-32h-64.085c-17.696 0-32.042 14.326-32.042 32v64c0 17.674 14.346 32 32.042 32h64.085c17.696 0 32.043-14.326 32.043-32v-64z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["dialpad"],"defaultCode":59721,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":993,"name":"dialpad","prevSize":32,"id":81,"code":59721},"setIdx":2,"setId":2,"iconIdx":81},{"icon":{"paths":["M478.65 672c-17.674 0-32-14.326-32-32v-32h-32c-17.674 0-32-14.326-32-32s14.326-32 32-32h32v-58.88h-32c-17.674 0-32-14.326-32-32s14.326-32 32-32h32v-37.12c0-17.674 14.326-32 32-32 17.67 0 32 14.326 32 32v37.12h58.88v-37.12c0-17.674 14.326-32 32-32s32 14.326 32 32v37.12h37.12c17.67 0 32 14.326 32 32s-14.33 32-32 32h-37.12v58.88h37.12c17.67 0 32 14.326 32 32s-14.33 32-32 32h-37.12v32c0 17.674-14.326 32-32 32s-32-14.326-32-32v-32h-58.88v32c0 17.674-14.33 32-32 32zM510.65 544h58.88v-58.88h-58.88v58.88z","M158.648 672h-32c-17.673 0-32-14.326-32-32s14.327-32 32-32h32v-192h-32c-17.673 0-32-14.326-32-32s14.327-32 32-32h32v-160c0-35.346 28.654-64 64-64h608.001c35.344 0 64 28.654 64 64v640c0 35.347-28.656 64-64 64h-608.001c-35.346 0-64-28.653-64-64v-160zM830.65 192h-608.001v160h32c17.673 0 32 14.326 32 32s-14.327 32-32 32h-32v192h32c17.673 0 32 14.326 32 32s-14.327 32-32 32h-32v160h608.001v-640z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["directory"],"defaultCode":59648,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":994,"id":82,"name":"directory","prevSize":32,"code":59648},"setIdx":2,"setId":2,"iconIdx":82},{"icon":{"paths":["M833.35 128c10.285 0 20 2.425 28.611 6.735-11.834 4.684-22.922 11.812-32.493 21.383l-35.882 35.882h-568.236v160h32c17.673 0 32 14.326 32 32s-14.327 32-32 32h-32v192h32c17.673 0 32 14.326 32 32s-14.327 32-32 32h-32v88.237l-64 64v-152.237h-32c-17.673 0-32-14.326-32-32s14.327-32 32-32h32v-192h-32c-17.673 0-32-14.326-32-32s14.327-32 32-32h32v-160c0-35.346 28.654-64 64-64h607.999z","M361.117 896l64-64h408.234v-408.237l64-64v472.237c0 35.347-28.653 64-64 64h-472.234z","M604.23 352c8.166 0 15.616 3.056 21.267 8.090l-53.267 53.267v-29.357c0-17.674 14.33-32 32-32z","M513.35 421.12h51.117l-115.117 115.117v-51.117h-32c-17.67 0-32-14.326-32-32s14.33-32 32-32h32v-37.12c0-17.674 14.33-32 32-32 17.674 0 32 14.326 32 32v37.12z","M391.174 594.413l50.413-50.413h-24.237c-17.67 0-32 14.326-32 32 0 6.854 2.157 13.203 5.824 18.413z","M919.978 201.372c-12.496-12.497-32.755-12.497-45.254 0l-671.999 672c-12.497 12.496-12.497 32.758 0 45.254s32.758 12.496 45.255 0l671.999-672c12.499-12.497 12.499-32.758 0-45.255z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["directory-disabled"],"defaultCode":59649,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":995,"id":83,"name":"directory-disabled","prevSize":32,"code":59649},"setIdx":2,"setId":2,"iconIdx":83},{"icon":{"paths":["M919.978 105.372c12.499 12.497 12.499 32.758 0 45.255l-89.373 89.372 89.373 89.373c12.499 12.496 12.499 32.758 0 45.254-12.496 12.496-32.755 12.496-45.254 0l-89.373-89.372-89.373 89.372c-12.496 12.496-32.755 12.496-45.254 0-12.496-12.496-12.496-32.758 0-45.254l89.373-89.373-89.373-89.372c-12.496-12.497-12.496-32.758 0-45.255 12.499-12.497 32.758-12.497 45.254 0l89.373 89.373 89.373-89.373c12.499-12.497 32.758-12.497 45.254 0z","M512.419 126.678c1.491 17.61-11.578 33.094-29.187 34.585-180.289 15.259-321.88 166.478-321.88 350.731 0 194.406 157.596 352 351.999 352 194.406 0 352-157.594 352-352 0-17.674 14.33-32 32-32 17.674 0 32 14.326 32 32 0 229.75-186.25 416-416 416s-415.999-186.25-415.999-416c0-217.79 167.341-396.462 380.482-414.503 17.61-1.491 33.094 11.577 34.586 29.187z","M119.219 432.47c0-17.674 14.327-32 32-32h329.037c17.67 0 32 14.326 32 32 0 17.67-14.33 32-32 32h-329.037c-17.673 0-32-14.33-32-32z","M119.233 640c0-17.674 14.327-32 32-32h724.255c17.674 0 32 14.326 32 32s-14.326 32-32 32h-724.255c-17.673 0-32-14.326-32-32z","M504.81 121.090c11.117 13.739 8.992 33.888-4.749 45.005-8.666 7.012-18.886 20.139-29.238 40.961-10.179 20.471-19.61 46.603-27.635 77.587-16.042 61.955-25.837 140.879-25.837 227.356 0 103.555 14.038 195.981 35.85 261.411 10.96 32.88 23.306 57.181 35.462 72.605 12.438 15.786 21.024 17.978 24.688 17.978 3.667 0 12.253-2.192 24.691-17.978 12.157-15.424 24.502-39.725 35.462-72.605 21.808-65.43 35.846-157.856 35.846-261.411 0-17.674 14.33-32 32-32 17.674 0 32 14.326 32 32 0 108.522-14.614 208.096-39.133 281.648-12.202 36.608-27.437 68.544-45.91 91.984-18.186 23.078-43.274 42.362-74.957 42.362-31.68 0-56.768-19.283-74.957-42.362-18.47-23.44-33.706-55.376-45.91-91.984-24.515-73.552-39.133-173.126-39.133-281.648 0-90.915 10.256-175.338 27.882-243.4 8.81-34.025 19.619-64.572 32.282-90.038 12.49-25.115 27.712-47.185 46.288-62.217 13.741-11.117 33.888-8.992 45.008 4.746z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["directory-error"],"defaultCode":59650,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":996,"id":84,"name":"directory-error","prevSize":32,"code":59650},"setIdx":2,"setId":2,"iconIdx":84},{"icon":{"paths":["M561.667 127.992c-121.696 0-200.973 50.509-248.813 115.801-46.216 63.073-61.638 137.752-61.933 188.616-8.705 98.746 28.601 172.896 89.422 223.469 59.686 49.626 140.202 75.258 217.85 83.738 77.75 8.486 161.715 1.197 227.856-12.547 33.066-6.87 62.774-15.581 85.642-25.331 11.366-4.848 22.029-10.368 30.797-16.669 7.875-5.661 18.541-14.976 23.242-28.835 7.286-21.475-3.133-38.784-11.965-48.102-8.41-8.877-19.427-15.405-28.24-20.016-9.306-4.867-19.379-9.206-27.533-12.707-8.973-3.856-14.858-6.4-18.56-8.432-4.845-2.662-8.842-5.088-12.026-7.203 20.256-47.142 31.549-77.043 37.696-99.19 7.293-26.272 7.315-41.725 7.315-58.909 0-21.523-9.603-88.542-52.81-151.108-44.701-64.73-124.074-122.573-257.939-122.573zM314.916 433.898c0-40.416 12.607-101.84 49.564-152.277 35.782-48.836 95.882-89.628 197.187-89.628 112.086 0 172.090 46.886 205.277 94.94 34.678 50.219 41.472 104.040 41.472 114.741v0.198c0 14.918 0 23.638-4.982 41.594-5.491 19.779-16.963 50.189-41.539 106.538-5.802 13.296-2.762 25.77 1.155 33.754 3.664 7.478 9.005 13.242 13.331 17.261 8.835 8.211 20.653 15.686 32.224 22.045 6.618 3.638 15.238 7.334 22.563 10.477l1.562 0.672c5.904 2.534 11.52 4.97 16.688 7.418-0.909 0.406-1.856 0.819-2.835 1.238-17.741 7.568-43.078 15.206-73.555 21.539-60.947 12.666-138.064 19.21-207.888 11.587-69.926-7.635-136.982-30.336-183.878-69.328-45.459-37.798-73.674-92.064-66.481-169.821l0.136-1.469v-1.478zM819.162 553.354l-0.074-0.086c0 0.003 0.010 0.013 0.029 0.035 0.010 0.013 0.026 0.029 0.045 0.051z","M178.552 502.474c7.496-11.258 16.26-22.259 26.436-32.592 0.876 31.747 6.169 61.226 15.216 88.358-15.094 30.877-18.374 59.315-18.374 65.357v0.186c0 11.382 0 17.536 3.524 30.701 3.993 14.918 12.441 38.211 30.867 82.022 5.256 12.496 2.48 24.099-0.985 31.43-3.249 6.874-7.925 12.058-11.512 15.514-7.319 7.053-16.852 13.254-25.75 18.326-5.008 2.854-11.333 5.706-16.546 8.029 11.182 3.939 24.98 7.814 40.802 11.226 44.977 9.693 101.833 14.669 153.062 8.87 51.28-5.808 99.776-23.014 133.35-51.965l0.608-0.528c14.794 2.784 29.53 4.938 44.051 6.525 10.886 1.187 21.862 2.086 32.877 2.72-10.122 14.797-22.163 28.045-35.741 39.754-46.362 39.974-108.547 60.362-167.946 67.088-59.45 6.73-123.405 0.947-173.744-9.901-25.17-5.424-48.056-12.352-65.901-20.243-8.86-3.92-17.458-8.502-24.686-13.891-6.431-4.794-15.831-13.171-20.001-25.92-6.422-19.632 2.792-35.443 10.458-43.834 7.193-7.872 16.405-13.462 23.248-17.174 7.309-3.965 15.158-7.466 21.235-10.173 6.907-3.078 10.854-4.858 13.183-6.186 1.349-0.768 2.591-1.501 3.727-2.195-13.937-33.885-21.976-56.118-26.48-72.947-5.68-21.222-5.7-33.875-5.7-47.434 0-17.712 7.436-71.139 40.721-121.123zM155.337 797.248c-0.012 0 0.084 0.102 0.317 0.301-0.19-0.202-0.306-0.301-0.317-0.301zM179.587 737.085c-0.004 0-0.052 0.051-0.137 0.15l0.112-0.118c0.019-0.022 0.027-0.032 0.025-0.032z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["discussions"],"defaultCode":59722,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":997,"name":"discussions","prevSize":32,"id":85,"code":59722},"setIdx":2,"setId":2,"iconIdx":85},{"icon":{"paths":["M160 256c0-17.673 14.327-32 32-32h640c17.674 0 32 14.327 32 32s-14.326 32-32 32h-640c-17.673 0-32-14.327-32-32zM160 421.162c0-17.674 14.327-32 32-32h640c17.674 0 32 14.326 32 32s-14.326 32-32 32h-640c-17.673 0-32-14.326-32-32zM160 602.838c0-17.674 14.327-32 32-32h640c17.674 0 32 14.326 32 32s-14.326 32-32 32h-640c-17.673 0-32-14.326-32-32zM160 768c0-17.674 14.327-32 32-32h344.614c17.674 0 32 14.326 32 32s-14.326 32-32 32h-344.614c-17.673 0-32-14.326-32-32z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["document"],"defaultCode":59723,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":998,"name":"document","prevSize":32,"id":86,"code":59723},"setIdx":2,"setId":2,"iconIdx":86},{"icon":{"paths":["M128.169 352c0-17.674 14.346-32 32.042-32h704.928c17.696 0 32.045 14.326 32.045 32s-14.349 32-32.045 32h-704.928c-17.696 0-32.042-14.326-32.042-32zM213.615 522.669c0-17.674 14.346-32 32.042-32h534.036c17.699 0 32.045 14.326 32.045 32s-14.346 32-32.045 32h-534.036c-17.697 0-32.042-14.326-32.042-32zM331.104 661.331c-17.698 0-32.043 14.326-32.043 32s14.346 32 32.043 32h363.146c17.696 0 32.042-14.326 32.042-32s-14.346-32-32.042-32h-363.146z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["donner"],"defaultCode":59724,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":999,"name":"donner","prevSize":32,"id":87,"code":59724},"setIdx":2,"setId":2,"iconIdx":87},{"icon":{"paths":["M273.128 356.678c-6.62 27.766-2.384 63.757 25.498 105.581l21.374 32.061v17.69h-48c-44.011 0-70.483 14.874-86.278 33.619-16.496 19.578-24.573 47.264-23.734 77.491 0.841 30.262 10.601 59.968 25.818 81.312 15.127 21.216 33.404 31.578 52.195 31.578h79.999v64h-80c-45.209 0-80.932-25.642-104.306-58.426-23.283-32.656-36.522-74.95-37.682-116.688-1.16-41.773 9.763-86.083 38.766-120.506 20.726-24.598 49.155-42.32 84.825-50.784-16.1-39.011-19.009-77.050-10.731-111.77 11.253-47.2 42.304-84.492 80.791-107.342 38.4-22.798 85.677-32.139 131.303-21.965 35.584 7.935 68.909 27.48 95.251 59.554 53.75-35.147 127.584-30.892 182.483-2.495 34.438 17.812 64.794 46.382 81.437 85.010 12.294 28.531 16.438 61.011 10.608 96.205 46.112 6.682 81.507 25.155 105.613 53.456 30.349 35.626 38.106 81.35 33.446 123.283-4.659 41.917-21.946 83.485-46.544 115.114-24.061 30.934-59.354 57.354-101.261 57.354h-80v-64h80c14.093 0 32.8-9.581 50.742-32.646 17.398-22.371 30.112-52.806 33.453-82.89 3.341-30.067-2.902-56.339-18.554-74.714-15.222-17.869-44.035-33.75-97.642-33.75h-45.686l15.613-42.938c13.546-37.251 11.091-66.742 1.437-89.149-9.856-22.87-28.502-41.302-52.064-53.488-49.587-25.649-107.475-18.625-134.717 14.064l-30.134 36.16-22.541-41.325c-19.757-36.219-47.232-54.175-74.87-60.339-28.378-6.327-59.098-0.669-84.701 14.53-25.512 15.148-44.461 38.855-51.208 67.152zM630.979 787.222c12.298-12.691 11.981-32.95-0.707-45.251-12.691-12.298-32.95-11.981-45.251 0.707l-41.021 42.326v-273.005c0-17.674-14.326-32-32-32s-32 14.326-32 32v273.005l-41.021-42.326c-12.301-12.688-32.56-13.005-45.251-0.707-12.688 12.301-13.005 32.56-0.707 45.251l96 99.050c6.029 6.218 14.32 9.728 22.979 9.728s16.95-3.51 22.979-9.728l96-99.050z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["download"],"defaultCode":59725,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1000,"name":"download","prevSize":32,"id":88,"code":59725},"setIdx":2,"setId":2,"iconIdx":88},{"icon":{"paths":["M795.648 132.004c-25.027-25.027-65.603-25.027-90.63-0l-530.467 530.469c-9.577 9.574-15.873 21.939-17.985 35.318l-19.611 124.186c-1.386 8.771-0.942 17.299 1.006 25.261 7.597 31.037 38.083 53.44 72.291 48.038l124.184-19.613c13.379-2.112 25.744-8.41 35.322-17.984l530.467-530.47c12.512-12.513 18.768-28.914 18.768-45.316 0-10.379-2.506-20.757-7.517-30.15-2.906-5.451-6.656-10.57-11.251-15.164l-104.576-104.575zM630.675 296.979l119.658-119.658 104.576 104.574-119.658 119.657-104.576-104.573zM200.255 831.974l19.611-124.186 365.494-365.494 104.576 104.573-365.494 365.494-124.187 19.613z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["edit"],"defaultCode":59726,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1001,"name":"edit","prevSize":32,"id":89,"code":59726},"setIdx":2,"setId":2,"iconIdx":89},{"icon":{"paths":["M330.074 644.886c-21.572-19.619-6.010-52.886 23.152-52.886 8.963 0 17.526 3.53 24.272 9.437 21.603 18.918 42.64 31.958 62.701 40.509 36.563 15.59 71.805 17.107 104.794 9.939 37.632-8.176 72.659-27.808 102.109-51.341 6.726-5.376 14.995-8.544 23.606-8.544 30.218 0 45.616 34.256 22.397 53.594-36.912 30.742-82.79 57.59-134.522 68.832-44.794 9.734-93.67 7.632-143.485-13.606-28.79-12.275-57.232-30.653-85.024-55.933z","M400.17 480c35.344 0 64-28.653 64-64s-28.656-64-64-64c-35.347 0-64 28.653-64 64s28.653 64 64 64z","M624.17 480c35.344 0 64-28.653 64-64s-28.656-64-64-64c-35.347 0-64 28.653-64 64s28.653 64 64 64z","M928 512c0 229.75-186.25 416-416 416s-416-186.25-416-416c0-229.75 186.25-416 416-416s416 186.25 416 416zM864 512c0-194.404-157.597-352-352-352s-352 157.596-352 352c0 194.403 157.596 352 352 352s352-157.597 352-352z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["emoji"],"defaultCode":59729,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1002,"name":"emoji","prevSize":32,"id":90,"code":59729},"setIdx":2,"setId":2,"iconIdx":90},{"icon":{"paths":["M864 512c0-194.404-157.597-352-352-352s-352 157.596-352 352c0 194.403 157.596 352 352 352s352-157.597 352-352zM928 512c0 229.75-186.25 416-416 416s-416-186.25-416-416c0-229.75 186.25-416 416-416s416 186.25 416 416zM400.166 480c-35.347 0-64-28.653-64-64s28.653-64 64-64c35.347 0 64 28.653 64 64s-28.653 64-64 64zM688.166 416c0-35.347-28.653-64-64-64s-64 28.653-64 64c0 35.347 28.653 64 64 64s64-28.653 64-64zM353.226 720c8.963 0 17.526-3.53 24.272-9.437 21.603-18.918 42.64-31.958 62.701-40.509 36.563-15.59 71.805-17.107 104.794-9.939 37.632 8.176 72.659 27.808 102.109 51.341 6.726 5.376 14.995 8.544 23.606 8.544 30.218 0 45.616-34.256 22.397-53.594-36.912-30.742-82.79-57.59-134.522-68.832-44.794-9.734-93.67-7.632-143.485 13.606-28.79 12.275-57.232 30.653-85.024 55.933-21.572 19.619-6.010 52.886 23.152 52.886z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["emoji-bad-mood"],"defaultCode":59727,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1003,"name":"emoji-bad-mood","prevSize":32,"id":91,"code":59727},"setIdx":2,"setId":2,"iconIdx":91},{"icon":{"paths":["M864 512c0-194.404-157.597-352-352-352s-352 157.596-352 352c0 194.403 157.596 352 352 352s352-157.597 352-352zM928 512c0 229.75-186.25 416-416 416s-416-186.25-416-416c0-229.75 186.25-416 416-416s416 186.25 416 416zM400.166 480c-35.347 0-64-28.653-64-64s28.653-64 64-64c35.347 0 64 28.653 64 64s-28.653 64-64 64zM688.166 416c0-35.347-28.653-64-64-64s-64 28.653-64 64c0 35.347 28.653 64 64 64s64-28.653 64-64zM384 640h256c17.674 0 32 14.326 32 32s-14.326 32-32 32h-256c-17.674 0-32-14.326-32-32s14.326-32 32-32z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["emoji-neutral-mood"],"defaultCode":59728,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1004,"name":"emoji-neutral-mood","prevSize":32,"id":92,"code":59728},"setIdx":2,"setId":2,"iconIdx":92},{"icon":{"paths":["M655.744 512c88.365 0 160-71.635 160-160s-71.635-160-160-160c-88.368 0-160 71.635-160 160 0 26.934 6.653 52.314 18.41 74.582l-11.914 11.914 0.128 0.131-299.135 299.136c-3.533 9.926-6.41 20.976-7.738 31.606-1.652 13.219-0.563 22.966 1.874 28.938 1.768 4.333 4.22 7.232 10.772 9.014 8.316 2.262 24.518 2.794 52.822-5.501 8.524-3.808 27.721-16.285 45.132-35.382 18.18-19.939 29.648-41.856 29.648-62.438 0-15.642 11.309-28.992 26.736-31.565l91.75-15.293c3.766-2.656 18.768-15.693 10.134-58.867-2.099-10.49 1.184-21.338 8.749-28.902l88.198-88.195c26.467 19.379 59.114 30.822 94.432 30.822zM439.571 410.915c-5.104-18.771-7.827-38.525-7.827-58.915 0-123.712 100.288-224 224-224 123.709 0 224 100.288 224 224s-100.291 224-224 224c-29.29 0-57.264-5.619-82.906-15.843l-43.008 43.008c7.158 65.494-23.99 104.534-55.968 115.194l-2.384 0.794-74.854 12.477c-7.085 31.405-25.174 58.122-43.235 77.933-23.123 25.357-50.958 44.627-69.762 52.15l-1.324 0.528-1.365 0.41c-34.714 10.416-64.73 13.19-89.594 6.429-26.782-7.286-44.33-24.784-53.228-46.586-8.23-20.163-8.473-42.282-6.126-61.062 2.402-19.216 7.899-37.958 14.042-53.315 1.61-4.022 4.020-7.677 7.084-10.742l286.456-286.458zM623.744 336c0 26.509 21.488 48 48 48 26.509 0 48-21.491 48-48s-21.491-48-48-48c-26.512 0-48 21.49-48 48z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["encrypted"],"defaultCode":59730,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1005,"name":"encrypted","prevSize":32,"id":93,"code":59730},"setIdx":2,"setId":2,"iconIdx":93},{"icon":{"paths":["M536.89 64c233.677 0 423.11 189.433 423.11 423.11h-423.11v-423.11z","M64 536.89c0-233.678 189.433-423.112 423.11-423.112v423.112h423.11c0 233.677-189.43 423.11-423.11 423.11-233.677 0-423.11-189.434-423.11-423.11z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["engagement-dashboard"],"defaultCode":59731,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1006,"name":"engagement-dashboard","prevSize":32,"id":94,"code":59731},"setIdx":2,"setId":2,"iconIdx":94},{"icon":{"paths":["M416 586.445v177.232l75.514-62.928c11.869-9.888 29.104-9.888 40.973 0l75.514 62.928v-177.232c-29.098 13.821-61.645 21.555-96 21.555s-66.902-7.734-96-21.555zM352 540.768v291.232c0 12.416 7.184 23.712 18.426 28.979 11.245 5.267 24.522 3.552 34.061-4.397l107.514-89.594 107.514 89.594c9.539 7.949 22.816 9.664 34.061 4.397 11.242-5.267 18.426-16.563 18.426-28.979v-291.232c39.59-40.403 64-95.734 64-156.768 0-123.712-100.288-224.001-224-224.001s-224 100.288-224 224.001c0 61.034 24.41 116.365 64 156.768zM416 512.013l-0.016-0.013c-38.854-29.19-63.984-75.661-63.984-128 0-88.366 71.635-160.001 160-160.001s160 71.635 160 160.001c0 52.339-25.13 98.81-63.984 128l-0.016 0.013c-26.742 20.083-59.981 31.987-96 31.987s-69.258-11.904-96-31.987z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["enterprise-feature"],"defaultCode":59732,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1007,"name":"enterprise-feature","prevSize":32,"id":95,"code":59732},"setIdx":2,"setId":2,"iconIdx":95},{"icon":{"paths":["M500.64 128c213.35 0 386.336 172.985 386.336 386.336 0 192.87-141.254 352.707-325.974 381.664v-269.958h90.022l17.114-111.706h-107.136v-72.47c0-11.462 2.102-22.822 7.274-32.544 2.474-4.656 5.651-8.934 9.635-12.666 9.866-9.245 24.688-15.152 46.058-15.152h48.733v-95.080c0 0-44.224-7.552-86.493-7.552-84.698 0-141.258 49.313-145.651 138.907-0.182 3.738-0.275 7.546-0.275 11.424v85.133h-98.122v111.706h98.122v269.958c-184.721-29.011-325.978-188.848-325.978-381.664 0-213.351 172.985-386.336 386.336-386.336z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["facebook-monochromatic"],"defaultCode":59733,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1008,"name":"facebook-monochromatic","prevSize":32,"id":96,"code":59733},"setIdx":2,"setId":2,"iconIdx":96},{"icon":{"paths":["M865.139 512c0 33.28-4.624 65.485-13.267 96h-183.274c2.803-30.816 4.288-62.957 4.288-96 0-16.234-0.358-32.25-1.056-48h190.061c2.141 15.696 3.248 31.718 3.248 48zM607.68 464c0.739 15.67 1.123 31.686 1.123 48 0 33.398-1.61 65.555-4.57 96h-183.117c-2.963-30.445-4.57-62.602-4.57-96 0-16.314 0.384-32.33 1.123-48h190.010zM667.014 400c-10.016-93.226-32.221-173.252-61.875-227.763 113.702 30.788 204.579 116.981 241.782 227.763h-179.907zM420.211 172.237c-29.654 54.51-51.862 134.537-61.875 227.763h-179.91c37.204-110.782 128.083-196.975 241.785-227.763zM422.816 400c7.171-62.314 20.064-116.804 36.384-159.18 12.842-33.339 26.56-55.927 38.528-69.070 8.406-9.235 13.446-11.291 14.947-11.698 1.501 0.407 6.541 2.463 14.947 11.698 11.968 13.143 25.686 35.731 38.525 69.070 16.32 42.377 29.216 96.867 36.387 159.18h-179.718zM353.52 464c-0.698 15.75-1.056 31.766-1.056 48 0 33.043 1.482 65.184 4.288 96h-183.275c-8.643-30.515-13.268-62.72-13.268-96 0-16.282 1.107-32.304 3.249-48h190.061zM364.742 672c11.667 72.646 31.040 134.861 55.466 179.763-96.678-26.179-176.854-92.413-221.565-179.763h166.1zM513.152 928c229.834-0.259 416.070-186.41 416.070-416 0-229.75-186.493-416-416.547-416s-416.55 186.25-416.55 416c0 229.59 186.237 415.741 416.070 416 0.16 0 0.32 0 0.48 0s0.32 0 0.477 0zM605.142 851.763c24.426-44.902 43.798-107.117 55.466-179.763h166.099c-44.71 87.35-124.89 153.584-221.565 179.763zM595.638 672c-7.379 42.458-17.514 80.083-29.491 111.184-12.838 33.338-26.557 55.926-38.525 69.069-8.406 9.235-13.446 11.29-14.947 11.699-1.501-0.41-6.541-2.464-14.947-11.699-11.968-13.142-25.686-35.731-38.528-69.069-11.978-31.101-22.109-68.726-29.488-111.184h165.926z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["federation"],"defaultCode":59652,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1009,"id":97,"name":"federation","prevSize":32,"code":59652},"setIdx":2,"setId":2,"iconIdx":97},{"icon":{"paths":["M542.65 96c80.093 0 154.902 22.636 218.374 61.859l-46.746 46.746c-24.739-13.843-51.322-24.785-79.286-32.368 12.166 22.395 23.078 49.095 32.406 79.249l-52 51.999c-5.654-22.994-12.17-44.005-19.347-62.666-12.822-33.339-26.522-55.927-38.474-69.070-8.397-9.235-13.43-11.291-14.928-11.698-1.498 0.407-6.531 2.463-14.928 11.698-11.952 13.143-25.654 35.731-38.477 69.070-16.298 42.377-29.174 96.867-36.336 159.18h65.974l-64 64h-7.114c-0.118 2.47-0.224 4.95-0.323 7.437l-64.538 64.538c-0.173-7.933-0.259-15.926-0.259-23.974 0-16.234 0.358-32.25 1.053-48h-189.809c-2.14 15.696-3.245 31.718-3.245 48 0 33.28 4.619 65.485 13.251 96h106.984l-64 64h-17.852c2.004 3.92 4.078 7.798 6.223 11.629l-46.746 46.749c-39.223-63.475-61.859-138.282-61.859-218.378 0-229.75 186.25-416 416.001-416zM896.79 293.623l-46.746 46.748c10.56 18.87 19.43 38.816 26.413 59.629h-86.045l-64 64h164.992c2.138 15.696 3.245 31.718 3.245 48 0 33.28-4.621 65.485-13.251 96h-183.030c2.8-30.816 4.282-62.957 4.282-96 0-8.045-0.090-16.042-0.262-23.974l-64.534 64.534c-0.752 19.008-2.026 37.523-3.766 55.44h-51.674l-64 64h107.088c-7.37 42.458-17.488 80.083-29.45 111.184-12.822 33.338-26.522 55.926-38.474 69.069-8.397 9.235-13.43 11.29-14.928 11.699-1.498-0.41-6.531-2.464-14.928-11.699-11.952-13.142-25.654-35.731-38.477-69.069-7.178-18.662-13.69-39.677-19.344-62.669l-52 51.997c9.325 30.154 20.237 56.854 32.403 79.251-27.965-7.584-54.547-18.525-79.286-32.368l-46.746 46.746c63.347 39.146 137.984 61.77 217.901 61.859h0.954c229.53-0.259 415.523-186.41 415.523-416 0-80.096-22.637-154.902-61.859-218.377zM450.307 172.237c-113.552 30.788-204.312 116.98-241.467 227.763h179.675c10-93.226 32.176-173.252 61.792-227.763zM634.995 851.763c24.394-44.902 43.741-107.117 55.392-179.763h165.878c-44.653 87.35-124.723 153.584-221.27 179.763zM856.022 153.372c12.496-12.497 32.758-12.497 45.254 0s12.496 32.758 0 45.255l-672.001 672c-12.497 12.496-32.758 12.496-45.255 0s-12.497-32.758 0-45.254l672.001-672z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["federation-disabled"],"defaultCode":59651,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1010,"id":98,"name":"federation-disabled","prevSize":32,"code":59651},"setIdx":2,"setId":2,"iconIdx":98},{"icon":{"paths":["M373.334 448c0-17.674 14.326-32 32-32h213.331c17.674 0 32 14.326 32 32s-14.326 32-32 32h-213.331c-17.674 0-32-14.326-32-32z","M405.334 544c-17.674 0-32 14.326-32 32s14.326 32 32 32h213.331c17.674 0 32-14.326 32-32s-14.326-32-32-32h-213.331z","M256 128c-17.673 0-32 14.327-32 32v704c0 17.674 14.327 32 32 32h512c17.674 0 32-14.326 32-32v-501.744c0-6.672-2.083-13.174-5.962-18.602l-144.467-202.254c-6.006-8.409-15.706-13.4-26.038-13.4h-367.533zM736 372.509v459.491h-448v-640h319.066l128.934 180.509z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["file-document"],"defaultCode":59734,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1011,"name":"file-document","prevSize":32,"id":99,"code":59734},"setIdx":2,"setId":2,"iconIdx":99},{"icon":{"paths":["M128 192c-17.673 0-32 14.327-32 32v576.019c0 17.674 14.327 32 32 32h768c17.674 0 32-14.326 32-32v-576.019c0-17.673-14.326-32-32-32h-768zM160 378.301v-122.301h149.333v122.301h-149.333zM160 442.301h149.333v141.722h-149.333v-141.722zM160 648.022h149.333v119.997h-149.333v-119.997zM373.334 768.019v-119.997h490.666v119.997h-490.666zM864 584.022h-490.666v-141.722h490.666v141.722zM864 378.301h-490.666v-122.301h490.666v122.301z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["file-sheet"],"defaultCode":59735,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1012,"name":"file-sheet","prevSize":32,"id":100,"code":59735},"setIdx":2,"setId":2,"iconIdx":100},{"icon":{"paths":["M206.667 293.692c-30.421-42.402-0.116-101.442 52.070-101.442h518.572c51.174 0 81.706 57.026 53.334 99.615l-180.678 271.207v220.762c0 46.352-47.693 77.373-90.067 58.582l-121.424-53.85c-23.168-10.275-38.102-33.238-38.102-58.582v-166.304l-193.704-269.988zM777.309 256.334h-518.572l193.705 269.989c7.811 10.89 12.013 23.955 12.013 37.357v166.304l121.424 53.85v-220.762c0-12.646 3.741-25.008 10.752-35.533l180.678-271.205z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["filter"],"defaultCode":59736,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1013,"name":"filter","prevSize":32,"id":101,"code":59736},"setIdx":2,"setId":2,"iconIdx":101},{"icon":{"paths":["M623.091 896c-2.806 0-5.296-0.624-7.168-0.938-62-16.858-102.816-39.648-145.811-80.858-55.149-54.010-85.37-125.814-85.37-202.301 0-65.875 56.704-119.571 126.496-119.571s126.496 53.696 126.496 119.571c0 34.963 31.469 63.373 69.792 63.373s69.789-28.41 69.789-63.373c0-135.808-119.642-246.637-266.701-246.637-104.998 0-200.338 57.133-243.334 145.795-14.332 29.347-21.498 63.066-21.498 100.842 0 28.72 2.492 73.363 24.925 131.744 2.804 7.181 2.492 14.675-0.623 21.856-3.116 6.867-9.035 11.862-16.201 14.358-2.804 1.251-6.231 1.562-9.659 1.562-11.84 0-22.433-7.181-26.484-18.106-19.005-50.266-28.353-99.904-28.353-151.728 0-46.205 9.036-88.352 26.795-125.504 52.343-108.019 167.936-177.638 294.432-177.638 178.528 0 323.718 135.804 323.718 302.828 0 65.875-56.704 119.571-126.806 119.571s-126.81-53.696-126.81-119.571c0-34.963-31.469-63.373-69.792-63.373-38.634 0-69.789 28.41-69.789 63.373 0 61.504 24.301 119.261 68.544 162.342 35.206 34.029 68.858 53.072 120.576 67.123 7.168 1.872 13.398 6.557 17.136 13.11 3.741 6.557 4.675 14.362 2.806 21.229-2.806 11.866-14.022 20.918-27.107 20.918zM426.803 888.195c-7.789 0-15.267-3.123-20.253-8.742-33.338-32.781-51.718-54.010-77.891-100.525-26.795-47.142-41.127-105.21-41.127-167.338 0-116.448 100.948-211.357 224.951-211.357s224.954 94.909 224.954 211.357c0 15.61-12.464 28.096-28.352 28.096-15.891 0-28.666-12.173-28.666-28.096 0-85.542-75.398-155.162-168.246-155.162s-168.246 69.619-168.246 155.162c0 52.448 11.84 100.528 34.272 139.552 23.366 41.52 38.947 59.005 68.858 88.662 10.902 11.238 10.902 28.723 0 39.648-5.92 5.933-13.088 8.742-20.253 8.742zM699.738 818.886c-47.36 0-88.797-11.862-123.382-34.963-59.197-39.651-94.717-103.962-94.717-172.333 0-15.61 12.464-28.099 28.352-28.099 15.891 0 28.355 12.49 28.355 28.099 0 49.638 26.17 96.781 69.789 125.501 25.238 16.861 55.149 24.976 91.603 24.976 7.789 0 22.432-0.934 38.010-3.744 1.558-0.314 3.427-0.314 4.986-0.314 13.709 0 25.238 9.99 27.728 23.414 1.248 7.181-0.31 14.672-4.362 20.605-4.362 6.243-10.902 10.614-18.694 11.862-23.366 4.685-43.93 4.995-47.667 4.995zM188.765 435.824c-5.608 0-11.217-1.562-16.202-4.995-6.543-4.058-10.593-10.614-12.151-18.106-1.246-7.494 0.311-14.986 4.985-21.232 38.635-53.696 87.862-95.843 146.125-125.501 60.132-30.595 129.613-46.829 200.961-46.829 71.037 0 140.205 15.922 200.029 46.205 58.573 29.659 107.802 71.492 146.125 124.567 4.362 5.93 6.23 13.424 4.986 20.915-1.248 7.494-5.61 14.048-11.84 18.419-4.986 3.437-10.595 4.995-16.515 4.995-9.034 0-17.757-4.371-23.056-11.862-33.338-45.891-75.709-82.109-125.562-107.083-52.342-26.224-112.787-40.273-174.477-40.273-62.314 0-122.758 14.049-175.101 40.585-49.852 25.913-92.537 62.128-126.186 108.643-3.739 6.87-12.463 11.552-22.121 11.552zM733.696 239.141c-4.672 0-9.347-1.249-13.395-3.434-71.35-35.902-133.354-51.512-207.504-51.512-74.467 0-144.256 17.483-207.817 51.824-4.050 2.185-8.724 3.122-13.397 3.122-10.282 0-19.629-5.62-24.925-14.361-3.739-6.556-4.673-14.361-2.492-21.541s7.166-13.424 13.709-16.859c72.594-38.712 151.733-58.38 234.924-58.38 82.563 0 154.848 17.795 233.987 58.068 6.854 3.434 11.84 9.366 14.33 16.859 2.182 7.18 1.248 14.673-2.179 21.229-4.986 9.054-14.643 14.985-25.238 14.985z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["fingerprint"],"defaultCode":59737,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1014,"name":"fingerprint","prevSize":32,"id":102,"code":59737},"setIdx":2,"setId":2,"iconIdx":102},{"icon":{"paths":["M266.667 170.664c0-17.673 14.327-32 32-32h500.623c12.122 0 23.2 6.848 28.621 17.689s4.253 23.814-3.021 33.511l-122.134 162.843 122.134 162.845c7.274 9.696 8.442 22.672 3.021 33.51-5.421 10.842-16.499 17.69-28.621 17.69h-468.624v286.579c0 17.674-14.325 32-31.999 32s-32-14.326-32-32v-682.667zM330.666 502.752h404.624l-98.134-130.845c-8.531-11.376-8.531-27.021 0-38.4l98.134-130.843h-404.624v300.088z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["flag"],"defaultCode":59738,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1015,"name":"flag","prevSize":32,"id":103,"code":59738},"setIdx":2,"setId":2,"iconIdx":103},{"icon":{"paths":["M140.020 213.336c0-17.673 14.327-32 32-32h234.057c7.181 0 14.157 2.416 19.798 6.86l88.813 69.94h339.997c17.674 0 32 14.327 32 32v520.533c0 17.674-14.326 32-32 32h-682.665c-17.673 0-32-14.326-32-32v-597.333zM204.020 245.336v533.333h618.665v-456.534h-319.085c-7.181 0-14.154-2.415-19.798-6.858l-88.813-69.94h-190.969z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["folder"],"defaultCode":59739,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1016,"name":"folder","prevSize":32,"id":104,"code":59739},"setIdx":2,"setId":2,"iconIdx":104},{"icon":{"paths":["M370.704 544c0-17.674-14.326-32-32-32s-31.999 14.326-31.999 32v32h-32c-17.673 0-32 14.326-32 32s14.327 32 32 32h32v32c0 17.674 14.325 32 31.999 32s32-14.326 32-32v-32h32c17.674 0 32-14.326 32-32s-14.326-32-32-32h-32v-32z","M746.704 624c30.928 0 56-25.072 56-56s-25.072-56-56-56c-30.928 0-56 25.072-56 56s25.072 56 56 56z","M674.704 664c0 30.928-25.072 56-56 56s-56-25.072-56-56c0-30.928 25.072-56 56-56s56 25.072 56 56z","M706.704 128c0-17.673-14.326-32-32-32s-32 14.327-32 32v96h-128c-17.674 0-32 14.327-32 32v96h-191.999c-106.038 0-192 85.962-192 192v128c0 106.038 85.961 192 192 192h447.999c106.038 0 192-85.962 192-192v-128c0-106.038-85.962-192-192-192h-192v-64h128c17.674 0 32-14.327 32-32v-128zM866.704 544v128c0 70.691-57.306 128-128 128h-447.999c-70.692 0-128-57.309-128-128v-128c0-70.691 57.308-128 128-128h447.999c70.694 0 128 57.309 128 128z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["game"],"defaultCode":59753,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1017,"name":"game","prevSize":32,"id":105,"code":59753},"setIdx":2,"setId":2,"iconIdx":105},{"icon":{"paths":["M494.31 170.648l23.037 24.005 23.629-24.005 74.669 0.041v75.854h74.669v75.856h74.666v26.518h0.003v504.419h-522.678v-682.689h252.006zM540.976 246.503h-224.004v530.979h373.341v-379.229h-149.338v-151.75z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["giphy-monochromatic"],"defaultCode":59754,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1018,"name":"giphy-monochromatic","prevSize":32,"id":106,"code":59754},"setIdx":2,"setId":2,"iconIdx":106},{"icon":{"paths":["M862.454 324.045c-35.2-60.31-82.944-108.057-143.248-143.253-60.314-35.198-126.16-52.792-197.581-52.792-71.414 0-137.28 17.6-197.581 52.792-60.31 35.194-108.053 82.943-143.253 143.253-35.194 60.307-52.792 126.166-52.792 197.571 0 85.77 25.024 162.899 75.086 231.405 50.056 68.509 114.721 115.917 193.989 142.224 9.229 1.712 16.058 0.509 20.499-3.584 4.442-4.096 6.662-9.226 6.662-15.37 0-1.024-0.090-10.246-0.259-27.674-0.176-17.43-0.259-32.637-0.259-45.61l-11.789 2.038c-7.517 1.379-16.998 1.962-28.445 1.795-11.443-0.16-23.322-1.357-35.619-3.587-12.304-2.211-23.747-7.334-34.342-15.366-10.588-8.029-18.104-18.538-22.547-31.514l-5.125-11.795c-3.416-7.853-8.795-16.573-16.142-26.134-7.348-9.571-14.778-16.058-22.294-19.475l-3.588-2.57c-2.391-1.706-4.61-3.766-6.662-6.154-2.050-2.39-3.585-4.781-4.61-7.174-1.027-2.397-0.176-4.365 2.562-5.907 2.738-1.539 7.685-2.288 14.864-2.288l10.247 1.53c6.834 1.37 15.287 5.462 25.371 12.298 10.078 6.835 18.363 15.715 24.856 26.646 7.863 14.013 17.335 24.688 28.445 32.038 11.101 7.347 22.294 11.014 33.568 11.014s21.011-0.854 29.216-2.557c8.192-1.709 15.882-4.275 23.062-7.69 3.075-22.902 11.446-40.499 25.11-52.797-19.475-2.045-36.982-5.13-52.534-9.226-15.542-4.106-31.603-10.765-48.173-20-16.579-9.222-30.331-20.672-41.262-34.333-10.932-13.67-19.905-31.613-26.904-53.818-7.003-22.214-10.505-47.837-10.505-76.88 0-41.35 13.5-76.541 40.493-105.584-12.645-31.088-11.451-65.939 3.585-104.55 9.908-3.079 24.606-0.768 44.078 6.916 19.478 7.689 33.738 14.275 42.797 19.736 9.059 5.46 16.317 10.087 21.786 13.837 31.782-8.88 64.582-13.322 98.406-13.322s66.63 4.442 98.416 13.322l19.475-12.295c13.318-8.204 29.046-15.722 47.142-22.556 18.112-6.83 31.958-8.712 41.53-5.633 15.37 38.612 16.739 73.46 4.093 104.548 26.992 29.046 40.496 64.243 40.496 105.587 0 29.043-3.514 54.746-10.506 77.13-7.002 22.387-16.051 40.314-27.152 53.818-11.114 13.501-24.957 24.864-41.526 34.083-16.573 9.226-32.637 15.888-48.179 19.99-15.552 4.102-33.059 7.187-52.534 9.238 17.763 15.37 26.646 39.632 26.646 72.774v108.134c0 6.141 2.134 11.27 6.41 15.37 4.272 4.090 11.018 5.296 20.243 3.581 79.28-26.304 143.946-73.712 194-142.224 50.048-68.502 75.082-145.632 75.082-231.405-0.019-71.395-17.626-137.248-52.803-197.555z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["github-monochromatic"],"defaultCode":59655,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1019,"name":"github-monochromatic","prevSize":32,"id":107,"code":59655},"setIdx":2,"setId":2,"iconIdx":107},{"icon":{"paths":["M133.618 423.61h215.092l-92.537-284.607c-4.74-14.67-25.504-14.67-30.244 0l-92.311 284.607zM86.899 567.171l46.72-143.546h737.133l46.72 143.546c4.288 13.088-0.451 27.533-11.51 35.434l-403.776 293.408-403.776-293.408c-11.060-7.901-15.799-22.346-11.511-35.434zM655.661 423.61h215.091l-92.31-284.607c-4.739-14.67-25.504-14.67-30.243 0l-92.538 284.607z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["gitlab-monochromatic"],"defaultCode":59656,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1020,"name":"gitlab-monochromatic","prevSize":32,"id":108,"code":59656},"setIdx":2,"setId":2,"iconIdx":108},{"icon":{"paths":["M226.9 260.289c6.691-2.875 13.811-4.319 20.961-4.288 17.673 0.077 32.062-14.187 32.14-31.86s-14.187-32.062-31.86-32.14c-15.989-0.070-31.8 3.167-46.506 9.485-14.702 6.317-27.969 15.571-39.071 27.156-11.1 11.582-19.822 25.269-25.729 40.238-5.898 14.946-8.889 30.916-8.834 47.005l-0.001 15.941 0.001-11.899v255.848c-0 0.074-0.001 0.15-0.001 0.224v89.6c0 43.642 16.497 85.792 46.318 117.104 29.872 31.366 70.73 49.296 113.682 49.296 42.954 0 83.811-17.93 113.683-49.296 29.821-31.312 46.317-73.462 46.317-117.104v-57.6h128v57.6c0 43.642 16.496 85.792 46.317 117.104 29.872 31.366 70.73 49.296 113.683 49.296s83.811-17.93 113.683-49.296c29.821-31.312 46.317-73.462 46.317-117.104v-89.6c0-0.077 0-0.15 0-0.227v-259.883c0.054-16.090-2.938-32.062-8.835-47.010-5.907-14.969-14.627-28.656-25.728-40.238-11.104-11.585-24.368-20.839-39.072-27.156-14.704-6.318-30.515-9.555-46.506-9.485-17.674 0.077-31.936 14.467-31.859 32.14s14.467 31.937 32.141 31.86c7.149-0.031 14.269 1.413 20.96 4.288 6.694 2.876 12.867 7.147 18.128 12.636 5.264 5.492 9.501 12.090 12.403 19.448 2.906 7.36 4.4 15.292 4.368 23.326v228.302h-639.999l0-228.173-0-0.128c-0.032-8.034 1.462-15.965 4.366-23.326 2.904-7.358 7.141-13.957 12.404-19.448 5.26-5.489 11.434-9.759 18.129-12.636zM269.255 608l104.214 104.214c6.826-14.237 10.531-30.173 10.531-46.614v-57.6h-114.745zM717.254 608l104.214 104.214c6.826-14.237 10.531-30.173 10.531-46.614v-57.6h-114.746zM896 315.89v0zM128.001 319.928l0-3.973-0-0.069v4.043zM328.954 758.208l-136.954-136.954v44.346c0 27.648 10.475 53.869 28.663 72.966 18.137 19.043 42.394 29.434 67.337 29.434 14.208 0 28.194-3.37 40.954-9.792zM640 665.6v-44.346l136.954 136.954c-12.758 6.422-26.746 9.792-40.954 9.792-24.944 0-49.2-10.39-67.338-29.434-18.189-19.098-28.662-45.318-28.662-72.966z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["glasses"],"defaultCode":59812,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1021,"id":109,"name":"glasses","prevSize":32,"code":59812},"setIdx":2,"setId":2,"iconIdx":109},{"icon":{"paths":["M634.803 170.664h-256.112l-264.387 460.802 124.984 221.866h534.916l124.982-221.866-264.384-460.802zM367.814 631.466l138.931-239.789 138.934 239.789h-277.866z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["google-drive-monochromatic"],"defaultCode":59756,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1022,"name":"google-drive-monochromatic","prevSize":32,"id":110,"code":59756},"setIdx":2,"setId":2,"iconIdx":110},{"icon":{"paths":["M658.794 338.154c-39.798-38.052-90.416-57.426-146.794-57.426-100.016 0-184.669 67.548-214.865 158.313l-0.002-0.003c-7.679 23.040-12.042 47.648-12.042 72.957s4.364 49.92 12.044 72.96l0 0.003c30.196 90.765 114.849 158.314 214.865 158.314 51.664 0 95.651-13.613 130.035-36.653v-0.016c40.669-27.229 67.725-67.898 76.627-115.898h-206.662v-148.538h361.658c4.538 25.136 6.982 51.315 6.982 78.547 0 116.944-41.891 215.389-114.502 282.24v0.013c-63.533 58.646-150.458 93.030-254.138 93.030-150.109 0-279.971-86.048-343.156-211.549l-0-0.003c-26.007-51.84-40.844-110.49-40.844-172.451 0-61.965 14.836-120.611 40.844-172.451h0.004c63.187-125.495 193.047-211.542 343.153-211.542 103.504 0 190.429 38.051 256.931 100.014l-110.138 110.139z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["google-monochromatic"],"defaultCode":59657,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1023,"name":"google-monochromatic","prevSize":32,"id":111,"code":59657},"setIdx":2,"setId":2,"iconIdx":111},{"icon":{"paths":["M129.354 272c0-17.673 14.327-32 32-32h704c17.674 0 32 14.327 32 32s-14.326 32-32 32h-704c-17.673 0-32-14.327-32-32zM289.354 432c0 17.674-14.327 32-32 32s-32-14.326-32-32c0-17.674 14.327-32 32-32s32 14.326 32 32zM289.354 752c0 17.674-14.327 32-32 32s-32-14.326-32-32c0-17.674 14.327-32 32-32s32 14.326 32 32zM449.354 624c17.674 0 32-14.326 32-32s-14.326-32-32-32c-17.674 0-32 14.326-32 32s14.326 32 32 32zM385.354 400c-17.674 0-32 14.326-32 32s14.326 32 32 32h480c17.674 0 32-14.326 32-32s-14.326-32-32-32h-480zM353.354 752c0-17.674 14.326-32 32-32h480c17.674 0 32 14.326 32 32s-14.326 32-32 32h-480c-17.674 0-32-14.326-32-32zM577.354 560c-17.674 0-32 14.326-32 32s14.326 32 32 32h288c17.674 0 32-14.326 32-32s-14.326-32-32-32h-288z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["group-by-type"],"defaultCode":59757,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1024,"name":"group-by-type","prevSize":32,"id":112,"code":59757},"setIdx":2,"setId":2,"iconIdx":112},{"icon":{"paths":["M170.668 245.336c0-17.673 14.327-32 32-32h640.846c17.674 0 32 14.327 32 32s-14.326 32-32 32h-640.846c-17.673 0-32-14.327-32-32zM170.668 501.334c0-17.67 14.327-32 32-32h640.846c17.674 0 32 14.33 32 32 0 17.674-14.326 32-32 32h-640.846c-17.673 0-32-14.326-32-32zM170.668 757.334c0-17.67 14.327-32 32-32h640.846c17.674 0 32 14.33 32 32 0 17.674-14.326 32-32 32h-640.846c-17.673 0-32-14.326-32-32z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["hamburguer"],"defaultCode":59758,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1025,"name":"hamburguer","prevSize":32,"id":113,"code":59758},"setIdx":2,"setId":2,"iconIdx":113},{"icon":{"paths":["M832 512c0 176.73-143.27 320-320 320s-320-143.27-320-320h-64c0 212.077 171.923 384 384 384s384-171.923 384-384c0-212.077-171.923-384-384-384-123.718 0-233.772 58.508-304 149.364v-101.364c0-17.673-14.327-32-32-32s-32 14.327-32 32v192c0 17.674 14.327 32 32 32h176c17.674 0 32-14.326 32-32s-14.326-32-32-32h-107.295c57.24-86.756 155.583-144 267.295-144 176.73 0 320 143.27 320 320z","M544 320c0-17.673-14.326-32-32-32s-32 14.327-32 32v224c0 8.486 3.373 16.627 9.373 22.627l96 96c12.496 12.496 32.758 12.496 45.254 0s12.496-32.758 0-45.254l-86.627-86.627v-210.746z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["history"],"defaultCode":59759,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1026,"name":"history","prevSize":32,"id":114,"code":59759},"setIdx":2,"setId":2,"iconIdx":114},{"icon":{"paths":["M522.042 195.354l224.464 260.044v366.234c0 5.856-4.752 10.605-10.614 10.605h-136.416v-149.821c0-23.424-19.014-42.413-42.47-42.413h-85.955c-23.453 0-42.467 18.989-42.467 42.413v149.821h-136.41c-5.864 0-10.617-4.749-10.617-10.605v-366.307l224.403-259.971c4.237-4.907 11.85-4.907 16.083 0zM560.57 895.856h175.322c41.043 0 74.32-33.232 74.32-74.224v-244.205h56.227c12.454 0 23.766-7.251 28.954-18.557 5.19-11.309 3.302-24.602-4.829-34.022l-320.272-371.033c-29.648-34.347-82.934-34.347-112.582 0l-320.27 371.033c-8.132 9.421-10.020 22.714-4.831 34.022 5.188 11.306 16.501 18.557 28.956 18.557h56.288v244.205c0 40.992 33.274 74.224 74.32 74.224h175.316c1.174 0.096 2.362 0.147 3.562 0.147h85.955c1.2 0 2.39-0.051 3.565-0.147z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["home"],"defaultCode":59760,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1027,"name":"home","prevSize":32,"id":115,"code":59760},"setIdx":2,"setId":2,"iconIdx":115},{"icon":{"paths":["M864 512c0-86.89-31.482-166.429-83.664-227.826l-496.162 496.162c61.397 52.182 140.937 83.664 227.826 83.664 194.403 0 352-157.597 352-352zM239.349 734.65l495.3-495.3c-60.662-49.597-138.182-79.349-222.65-79.349-194.404 0-352 157.596-352 352 0 84.467 29.753 161.987 79.349 222.65zM928 512c0 229.75-186.25 416-416 416s-416-186.25-416-416c0-229.75 186.25-416 416-416s416 186.25 416 416z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["ignore"],"defaultCode":59740,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1028,"name":"ignore","prevSize":32,"id":116,"code":59740},"setIdx":2,"setId":2,"iconIdx":116},{"icon":{"paths":["M406.685 405.334c0 47.126-38.205 85.331-85.334 85.331-47.127 0-85.332-38.205-85.332-85.331 0-47.13 38.205-85.334 85.332-85.334 47.13 0 85.334 38.205 85.334 85.334z","M97.352 192c0-17.673 14.327-32 32-32h767.999c17.674 0 32 14.327 32 32v640c0 17.674-14.326 32-32 32h-767.999c-17.673 0-32-14.326-32-32v-640zM161.352 764.163l151.704-176.989c9.271-10.813 24.57-14.202 37.536-8.307l153.123 69.603 160.474-204.24c6.010-7.651 15.174-12.15 24.902-12.23s18.963 4.272 25.098 11.821l151.162 186.048v-405.869h-703.999v540.163zM214.927 800h650.423v-68.64l-175.581-216.099-166.781 212.269-176.989-80.448-131.073 152.918z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["image"],"defaultCode":59761,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1029,"name":"image","prevSize":32,"id":117,"code":59761},"setIdx":2,"setId":2,"iconIdx":117},{"icon":{"paths":["M512 873.027c-199.389 0-361.026-161.635-361.026-361.024s161.636-361.026 361.026-361.026c199.389 0 361.024 161.637 361.024 361.026s-161.635 361.024-361.024 361.024zM512 938.669c235.642 0 426.666-191.024 426.666-426.666s-191.024-426.667-426.666-426.667c-235.642 0-426.667 191.025-426.667 426.667s191.025 426.666 426.667 426.666zM544.819 347.901c0 18.125-14.694 32.819-32.819 32.819-18.128 0-32.822-14.694-32.822-32.819 0-18.128 14.694-32.821 32.822-32.821 18.125 0 32.819 14.693 32.819 32.821zM512 413.542c-18.128 0-32.822 14.694-32.822 32.819v229.744c0 18.125 14.694 32.819 32.822 32.819 18.125 0 32.819-14.694 32.819-32.819v-229.744c0-18.125-14.694-32.819-32.819-32.819z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["info"],"defaultCode":59762,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1030,"name":"info","prevSize":32,"id":118,"code":59762},"setIdx":2,"setId":2,"iconIdx":118},{"icon":{"paths":["M512 864c-194.404 0-352-157.597-352-352s157.596-352 352-352c194.403 0 352 157.596 352 352s-157.597 352-352 352zM512 928c229.75 0 416-186.25 416-416s-186.25-416-416-416c-229.75 0-416 186.25-416 416s186.25 416 416 416zM662.627 361.373c12.496 12.496 12.496 32.758 0 45.254l-105.373 105.373 105.373 105.373c12.496 12.496 12.496 32.758 0 45.254s-32.758 12.496-45.254 0l-105.373-105.373-105.373 105.373c-12.496 12.496-32.758 12.496-45.254 0s-12.496-32.758 0-45.254l105.373-105.373-105.373-105.373c-12.496-12.496-12.496-32.758 0-45.254s32.758-12.496 45.254 0l105.373 105.373 105.373-105.373c12.496-12.496 32.758-12.496 45.254 0z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["input-clear"],"defaultCode":59763,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1031,"name":"input-clear","prevSize":32,"id":119,"code":59763},"setIdx":2,"setId":2,"iconIdx":119},{"icon":{"paths":["M384 288c-17.674 0-32 14.327-32 32s14.326 32 32 32h256c17.674 0 32-14.326 32-32s-14.326-32-32-32h-256z","M352 448c0-17.674 14.326-32 32-32h256c17.674 0 32 14.326 32 32s-14.326 32-32 32h-256c-17.674 0-32-14.326-32-32z","M512 640c-17.674 0-32 14.326-32 32s14.326 32 32 32c17.674 0 32-14.326 32-32s-14.326-32-32-32z","M224 224v576c0 35.347 28.654 64 64 64h448c35.347 0 64-28.653 64-64v-576c0-35.346-28.653-64-64-64h-448c-35.346 0-64 28.654-64 64zM288 800v-576h448v576h-448z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["instance"],"defaultCode":59764,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1032,"name":"instance","prevSize":32,"id":120,"code":59764},"setIdx":2,"setId":2,"iconIdx":120},{"icon":{"paths":["M563.59 255.992l-170.669 512.001h-136.941c-17.673 0-32 14.326-32 32 0 17.67 14.327 32 32 32h320c17.674 0 32-14.33 32-32 0-17.674-14.326-32-32-32h-115.597l170.669-512.001h136.928c17.674 0 32-14.327 32-32s-14.326-32-32-32h-159.002c-0.666-0.021-1.328-0.021-1.99 0h-159.008c-17.674 0-32 14.327-32 32s14.326 32 32 32h115.61z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124319081245699212911624514522416519902101":[{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["italic"],"defaultCode":59765,"grid":0},"attrs":[{}],"properties":{"order":1033,"name":"italic","prevSize":32,"id":121,"code":59765},"setIdx":2,"setId":2,"iconIdx":121},{"icon":{"paths":["M497.136 169.372c12.499 12.497 12.499 32.758 0 45.255l-35.958 35.96c1.078-0.016 2.163-0.025 3.245-0.025h191.152c115.11 0 208.426 93.316 208.426 208.426 0 115.107-93.315 208.422-208.426 208.422h-15.574v-64h15.574c79.763 0 144.426-64.659 144.426-144.422 0-79.766-64.662-144.426-144.426-144.426h-191.152c-1.030 0-2.058 0.011-3.082 0.032l35.795 35.796c12.499 12.499 12.499 32.758 0 45.258-12.496 12.496-32.758 12.496-45.254 0l-90.509-90.511c-12.496-12.497-12.496-32.758 0-45.255l90.509-90.51c12.496-12.497 32.758-12.497 45.254 0zM201.318 500.746h56.159v325.818h-59.023v-268.387h-1.909l-76.204 48.682v-54.090l80.977-52.022zM570.41 719.494c0 64.749-48.045 111.523-116.931 111.523-63.638 0-110.886-38.979-112.48-93.069h57.274c2.070 26.726 25.773 45.341 55.206 45.341 34.838 0 59.978-25.933 59.818-62.365 0.16-36.909-25.613-63.318-61.411-63.475-19.568-0.16-40.25 7.955-51.226 20.045l-53.296-8.749 17.024-168h188.998v49.318h-140.16l-9.386 86.384h1.91c12.090-14.317 35.475-24.816 61.885-24.816 59.184 0 102.774 45.181 102.774 107.862z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["jump-backward"],"defaultCode":59766,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1034,"name":"jump-backward","prevSize":32,"id":122,"code":59766},"setIdx":2,"setId":2,"iconIdx":122},{"icon":{"paths":["M494.861 169.372c-12.496 12.497-12.496 32.758 0 45.255l35.962 35.96c-1.082-0.016-2.163-0.025-3.248-0.025h-191.149c-115.111 0-208.426 93.316-208.426 208.426 0 115.107 93.315 208.422 208.426 208.422h15.574v-64h-15.574c-79.764 0-144.426-64.659-144.426-144.422 0-79.766 64.661-144.426 144.426-144.426h191.149c1.030 0 2.061 0.011 3.085 0.032l-35.798 35.796c-12.496 12.499-12.496 32.758 0 45.258 12.499 12.496 32.758 12.496 45.258 0l90.509-90.511c12.496-12.497 12.496-32.758 0-45.255l-90.509-90.51c-12.499-12.497-32.758-12.497-45.258 0zM521.318 500.746h56.157v325.818h-59.021v-268.387h-1.91l-76.205 48.682v-54.090l80.979-52.022zM890.41 719.494c0 64.749-48.048 111.523-116.934 111.523-63.635 0-110.886-38.979-112.477-93.069h57.274c2.067 26.726 25.773 45.341 55.203 45.341 34.842 0 59.978-25.933 59.821-62.365 0.157-36.909-25.616-63.318-61.411-63.475-19.568-0.16-40.25 7.955-51.226 20.045l-53.296-8.749 17.021-168h189.002v49.318h-140.16l-9.386 86.384h1.91c12.090-14.317 35.475-24.816 61.885-24.816 59.181 0 102.774 45.181 102.774 107.862z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["jump-forward"],"defaultCode":59767,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1035,"name":"jump-forward","prevSize":32,"id":123,"code":59767},"setIdx":2,"setId":2,"iconIdx":123},{"icon":{"paths":["M769.296 649.373c12.496 12.496 12.496 32.758 0 45.254l-192 192c-12.499 12.496-32.758 12.496-45.258 0l-192-192c-12.496-12.496-12.496-32.758 0-45.254 12.499-12.496 32.758-12.496 45.258 0l137.37 137.373v-578.746h-192v192c0 17.674-14.325 32-31.999 32s-32-14.326-32-32v-224c0-17.673 14.327-32 32-32h255.999c17.674 0 32 14.327 32 32v610.746l137.373-137.373c12.499-12.496 32.758-12.496 45.258 0z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["jump-to-message"],"defaultCode":59768,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1036,"name":"jump-to-message","prevSize":32,"id":124,"code":59768},"setIdx":2,"setId":2,"iconIdx":124},{"icon":{"paths":["M576 256c0 35.346-28.653 64-64 64s-64-28.654-64-64c0-35.346 28.653-64 64-64s64 28.654 64 64z","M576 512c0 35.347-28.653 64-64 64s-64-28.653-64-64c0-35.347 28.653-64 64-64s64 28.653 64 64z","M576 768c0 35.347-28.653 64-64 64s-64-28.653-64-64c0-35.347 28.653-64 64-64s64 28.653 64 64z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["kebab"],"defaultCode":59769,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1037,"name":"kebab","prevSize":32,"id":125,"code":59769},"setIdx":2,"setId":2,"iconIdx":125},{"icon":{"paths":["M160 224c-35.346 0-64 28.654-64 64v448c0 35.347 28.654 64 64 64h704c35.347 0 64-28.653 64-64v-448c0-35.346-28.653-64-64-64h-704zM160 288h704v448h-704v-448zM256 352c-17.673 0-32 14.326-32 32s14.327 32 32 32h64c17.674 0 32-14.326 32-32s-14.326-32-32-32h-64zM256 512c0-17.674 14.327-32 32-32h64c17.674 0 32 14.326 32 32s-14.326 32-32 32h-64c-17.673 0-32-14.326-32-32zM480 480c-17.674 0-32 14.326-32 32s14.326 32 32 32h64c17.674 0 32-14.326 32-32s-14.326-32-32-32h-64zM640 512c0-17.674 14.326-32 32-32h64c17.674 0 32 14.326 32 32s-14.326 32-32 32h-64c-17.674 0-32-14.326-32-32zM480 352c-17.674 0-32 14.326-32 32s14.326 32 32 32h64c17.674 0 32-14.326 32-32s-14.326-32-32-32h-64zM320 640c0-17.674 14.326-32 32-32h320c17.674 0 32 14.326 32 32s-14.326 32-32 32h-320c-17.674 0-32-14.326-32-32zM704 352c-17.674 0-32 14.326-32 32s14.326 32 32 32h64c17.674 0 32-14.326 32-32s-14.326-32-32-32h-64z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["keyboard"],"defaultCode":59770,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1038,"name":"keyboard","prevSize":32,"id":126,"code":59770},"setIdx":2,"setId":2,"iconIdx":126},{"icon":{"paths":["M505.133 128.078c60.819-1.376 120.422 15.569 170.346 48.251 49.904 32.67 87.501 79.327 107.75 133.159 20.24 53.808 22.205 112.266 5.648 167.165-16.554 54.89-50.864 103.683-98.368 139.309-15.501 11.462-28.189 26.246-36.989 43.309-8.822 17.107-13.469 36-13.507 55.216v21.514h-96.013v-148.774l120.989-151.235c11.040-13.802 8.803-33.939-4.998-44.979s-33.939-8.803-44.979 4.998l-103.011 128.765-103.011-128.765c-11.040-13.802-31.178-16.038-44.979-4.998s-16.038 31.178-4.998 44.979l120.989 151.235v148.774h-95.994v-21.677c-0.138-19.030-4.762-37.728-13.462-54.691-8.694-16.954-21.21-31.69-36.509-43.194l-19.229 25.578 19.069-25.696c-34.247-25.418-61.857-57.84-80.845-94.736-18.985-36.89-28.886-77.331-29.027-118.285v-0.045c-0.71-146.981 123.709-271.715 281.13-275.177zM640.013 800c16.506 0 32.618-6.243 44.72-17.795 12.157-11.603 19.28-27.664 19.28-44.746v-22.842c0.022-8.947 2.182-17.856 6.39-26.016 4.214-8.176 10.406-15.459 18.208-21.216l0.192-0.144c58.173-43.59 100.733-103.75 121.35-172.109 20.621-68.378 18.154-141.245-7.021-208.177-25.168-66.908-71.664-124.28-132.602-164.174-60.915-39.878-133.274-60.348-206.826-58.689-189.76 4.184-344.567 155.060-343.702 339.427l0 0.045 32-0.154-32 0.109c0.176 51.165 12.553 101.558 36.121 147.35 23.547 45.754 57.616 85.658 99.521 116.774 7.682 5.792 13.781 13.062 17.952 21.194 4.164 8.122 6.33 16.944 6.409 25.84v22.781c0 17.082 7.123 33.142 19.28 44.746 12.106 11.552 28.218 17.795 44.72 17.795h256.006zM352 864c-17.674 0-32 14.326-32 32s14.326 32 32 32h320c17.674 0 32-14.326 32-32s-14.326-32-32-32h-320z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["lamp-bulb"],"defaultCode":59836,"grid":0},"attrs":[{}],"properties":{"order":1039,"id":127,"name":"lamp-bulb","prevSize":32,"code":59836},"setIdx":2,"setId":2,"iconIdx":127},{"icon":{"paths":["M681.904 256c0-17.673-14.326-32-32-32s-32 14.327-32 32v56.875l-80.346 13.998c-17.411 3.034-29.069 19.61-26.035 37.021 3.034 17.408 19.61 29.066 37.021 26.032l69.36-12.086v69.373c-30.384 6.851-60.461 20.074-84.154 43.139-27.923 27.184-44.070 65.238-44.070 113.808 0 25.741 6.262 48.262 18.451 66.621 12.186 18.349 29.062 30.682 47.251 38 35.357 14.221 76.72 10.173 108.128-4.579l1.206-0.566c31.126-14.621 62.493-29.354 90.723-57.818 21.325-21.507 39.709-49.539 56.848-88.678 5.654 9.498 9.594 20.966 10.285 34.339 1.632 31.526-14.275 82.813-87.955 153.418-12.758 12.227-13.19 32.483-0.963 45.245 12.227 12.758 32.486 13.19 45.245 0.963 80.192-76.851 110.586-145.034 107.59-202.934-2.986-57.658-38.586-96.022-70.675-113.955-20.774-13.014-50.214-22.826-81.216-28.288-16.624-2.931-34.47-4.749-52.694-4.995v-74.243l101.718-17.722c17.411-3.034 29.066-19.61 26.032-37.019-3.034-17.411-19.606-29.066-37.018-26.032l-90.733 15.809v-45.724zM578.394 536.208c10.163-9.891 23.565-17.475 39.51-22.704v138.653c-13.443 2.547-27.485 1.731-38.634-2.752-7.712-3.104-13.658-7.757-17.824-14.029-4.157-6.262-7.766-15.997-7.766-31.216 0-33.35 10.563-54.176 24.714-67.952zM709.994 600.752c-8.682 8.755-17.782 15.706-28.090 22.074v-117.888c14.125 0.24 28.224 1.661 41.587 4.016 13.587 2.397 25.683 5.622 35.763 9.165-16.88 42.038-33.069 66.304-49.261 82.634zM247.704 565.334h98.386l-49.193-184.883-49.193 184.883zM390.851 733.562l-27.734-104.227h-132.442l-27.732 104.227c-4.544 17.078-22.073 27.242-39.152 22.694-17.079-4.544-27.24-22.070-22.696-39.152l106.323-399.598c13.494-50.714 85.462-50.713 98.956 0l106.323 399.598c4.544 17.082-5.616 34.608-22.694 39.152-17.078 4.547-34.608-5.616-39.152-22.694z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["language"],"defaultCode":59771,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1040,"name":"language","prevSize":32,"id":128,"code":59771},"setIdx":2,"setId":2,"iconIdx":128},{"icon":{"paths":["M234.831 743.917c-75.198-141.606-58.197-285.718 40.507-391.734 101.776-109.314 284.915-172.318 524.636-158.217 16.192 0.953 29.114 13.872 30.064 30.066 14.102 239.723-48.902 422.859-158.218 524.635-106.016 98.707-250.128 115.706-391.737 40.506l-65.457 65.456c-12.497 12.499-32.758 12.499-45.255 0-12.497-12.496-12.497-32.758 0-45.254l65.458-65.456zM282.51 696.237l300.107-300.109c12.496-12.496 32.758-12.496 45.254 0 12.496 12.499 12.496 32.758 0 45.258l-300.109 300.106c113.565 53.238 220.73 34.554 300.448-39.664 86.579-80.611 146.157-231.866 139.251-445.286-213.418-6.905-364.675 52.673-445.283 139.254-74.219 79.715-92.904 186.877-39.669 300.442z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["leaf"],"defaultCode":59814,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1041,"id":129,"name":"leaf","prevSize":32,"code":59814},"setIdx":2,"setId":2,"iconIdx":129},{"icon":{"paths":["M254.841 275.612l-13.972 14.271c-37.092 37.883-36.449 98.664 1.435 135.758l145.619 142.573c37.885 37.091 98.666 36.448 135.76-1.437l13.971-14.269c0.723-0.739 1.43-1.488 2.128-2.243l0.099 0.099c5.805-5.904 13.888-9.568 22.822-9.568 17.674 0 32 14.326 32 32 0 9.6-4.227 18.211-10.922 24.077l-0.397 0.41-13.974 14.269c-61.818 63.142-163.12 64.214-226.259 2.394l-145.622-142.576c-63.141-61.818-64.212-163.119-2.392-226.26l13.972-14.27c61.82-63.141 163.12-64.212 226.263-2.392l74.691 73.131c0.976 0.847 1.901 1.752 2.768 2.71l0.374 0.366-0.026 0.026c4.934 5.63 7.923 13.005 7.923 21.078 0 17.674-14.326 32-32 32-7.83 0-15.005-2.813-20.566-7.482l-0.106 0.109-77.834-76.206c-37.885-37.092-98.666-36.45-135.757 1.435zM790.566 768.003l13.971-14.269c37.091-37.885 36.448-98.666-1.437-135.757l-145.619-142.576c-37.885-37.091-98.666-36.448-135.757 1.437l-13.971 14.269c-0.723 0.739-1.434 1.488-2.128 2.243l-0.102-0.099c-5.805 5.907-13.885 9.568-22.822 9.568-17.67 0-32-14.326-32-32 0-9.6 4.227-18.211 10.922-24.077l0.4-0.406 13.971-14.272c61.821-63.142 163.12-64.211 226.262-2.39l145.619 142.573c63.142 61.821 64.211 163.12 2.394 226.262l-13.971 14.269c-61.821 63.142-163.123 64.211-226.262 2.394l-74.694-73.133c-0.976-0.845-1.901-1.75-2.768-2.71l-0.374-0.365 0.026-0.026c-4.931-5.629-7.923-13.005-7.923-21.078 0-17.674 14.326-32 32-32 7.83 0 15.005 2.813 20.566 7.482l0.106-0.109 77.837 76.208c37.885 37.091 98.662 36.448 135.757-1.437z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["link"],"defaultCode":59752,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1042,"name":"link","prevSize":32,"id":130,"code":59752},"setIdx":2,"setId":2,"iconIdx":130},{"icon":{"paths":["M840.541 128c31.318 0 56.813 24.79 56.813 55.383v657.212c0 30.592-25.494 55.427-56.813 55.427h-654.546c-31.254 0-56.642-24.835-56.642-55.427v-657.212c0-30.593 25.387-55.383 56.642-55.383h654.546zM300.196 233.75c-36.588 0-66.093 29.59-66.093 66.050 0 36.482 29.505 66.072 66.093 66.072 36.437 0 66.005-29.59 66.005-66.072 0-36.46-29.568-66.050-66.005-66.050zM243.148 782.461h114.029v-366.515h-114.029v366.515zM537.814 415.923h-109.187v366.515h113.773v-181.274c0-47.83 9.046-94.147 68.333-94.147 58.454 0 59.181 54.678 59.181 97.174v178.246h113.901v-201.008c0-98.714-21.312-174.598-136.666-174.598-55.402 0-92.566 30.381-107.757 59.203h-1.578v-50.112z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["linkedin-monochromatic"],"defaultCode":59658,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1043,"name":"linkedin-monochromatic","prevSize":32,"id":131,"code":59658},"setIdx":2,"setId":2,"iconIdx":131},{"icon":{"paths":["M700.144 361.891c4.685-24.973 34.704-34.093 49.13-13.171 31.994 46.403 50.726 102.653 50.726 163.28s-18.733 116.88-50.726 163.283c-14.426 20.922-44.445 11.802-49.13-13.174l-1.706-9.101c-1.581-8.429 0.384-17.082 4.858-24.403 20.749-33.965 32.704-73.888 32.704-116.605 0-42.714-11.955-82.637-32.704-116.605-4.474-7.318-6.438-15.971-4.858-24.4l1.706-9.104z","M320.704 395.395c-20.748 33.968-32.704 73.891-32.704 116.605 0 42.717 11.956 82.64 32.704 116.605 4.474 7.322 6.438 15.974 4.858 24.403l-1.706 9.101c-4.684 24.976-34.705 34.096-49.128 13.174-31.994-46.403-50.728-102.656-50.728-163.283s18.733-116.877 50.728-163.28c14.424-20.922 44.444-11.802 49.128 13.171l1.706 9.104c1.581 8.429-0.384 17.082-4.858 24.4z","M728.765 209.256l-0.515 2.747c-2.234 11.911 2.534 23.967 11.763 31.821 75.866 64.565 123.987 160.751 123.987 268.175 0 107.427-48.122 203.613-123.987 268.176-9.229 7.856-13.997 19.914-11.763 31.824l0.515 2.746c4.192 22.362 29.69 33.194 47.261 18.746 92.794-76.294 151.974-191.981 151.974-321.491 0-129.507-59.181-245.193-151.974-321.489-17.571-14.448-43.069-3.615-47.261 18.745z","M283.986 243.825c9.228-7.854 13.998-19.911 11.764-31.821l-0.515-2.747c-4.192-22.359-29.69-33.193-47.262-18.745-92.793 76.296-151.973 191.981-151.973 321.489 0 129.51 59.18 245.197 151.973 321.491 17.572 14.448 43.070 3.616 47.262-18.746l0.515-2.746c2.233-11.91-2.536-23.968-11.764-31.824-75.864-64.563-123.986-160.749-123.986-268.176 0-107.424 48.122-203.61 123.986-268.175z","M608 512c0 53.021-42.979 96-96 96s-96-42.979-96-96c0-53.018 42.979-96 96-96s96 42.982 96 96z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["live"],"defaultCode":59774,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1044,"name":"live","prevSize":32,"id":132,"code":59774},"setIdx":2,"setId":2,"iconIdx":132},{"icon":{"paths":["M439.274 704.374c0-33.645 26.278-47.677 72.726-47.677s72.73 14.032 72.73 47.677c0 32.96-13.19 111.069-23.914 149.76-4.963 17.808-22.080 25.171-48.816 25.171s-43.85-7.363-48.813-25.174c-10.717-38.666-23.914-116.688-23.914-149.757zM616.778 870.374l0.026-0.090c6.176-22.291 12.566-53.869 17.386-83.453 4.688-28.787 8.72-60.707 8.72-82.458 0-35.891-15.811-67.802-46.797-87.114-26.035-16.227-57.152-19.926-84.112-19.926-26.957 0-58.077 3.699-84.112 19.926-30.982 19.312-46.797 51.222-46.797 87.114 0 21.805 4.035 53.728 8.726 82.515 4.819 29.578 11.21 61.123 17.379 83.392l0.026 0.086c7.402 26.557 24.982 45.664 46.87 56.467 19.472 9.61 40.426 11.834 57.907 11.834 17.485 0 38.435-2.224 57.907-11.83 21.888-10.8 39.469-29.907 46.87-56.464zM459.635 460.8c0-28.275 23.446-51.2 52.365-51.2s52.365 22.925 52.365 51.2c0 28.278-23.446 51.2-52.365 51.2s-52.365-22.922-52.365-51.2zM512 341.334c-67.478 0-122.182 53.488-122.182 119.466 0 65.981 54.704 119.469 122.182 119.469s122.182-53.488 122.182-119.469c0-65.978-54.704-119.466-122.182-119.466zM677.802 537.254c-6.662 13.792-3.882 31.11 6.278 42.573 14.086 15.894 39.85 17.939 50.205-0.602 19.642-35.174 30.806-75.526 30.806-118.426 0-136.672-113.315-247.465-253.091-247.465-139.779 0-253.092 110.793-253.092 247.465 0 42.899 11.164 83.251 30.806 118.426 10.354 18.541 36.119 16.496 50.205 0.602 10.16-11.462 12.938-28.781 6.275-42.573-11.203-23.187-17.469-49.104-17.469-76.454 0-98.97 82.054-179.199 183.274-179.199s183.27 80.229 183.27 179.199c0 27.35-6.262 53.267-17.469 76.454zM730.16 699.795c-0.304-10.659 3.542-21.072 10.928-28.762 52.771-54.957 85.094-128.902 85.094-210.234 0-169.661-140.666-307.199-314.182-307.199s-314.182 137.538-314.182 307.199c0 81.331 32.323 155.28 85.093 210.234 7.386 7.69 11.234 18.102 10.928 28.762-0.833 29.018-31.273 47.917-52.121 27.715-70.223-68.042-113.718-162.41-113.718-266.71 0-207.363 171.923-375.465 384-375.465s384 168.102 384 375.465c0 104.304-43.498 198.672-113.722 266.714-20.848 20.202-51.286 1.302-52.118-27.718z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["live-streaming"],"defaultCode":59773,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1045,"name":"live-streaming","prevSize":32,"id":133,"code":59773},"setIdx":2,"setId":2,"iconIdx":133},{"icon":{"paths":["M397.011 527.334c26.576 0 48.122-21.587 48.122-48.214s-21.546-48.214-48.122-48.214c-26.576 0-48.118 21.587-48.118 48.214s21.542 48.214 48.118 48.214z","M589.491 479.12c0 26.627-21.542 48.214-48.118 48.214s-48.122-21.587-48.122-48.214c0-26.627 21.546-48.214 48.122-48.214s48.118 21.587 48.118 48.214z","M733.853 479.12c0 26.627-21.542 48.214-48.118 48.214s-48.122-21.587-48.122-48.214c0-26.627 21.546-48.214 48.122-48.214s48.118 21.587 48.118 48.214z","M88.039 813.683l119.625 31.283c85.312 22.307 173.45-16.256 238.691-79.709 29.501 4.794 59.875 7.242 90.678 7.242 218.294 0 404.339-122.864 404.339-294.518 0-171.664-186.042-294.52-404.339-294.52-218.314 0-404.351 122.852-404.34 294.523 0 65.072 27.642 125.014 75.655 173.587-2.847 24.835-14.596 44.73-36.049 68.55l-84.261 93.562zM537.034 258.997c183.13 0 331.6 98.043 331.6 218.984 0 120.931-148.47 218.982-331.6 218.982-40.781 0-79.834-4.877-115.91-13.763-36.669 45.6-117.335 109.008-195.697 88.518 25.489-28.304 63.251-76.131 55.168-154.909-46.968-37.779-75.162-86.134-75.162-138.829-0.008-120.95 148.461-218.984 331.6-218.984z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["livechat-monochromatic"],"defaultCode":59775,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1046,"name":"livechat-monochromatic","prevSize":32,"id":134,"code":59775},"setIdx":2,"setId":2,"iconIdx":134},{"icon":{"paths":["M512 128c-97.203 0-176 78.798-176 176v142.477h-16c-53.020 0-96 42.979-96 96v257.523c0 53.021 42.981 96 96 96h384c53.021 0 96-42.979 96-96v-257.523c0-53.021-42.979-96-96-96h-16v-142.477c0-97.202-78.797-176-176-176zM624 304v142.477h-224v-142.477c0-61.856 50.144-112 112-112s112 50.144 112 112z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["lock-filled"],"defaultCode":59748,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1047,"name":"lock-filled","prevSize":32,"id":135,"code":59748},"setIdx":2,"setId":2,"iconIdx":135},{"icon":{"paths":["M336 304c0-97.202 78.797-176 176-176s176 78.798 176 176v142.477h16c53.021 0 96 42.979 96 96v257.523c0 53.021-42.979 96-96 96h-384c-53.019 0-96-42.979-96-96v-257.523c0-53.021 42.981-96 96-96h16v-142.477zM400 446.477h224v-142.477c0-61.856-50.144-112-112-112s-112 50.144-112 112v142.477zM320 510.477c-17.673 0-32 14.326-32 32v257.523c0 17.674 14.327 32 32 32h384c17.674 0 32-14.326 32-32v-257.523c0-17.674-14.326-32-32-32h-384z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["locker"],"defaultCode":59749,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1048,"name":"locker","prevSize":32,"id":136,"code":59749},"setIdx":2,"setId":2,"iconIdx":136},{"icon":{"paths":["M341.334 778.672c-17.674 0-32 14.326-32 32s14.326 32 32 32h341.334c17.674 0 32-14.326 32-32s-14.326-32-32-32h-341.334zM85.335 298.672c0-70.692 57.308-128 128-128h597.334c70.691 0 128 57.308 128 128v298.666c0 70.694-57.309 128-128 128h-597.334c-70.692 0-128-57.306-128-128v-298.666zM213.335 234.672c-35.346 0-64 28.654-64 64v298.666c0 35.347 28.654 64 64 64h597.334c35.344 0 64-28.653 64-64v-298.666c0-35.347-28.656-64-64-64h-597.334zM256 320c0-11.782 9.551-21.333 21.333-21.333h170.667c11.782 0 21.334 9.551 21.334 21.333s-9.552 21.334-21.334 21.334h-170.667c-11.782 0-21.333-9.552-21.333-21.334zM277.333 554.666c-11.782 0-21.333 9.552-21.333 21.334s9.551 21.334 21.333 21.334h85.332c11.782 0 21.334-9.552 21.334-21.334s-9.552-21.334-21.334-21.334h-85.332zM554.666 320c0-11.782 9.552-21.333 21.334-21.333h170.666c11.782 0 21.334 9.551 21.334 21.333s-9.552 21.334-21.334 21.334h-170.666c-11.782 0-21.334-9.552-21.334-21.334zM448 554.666c-11.782 0-21.334 9.552-21.334 21.334s9.552 21.334 21.334 21.334h298.666c11.782 0 21.334-9.552 21.334-21.334s-9.552-21.334-21.334-21.334h-298.666zM256 448c0-11.782 9.551-21.334 21.333-21.334h213.332c11.782 0 21.334 9.552 21.334 21.334s-9.552 21.334-21.334 21.334h-213.332c-11.782 0-21.333-9.552-21.333-21.334zM618.666 426.666c-11.782 0-21.331 9.552-21.331 21.334s9.549 21.334 21.331 21.334h128c11.782 0 21.334-9.552 21.334-21.334s-9.552-21.334-21.334-21.334h-128z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["log-view"],"defaultCode":59778,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1049,"name":"log-view","prevSize":32,"id":137,"code":59778},"setIdx":2,"setId":2,"iconIdx":137},{"icon":{"paths":["M176 96c-17.673 0-32 14.327-32 32v768c0 17.674 14.327 32 32 32h512c17.674 0 32-14.326 32-32v-96c0-17.674-14.326-32-32-32s-32 14.326-32 32v64h-448v-704h448v64c0 17.673 14.326 32 32 32s32-14.327 32-32v-96c0-17.673-14.326-32-32-32h-512zM521.373 329.373c12.496-12.497 32.758-12.497 45.254 0s12.496 32.758 0 45.254l-105.373 105.373h418.746c17.674 0 32 14.326 32 32s-14.326 32-32 32h-418.746l105.373 105.373c12.496 12.496 12.496 32.758 0 45.254s-32.758 12.496-45.254 0l-160-160c-12.496-12.496-12.496-32.758 0-45.254l160-160z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["login"],"defaultCode":59779,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1050,"name":"login","prevSize":32,"id":138,"code":59779},"setIdx":2,"setId":2,"iconIdx":138},{"icon":{"paths":["M268.099 96c-17.673 0-32 14.327-32 32v768c0 17.674 14.327 32 32 32h512c17.674 0 32-14.326 32-32v-96c0-17.674-14.326-32-32-32s-32 14.326-32 32v64h-448v-704h448v64c0 17.673 14.326 32 32 32s32-14.327 32-32v-96c0-17.673-14.326-32-32-32h-512zM994.726 489.373l-160-160c-12.496-12.497-32.758-12.497-45.254 0s-12.496 32.758 0 45.254l105.373 105.373h-418.746c-17.674 0-32 14.326-32 32s14.326 32 32 32h418.746l-105.373 105.373c-12.496 12.496-12.496 32.758 0 45.254s32.758 12.496 45.254 0l160-160c12.496-12.496 12.496-32.758 0-45.254z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["logout"],"defaultCode":59780,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1051,"name":"logout","prevSize":32,"id":139,"code":59780},"setIdx":2,"setId":2,"iconIdx":139},{"icon":{"paths":["M192 736h640v-448h-640v448zM128 256c0-17.673 14.327-32 32-32h704c17.674 0 32 14.327 32 32v512c0 17.674-14.326 32-32 32h-704c-17.673 0-32-14.326-32-32v-512zM305.304 389.082c-14.866-9.555-34.665-5.251-44.222 9.613-9.557 14.867-5.253 34.666 9.613 44.224l241.304 155.123 241.306-155.123c14.864-9.558 19.168-29.357 9.613-44.224-9.558-14.864-29.357-19.168-44.224-9.613l-206.694 132.877-206.696-132.877z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["mail"],"defaultCode":59781,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1052,"name":"mail","prevSize":32,"id":140,"code":59781},"setIdx":2,"setId":2,"iconIdx":140},{"icon":{"paths":["M302.769 192h418.463l23.187 72.727h-0.211l23.792 63.999c0 41.27-31.306 69.818-64 69.818s-64-28.547-64-69.818c0-18.476-14.326-33.454-32-33.454s-32 14.978-32 33.454c0 41.27-31.306 69.818-64 69.818s-64-28.547-64-69.818c0-18.476-14.326-33.454-32-33.454s-32 14.978-32 33.454c0 41.27-31.306 69.818-64 69.818s-64-28.547-64-69.818l23.794-63.999h-0.213l23.188-72.727zM212.406 264.727l36.491-114.448c4.231-13.27 16.56-22.279 30.488-22.279h465.23c13.93 0 26.259 9.009 30.49 22.279l56.896 178.447c0 33.939-12.083 64.925-32 88.515v350.778c0 53.018-42.979 96-96 96h-384c-53.019 0-96-42.982-96-96v-350.778c-19.916-23.59-32-54.576-32-88.515l20.406-63.999zM288 458.33v309.69c0 17.67 14.327 32 32 32h128v-192.019h128v192.019h128c17.674 0 32-14.33 32-32v-309.69c-10.227 2.752-20.95 4.214-32 4.214-38.23 0-72.547-17.52-96-45.302-23.453 27.782-57.77 45.302-96 45.302s-72.547-17.52-96-45.302c-23.453 27.782-57.77 45.302-96 45.302-11.050 0-21.772-1.462-32-4.214z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["marketplace"],"defaultCode":59782,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1053,"name":"marketplace","prevSize":32,"id":141,"code":59782},"setIdx":2,"setId":2,"iconIdx":141},{"icon":{"paths":["M773.072 576c-35.344 0-64-28.653-64-64s28.656-64 64-64c35.347 0 64 28.653 64 64s-28.653 64-64 64z","M517.072 576c-35.344 0-64-28.653-64-64s28.656-64 64-64c35.347 0 64 28.653 64 64s-28.653 64-64 64z","M261.073 576c-35.346 0-64-28.653-64-64s28.654-64 64-64c35.346 0 63.999 28.653 63.999 64s-28.652 64-63.999 64z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["meatballs"],"defaultCode":59783,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1054,"name":"meatballs","prevSize":32,"id":142,"code":59783},"setIdx":2,"setId":2,"iconIdx":142},{"icon":{"paths":["M651.36 116.071c-57.242-19.989-105.792-20.069-138.358-20.071v64l-1.002-64c-92.006 0.342-297.345 47.824-381.242 242.995-17.897 38.97-34.758 103.344-34.758 173.005 0 69.958 17.020 146.285 52.216 207.875 23.229 40.653 92.799 131.376 191.179 173.536 94.861 40.656 206.368 52.349 296.49 16.301 16.41-6.563 24.39-25.187 17.827-41.597s-25.187-24.39-41.597-17.827c-69.878 27.952-163.171 20.445-247.51-15.699-80.819-34.64-141.384-112.451-160.821-146.464-28.804-50.41-43.784-115.418-43.784-176.125 0-60.765 15.020-116.182 29.055-146.589l0.184-0.4 0.173-0.406c69.507-162.181 243.823-204.604 323.589-204.605 31.594 0.002 70.877 0.296 117.258 16.493 46.147 16.114 101.389 48.779 161.824 116.767 43.658 49.115 63.533 114.977 69.389 177.713 5.891 63.12-2.854 118.189-11.546 142.093-6.4 17.6-20.429 45.44-59.392 45.699-18.259-0.806-72.822-14.672-83.12-69.568v-235.062c0-17.674-3.414-34.134-29.014-34.134-19.338 0-26.454 16.461-26.454 34.134v34.131c-35.181-39.859-95.402-68.266-152.746-68.266-106.038 0-192 85.962-192 192s85.962 192 192 192c62.179 0 117.658-29.555 152.746-75.386 25.715 71.078 102.57 93.027 137.014 94.134l0.515 0.016h0.512c82.643 0 111.715-64.806 120.086-87.83 12.64-34.762 21.674-99.696 15.12-169.907-6.589-70.595-29.379-151.401-85.277-214.287-66.902-75.265-131.075-114.597-188.557-134.67zM627.2 512c0 70.691-57.309 128-128 128s-128-57.309-128-128c0-70.691 57.309-128 128-128s128 57.309 128 128z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124319081245699212911624514522416519902101":[{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["mention"],"defaultCode":59784,"grid":0},"attrs":[{}],"properties":{"order":1055,"name":"mention","prevSize":32,"id":143,"code":59784},"setIdx":2,"setId":2,"iconIdx":143},{"icon":{"paths":["M223.311 308.609c-47.832 66.7-64.077 147.667-64.077 201.187v1.405l-0.127 1.398c-9.348 103.235 27.547 175.997 86.848 226.374 60.643 51.52 146.602 80.998 235.29 90.893 88.614 9.885 186.224 1.398 263.341-14.973 38.56-8.189 70.928-18.125 93.888-28.128 8.906-3.882 15.837-7.536 20.944-10.765-2.378-1.514-5.248-3.197-8.675-5.030-8.886-4.749-19.059-9.261-29.613-13.894l-1.843-0.81c-9.315-4.083-19.725-8.65-27.613-13.078-14.291-8.026-28.317-17.155-38.544-26.867-5.034-4.781-10.762-11.194-14.595-19.184-4.054-8.454-6.96-21.078-1.261-34.435 30.816-72.186 45.459-111.725 52.554-137.834 6.621-24.378 6.621-36.653 6.621-56.17v-0.179c0-15.51-8.979-86.595-53.776-152.876-43.376-64.174-121.395-125.729-264.832-125.729-129.725 0-207.83 53.576-254.529 118.696zM173.267 272.433c58.132-81.063 154.749-144.433 304.573-144.433 164.896 0 261.594 72.589 315.859 152.878 52.838 78.181 64.416 161.881 64.416 187.641 0 21.654-0.022 40.336-8.797 72.64-7.83 28.835-22.627 68.614-50.048 133.424 5.069 4.032 12.592 9.005 22.506 14.57 5.123 2.877 12.995 6.339 24.054 11.194 10.266 4.506 22.582 9.93 33.891 15.978 10.848 5.798 23.526 13.571 32.954 23.738 9.859 10.63 20.208 28.87 12.816 51.139-4.87 14.672-16.182 25.091-25.61 32.016-10.24 7.52-22.947 14.278-36.858 20.342-27.946 12.176-64.582 23.181-105.68 31.907-82.198 17.453-186.522 26.688-282.909 15.936-96.31-10.746-195.346-43.178-268.313-105.165-74.031-62.893-119.295-154.778-108.551-277.856 0.276-63.411 19.117-157.053 75.696-235.948z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["message"],"defaultCode":59786,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1056,"name":"message","prevSize":32,"id":144,"code":59786},"setIdx":2,"setId":2,"iconIdx":144},{"icon":{"paths":["M477.84 128c104.256 0 181.251 29.018 237.494 70.652l-44.317 44.317c-45.52-31.22-107.747-53.057-193.178-53.057-129.725 0-207.83 53.576-254.529 118.696-47.832 66.7-64.077 147.667-64.077 201.187v1.405l-0.127 1.398c-7.328 80.928 13.761 143.126 51.784 190.499l-43.879 43.878c-50.179-59.901-78.131-139.043-69.441-238.595 0.276-63.411 19.117-157.053 75.696-235.948 58.132-81.063 154.749-144.433 304.573-144.433zM822.848 332.499l-47.008 47.008c16.502 42.634 20.608 78.525 20.608 89.011v0.179c0 19.517 0 31.792-6.621 56.17-7.094 26.109-21.738 65.648-52.554 137.834-5.699 13.357-2.794 25.981 1.261 34.435 3.834 7.99 9.562 14.403 14.595 19.184 10.227 9.712 24.253 18.842 38.544 26.867 7.888 4.429 18.298 8.995 27.613 13.078l1.843 0.81c10.554 4.634 20.726 9.146 29.613 13.894 3.427 1.834 6.298 3.517 8.672 5.030-5.104 3.229-12.035 6.883-20.941 10.765-22.96 10.003-55.328 19.939-93.888 28.128-77.12 16.371-174.73 24.858-263.341 14.973-43.744-4.88-86.826-14.525-126.534-29.229l-47.542 47.542c52.771 23.018 110.492 36.886 167.267 43.222 96.387 10.752 200.71 1.517 282.909-15.936 41.098-8.726 77.731-19.731 105.68-31.907 13.91-6.064 26.618-12.822 36.858-20.342 9.427-6.925 20.739-17.344 25.61-32.016 7.392-22.269-2.957-40.509-12.816-51.139-9.427-10.166-22.106-17.939-32.954-23.738-11.309-6.048-23.626-11.472-33.891-15.978-11.059-4.854-18.934-8.317-24.054-11.194-9.914-5.565-17.437-10.538-22.506-14.57 27.421-64.81 42.214-104.589 50.048-133.424 8.774-32.304 8.797-50.986 8.797-72.64 0-20.106-7.053-75.501-35.267-136.019zM836.038 153.372c12.499-12.497 32.758-12.497 45.254 0 12.499 12.497 12.499 32.758 0 45.255l-682.665 682.665c-12.497 12.499-32.758 12.499-45.255 0-12.497-12.496-12.497-32.755 0-45.254l682.666-682.666z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["message-disabled"],"defaultCode":59785,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1057,"name":"message-disabled","prevSize":32,"id":145,"code":59785},"setIdx":2,"setId":2,"iconIdx":145},{"icon":{"paths":["M86.686 85.336l730.792 774.088c0 0 24.899 17.558 43.936-2.928 19.040-20.486 4.394-40.973 4.394-40.973l-779.122-730.187zM318.080 158.503l556.516 599.955c0 0 24.896 17.558 43.936-2.928 19.037-20.486 4.394-40.973 4.394-40.973l-604.845-556.054zM712.035 915.030l-556.517-599.955 604.843 556.054c0 0 14.646 20.486-4.39 40.973-19.040 20.486-43.936 2.928-43.936 2.928zM513.693 221.419l388.803 419.15c0 0 17.395 12.269 30.694-2.042 13.302-14.314 3.069-28.627 3.069-28.627l-422.566-388.482zM597.878 915.677l-388.805-419.152 422.568 388.48c0 0 10.234 14.314-3.069 28.627-13.302 14.31-30.694 2.045-30.694 2.045zM713.498 312.143l176.221 190.551c0 0 8.605 5.747 15.184-0.96 6.579-6.704 1.517-13.411 1.517-13.411l-192.922-176.18zM482.582 880.23l-176.219-190.55 192.923 176.179c0 0 5.059 6.707-1.52 13.414-6.579 6.704-15.184 0.957-15.184 0.957z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["meteor-monochromatic"],"defaultCode":59659,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1058,"name":"meteor-monochromatic","prevSize":32,"id":146,"code":59659},"setIdx":2,"setId":2,"iconIdx":146},{"icon":{"paths":["M608 288c0-53.019-42.979-96-96-96s-96 42.981-96 96v128c0 53.021 42.979 96 96 96s96-42.979 96-96v-128zM352 288c0-88.365 71.635-160 160-160s160 71.635 160 160v128c0 88.365-71.635 160-160 160s-160-71.635-160-160v-128zM256 384c17.673 0 32 14.326 32 32 0 92.086 37.757 149.632 83.722 185.6 46.464 36.358 102.736 51.581 140.278 54.326 37.542-2.746 93.814-17.968 140.278-54.326 45.962-35.968 83.722-93.514 83.722-185.6 0-17.674 14.326-32 32-32s32 14.326 32 32c0 112.714-47.574 188.499-108.278 236-47.904 37.485-103.082 56.762-147.722 64.381v115.619h160c17.674 0 32 14.326 32 32s-14.326 32-32 32h-384c-17.673 0-32-14.326-32-32s14.327-32 32-32h160v-115.619c-44.64-7.619-99.818-26.896-147.722-64.381-60.703-47.501-108.278-123.286-108.278-236 0-17.674 14.327-32 32-32z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["microphone"],"defaultCode":59788,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1059,"name":"microphone","prevSize":32,"id":147,"code":59788},"setIdx":2,"setId":2,"iconIdx":147},{"icon":{"paths":["M512 128c75.546 0 138.861 52.356 155.645 122.762l-59.645 59.644v-22.405c0-53.019-42.979-96-96-96s-96 42.981-96 96v128c0 24.067 8.858 46.067 23.488 62.915l-45.322 45.325c-26.182-28.49-42.166-66.499-42.166-108.24v-128c0-88.365 71.635-160 160-160zM561.35 568.243l102.893-102.893c-15.763 48.672-54.221 87.13-102.893 102.893zM288 416c0 72.154 23.181 123.101 55.328 159.078l-45.304 45.302c-43.428-47.35-74.024-113.99-74.024-204.381 0-17.674 14.327-32 32-32s32 14.326 32 32zM478.659 650.938l-51.808 51.808c18.56 6.374 36.579 10.806 53.149 13.635v115.619h-160c-17.673 0-32 14.326-32 32s14.327 32 32 32h384c17.674 0 32-14.326 32-32s-14.326-32-32-32h-160v-115.619c44.64-7.619 99.818-26.896 147.722-64.381 60.704-47.501 108.278-123.286 108.278-236 0-17.674-14.326-32-32-32s-32 14.326-32 32c0 92.086-37.757 149.632-83.722 185.6-46.464 36.358-102.736 51.581-140.278 54.326-9.971-0.73-21.264-2.339-33.341-4.989zM825.373 153.372c12.496-12.497 32.758-12.497 45.254 0s12.496 32.758 0 45.255l-672 672c-12.497 12.496-32.758 12.496-45.255 0s-12.497-32.758 0-45.254l672-672z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["microphone-disabled"],"defaultCode":59787,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1060,"name":"microphone-disabled","prevSize":32,"id":148,"code":59787},"setIdx":2,"setId":2,"iconIdx":148},{"icon":{"paths":["M234.666 170.661c0-47.128 38.205-85.333 85.333-85.333h384.001c47.126 0 85.331 38.205 85.331 85.333v682.667c0 47.13-38.205 85.334-85.331 85.334h-384.001c-47.128 0-85.333-38.205-85.333-85.334v-682.667zM298.666 170.661v682.667c0 11.782 9.551 21.334 21.333 21.334h384.001c11.782 0 21.331-9.552 21.331-21.334v-682.667c0-11.782-9.549-21.333-21.331-21.333h-96.291c-2.653 24.002-23.002 42.672-47.709 42.672h-96c-24.707 0-45.056-18.67-47.709-42.672h-96.292c-11.782 0-21.333 9.551-21.333 21.333z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["mobile"],"defaultCode":59789,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1061,"name":"mobile","prevSize":32,"id":149,"code":59789},"setIdx":2,"setId":2,"iconIdx":149},{"icon":{"paths":["M319.247 231.566c-62.882 49.504-135.086 136.549-141.94 266.127-5.762 108.922 37.404 187.184 89.915 241.51 53.258 55.098 115.702 84.925 144.25 94.438 41.859 13.955 114.269 29.536 234.643-15.603 34.858-13.072 73.165-42.096 108.304-78.426 14.272-14.755 27.616-30.294 39.6-45.773-28.778 9.293-61.699 17.754-96.589 23.594-56.192 9.405-119.29 12.32-179.411-0.237-2.49-0.518-4.96-1.030-7.408-1.536-22.195-4.576-42.733-8.816-62.589-17.648-23.091-10.275-43.805-25.891-69.299-51.386-42.096-42.096-89.142-107.222-89.371-213.843-1.569-34.080 4.622-81.878 13.764-129.216 4.624-23.946 10.142-48.465 16.132-72.003zM345.562 138.217c32.8-17.15 63.709 15.843 53.875 45.907-12.234 37.414-24.586 85.511-33.482 131.58-9.024 46.732-13.949 88.633-12.643 114.7l0.038 0.797v0.8c0 84.915 36.173 134.918 70.627 169.373 22.509 22.509 36.835 32.278 50.064 38.166 13.229 5.885 26.832 8.717 51.085 13.763 1.923 0.4 3.917 0.816 5.978 1.248 49.914 10.426 104.534 8.336 155.76-0.237 65.434-10.954 122.384-31.981 152.374-47.386 17.562-9.021 34.992-2.47 44.477 5.965 9.661 8.589 19.376 27.152 8.886 46.954-20.637 38.95-53.645 84.419-92.182 124.259-38.211 39.51-84.317 76.038-131.834 93.859-135.626 50.858-223.216 34.438-277.354 16.394-36.515-12.173-108.392-46.912-170.026-110.675-62.381-64.534-114.684-159.427-107.81-289.373 10.79-203.979 157.583-317.098 232.165-356.093z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["moon"],"defaultCode":59790,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1062,"name":"moon","prevSize":32,"id":150,"code":59790},"setIdx":2,"setId":2,"iconIdx":150},{"icon":{"paths":["M144 160c-17.673 0-32 14.327-32 32s14.327 32 32 32h192c17.674 0 32-14.327 32-32s-14.326-32-32-32h-192zM700.4 346.646c11.795-13.165 32.026-14.272 45.187-2.48 13.162 11.795 14.272 32.026 2.477 45.187l-81.222 90.646h216.358c17.674 0 32 14.326 32 32s-14.326 32-32 32h-216.358l81.222 90.646c11.795 13.162 10.685 33.392-2.477 45.187-13.162 11.792-33.392 10.685-45.187-2.48l-129.030-144c-10.893-12.154-10.893-30.554 0-42.707l129.030-144zM112 512c0-17.674 14.327-32 32-32h192c17.674 0 32 14.326 32 32s-14.326 32-32 32h-192c-17.673 0-32-14.326-32-32zM144 640c-17.673 0-32 14.326-32 32s14.327 32 32 32h192c17.674 0 32-14.326 32-32s-14.326-32-32-32h-192zM112 352c0-17.674 14.327-32 32-32h192c17.674 0 32 14.326 32 32s-14.326 32-32 32h-192c-17.673 0-32-14.326-32-32zM144 800c-17.673 0-32 14.326-32 32s14.327 32 32 32h192c17.674 0 32-14.326 32-32s-14.326-32-32-32h-192z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["move-to-the-queue"],"defaultCode":59791,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1063,"name":"move-to-the-queue","prevSize":32,"id":151,"code":59791},"setIdx":2,"setId":2,"iconIdx":151},{"icon":{"paths":["M809.002 166.758c7.782 6.063 12.333 15.377 12.333 25.242v448h-0.112c0.074 1.734 0.112 3.478 0.112 5.229 0 69.053-57.309 125.030-128 125.030-70.694 0-128-55.978-128-125.030s57.306-125.030 128-125.030c23.312 0 45.171 6.090 64 16.73v-303.86l-384 96.798v409.136c0 69.053-57.309 125.037-128.001 125.037s-128-55.978-128-125.030c0-69.050 57.308-125.027 128-125.027 23.314 0 45.173 6.086 64 16.726v-325.777c0-14.66 9.962-27.446 24.177-31.029l448-112.93c9.568-2.411 19.709-0.276 27.491 5.788z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["musical-note"],"defaultCode":59792,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1064,"name":"musical-note","prevSize":32,"id":152,"code":59792},"setIdx":2,"setId":2,"iconIdx":152},{"icon":{"paths":["M208 176c-35.346 0-64 28.654-64 64v576c0 35.347 28.654 64 64 64h576c35.347 0 64-28.653 64-64v-576c0-35.346-28.653-64-64-64h-576zM208 240h576v576h-576v-576zM698.627 558.15c-0.189 17.674-14.669 31.846-32.339 31.658-17.674-0.189-31.846-14.669-31.658-32.339l1.318-123.594-309.341 308.774c-12.51 12.483-32.771 12.464-45.256-0.042-12.485-12.509-12.467-32.771 0.042-45.258l309.195-308.624-123.382 1.315c-17.674 0.189-32.154-13.984-32.339-31.654-0.189-17.674 13.984-32.15 31.654-32.339l201.92-2.157c8.605-0.093 16.886 3.286 22.97 9.37 6.086 6.086 9.462 14.365 9.373 22.97l-2.157 201.92z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["new-window"],"defaultCode":59793,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1065,"name":"new-window","prevSize":32,"id":153,"code":59793},"setIdx":2,"setId":2,"iconIdx":153},{"icon":{"paths":["M601.331 808.928h-174.154c0.003 48.090 38.989 87.072 87.078 87.072s87.075-38.982 87.075-87.072zM815.597 731.677c7.274 9.696 8.442 22.669 3.021 33.51s-16.499 17.69-28.621 17.69h-565.996c-12.943 0-24.611-7.798-29.564-19.757-4.953-11.955-2.215-25.718 6.937-34.87l51.653-51.654v-274.032c0-144.272 116.957-261.228 261.229-261.228s261.229 116.956 261.229 261.228v275.629l40.112 53.485zM711.485 715.894v-313.331c0-108.926-88.304-197.228-197.229-197.228-108.928 0-197.229 88.302-197.229 197.228v313.331h394.458z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["notification"],"defaultCode":59795,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1066,"name":"notification","prevSize":32,"id":154,"code":59795},"setIdx":2,"setId":2,"iconIdx":154},{"icon":{"paths":["M781.837 402.634c0-5.245-0.154-10.454-0.461-15.622l-63.539 63.539v265.363h-265.363l-66.979 66.979h425.363c12.944 0 24.611-7.795 29.565-19.754 4.954-11.955 2.214-25.722-6.938-34.874l-51.648-51.648v-273.984zM704.765 217.373l-45.254 45.255c-35.638-35.351-84.704-57.189-138.867-57.189-108.909 0-197.194 88.287-197.194 197.195v196.054l-64.001 64v-260.054c0-144.254 116.941-261.195 261.194-261.195 71.837 0 136.899 29.001 184.122 75.934zM433.578 808.934c0 48.086 38.982 87.066 87.066 87.066s87.066-38.979 87.066-87.066h-174.131zM854.275 190.982c-11.334-11.334-29.709-11.334-41.043 0l-612.732 612.733c-11.333 11.331-11.333 29.709 0 41.040 11.334 11.334 29.709 11.334 41.043 0l612.732-612.731c11.334-11.333 11.334-29.709 0-41.043z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["notification-disabled"],"defaultCode":59794,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1067,"name":"notification-disabled","prevSize":32,"id":155,"code":59794},"setIdx":2,"setId":2,"iconIdx":155},{"icon":{"paths":["M712.051 512.675v54.89c-0.195 76.736-43.741 143.283-107.44 176.445-5.53-25.67-28.362-44.906-55.683-44.906h-72.502c-31.459 0-56.963 25.501-56.963 56.963v41.427c0 31.462 25.504 56.963 56.963 56.963h72.502c28.509 0 52.128-20.944 56.307-48.288 69.261-26.829 123.962-82.883 148.966-153.030 4.723 1.27 9.69 1.946 14.813 1.946h28.483c31.459 0 56.963-25.504 56.963-56.963v-85.446c0-31.459-25.504-56.963-56.963-56.963h-28.483v-28.483c0-141.572-114.765-256.338-256.336-256.338s-256.339 114.766-256.339 256.338v23.302h-28.483c-31.46 0-56.964 25.504-56.964 56.966v103.571c0 31.459 25.504 56.963 56.964 56.963h28.482c31.46 0 56.964-25.504 56.964-56.963v-36.253h0.149c-0.099-2.576-0.148-5.165-0.148-7.766v-139.821c0-110.111 89.263-199.374 199.375-199.374s199.373 89.263 199.373 199.374v85.446z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["omnichannel"],"defaultCode":59796,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1068,"name":"omnichannel","prevSize":32,"id":156,"code":59796},"setIdx":2,"setId":2,"iconIdx":156},{"icon":{"paths":["M705.578 633.158c9.507-9.235 24.701-9.018 33.939 0.486 9.238 9.507 9.021 24.701-0.486 33.939l-208.275 202.387c-9.312 9.050-24.138 9.050-33.45 0l-208.276-202.387c-9.506-9.238-9.724-24.432-0.487-33.939 9.237-9.504 24.432-9.722 33.937-0.486l191.549 186.134 191.549-186.134zM705.578 411.584c9.507 9.238 24.701 9.021 33.939-0.486s9.021-24.701-0.486-33.939l-208.275-202.385c-9.312-9.051-24.138-9.051-33.45 0l-208.276 202.385c-9.506 9.238-9.724 24.432-0.487 33.939 9.237 9.504 24.432 9.725 33.937 0.486l191.549-186.134 191.549 186.134z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["order"],"defaultCode":59797,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1069,"name":"order","prevSize":32,"id":157,"code":59797},"setIdx":2,"setId":2,"iconIdx":157},{"icon":{"paths":["M742.317 652.566c12.666-12.323 12.944-32.582 0.618-45.248-12.323-12.669-32.582-12.944-45.251-0.621l44.634 45.869zM512 832.019l-22.317 22.934c12.422 12.086 32.211 12.086 44.634 0l-22.317-22.934zM326.317 606.698c-12.667-12.323-32.927-12.048-45.252 0.621-12.324 12.666-12.047 32.925 0.619 45.248l44.632-45.869zM697.683 606.698l-208 202.387 44.634 45.869 208-202.387-44.634-45.869zM534.317 809.085l-208-202.387-44.632 45.869 207.999 202.387 44.634-45.869z","M742.317 371.456c12.666 12.323 12.944 32.582 0.618 45.251-12.323 12.666-32.582 12.944-45.251 0.618l44.634-45.869zM512 192.004l-22.317-22.935c12.422-12.087 32.211-12.087 44.634 0l-22.317 22.935zM326.317 417.325c-12.668 12.326-32.927 12.048-45.252-0.618-12.325-12.669-12.048-32.928 0.619-45.251l44.633 45.869zM697.683 417.325l-208-202.386 44.634-45.87 208 202.387-44.634 45.869zM534.317 214.939l-208 202.386-44.633-45.869 207.999-202.387 44.634 45.87z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(158, 162, 168)","opacity":0.7}],"isMulticolor":true,"isMulticolor2":true,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":7}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":7}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":9}]},"tags":["ordering-ascending"],"defaultCode":59798,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(158, 162, 168)","opacity":0.7}],"properties":{"order":1070,"name":"ordering-ascending","prevSize":32,"codes":[59798,59799],"id":158,"code":59798},"setIdx":2,"setId":2,"iconIdx":158},{"icon":{"paths":["M281.684 371.434c-12.667 12.323-12.944 32.582-0.619 45.248 12.324 12.669 32.584 12.944 45.252 0.621l-44.633-45.869zM512 191.981l22.317-22.935c-12.422-12.087-32.211-12.087-44.634 0l22.317 22.935zM697.683 417.302c12.669 12.323 32.928 12.048 45.251-0.621 12.326-12.666 12.048-32.925-0.618-45.248l-44.634 45.869zM326.317 417.302l208-202.387-44.634-45.869-207.999 202.387 44.633 45.869zM489.683 214.916l208 202.387 44.634-45.869-208-202.387-44.634 45.869z","M281.684 652.544c-12.667-12.323-12.944-32.582-0.619-45.251 12.324-12.666 32.584-12.944 45.252-0.618l-44.633 45.869zM512 831.997l22.317 22.934c-12.422 12.086-32.211 12.086-44.634 0l22.317-22.934zM697.683 606.675c12.669-12.326 32.928-12.048 45.251 0.618 12.326 12.669 12.048 32.928-0.618 45.251l-44.634-45.869zM326.317 606.675l208 202.384-44.634 45.872-207.999-202.387 44.633-45.869zM489.683 809.059l208-202.384 44.634 45.869-208 202.387-44.634-45.872z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(158, 162, 168)","opacity":0.7}],"isMulticolor":true,"isMulticolor2":true,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":7}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":7}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":9}]},"tags":["ordering-descending"],"defaultCode":59800,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(158, 162, 168)","opacity":0.7}],"properties":{"order":1071,"name":"ordering-descending","prevSize":32,"codes":[59800,59801],"id":159,"code":59800},"setIdx":2,"setId":2,"iconIdx":159},{"icon":{"paths":["M864 512c0-194.404-157.597-352-352-352-194.405 0-352.001 157.596-352.001 352s157.596 352 352.001 352c194.403 0 352-157.597 352-352zM928 512c0 229.75-186.25 416-416 416-229.752 0-416.001-186.25-416.001-416s186.25-416 416.001-416c229.75 0 416 186.25 416 416zM399.997 383.994v256c0 17.674 14.326 32 32 32s32-14.326 32-32v-256c0-17.67-14.326-32-32-32s-32 14.33-32 32zM559.997 383.994v256c0 17.674 14.326 32 32 32s32-14.326 32-32v-256c0-17.67-14.326-32-32-32s-32 14.33-32 32z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["pause"],"defaultCode":59803,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1072,"name":"pause","prevSize":32,"id":160,"code":59803},"setIdx":2,"setId":2,"iconIdx":160},{"icon":{"paths":["M512 928c229.75 0 416-186.25 416-416s-186.25-416-416-416c-229.752 0-416.001 186.25-416.001 416s186.25 416 416.001 416zM399.997 383.994c0-17.67 14.326-32 32-32s32 14.33 32 32v256c0 17.674-14.326 32-32 32s-32-14.326-32-32v-256zM559.997 383.994c0-17.67 14.326-32 32-32s32 14.33 32 32v256c0 17.674-14.326 32-32 32s-32-14.326-32-32v-256z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["pause-filled"],"defaultCode":59802,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1073,"name":"pause-filled","prevSize":32,"id":161,"code":59802},"setIdx":2,"setId":2,"iconIdx":161},{"icon":{"paths":["M822.627 201.372c12.496 12.497 12.496 32.758 0 45.255l-576 576c-12.497 12.496-32.758 12.496-45.255 0s-12.497-32.758 0-45.254l576-576c12.496-12.497 32.758-12.497 45.254 0z","M192 320c0-70.692 57.308-128 128-128 70.691 0 128 57.308 128 128 0 70.691-57.309 128-128 128-70.692 0-128-57.309-128-128zM320 256c-35.346 0-64 28.654-64 64s28.654 64 64 64c35.347 0 64-28.653 64-64s-28.653-64-64-64z","M704 576c-70.691 0-128 57.309-128 128s57.309 128 128 128c70.691 0 128-57.309 128-128s-57.309-128-128-128zM640 704c0-35.347 28.653-64 64-64s64 28.653 64 64c0 35.347-28.653 64-64 64s-64-28.653-64-64z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["percentage"],"defaultCode":59777,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1074,"id":162,"name":"percentage","prevSize":32,"code":59777},"setIdx":2,"setId":2,"iconIdx":162},{"icon":{"paths":["M410.502 204.616c-10.419-21.362-34.202-37.856-62.189-33.137-38.104 6.425-88.825 25.194-126.247 57.060-18.972 16.155-35.817 36.795-44.757 62.246-9.15 26.048-9.211 54.919 2.087 85.195 21.202 56.816 60.513 117.456 97.761 167.264 37.482 50.122 74.609 91.552 93.329 110.269l44.173-44.173c-16.406-16.403-51.6-55.536-87.472-103.51-36.11-48.285-71.192-103.264-89.264-151.69-6.437-17.248-5.748-31.056-1.675-42.651 4.283-12.192 13.134-24.16 26.319-35.388 25.849-22.012 63.292-36.814 92.623-42.392l59.075 121.097c0.019 0.074 0.045 0.285-0.013 0.688-0.112 0.749-0.502 1.827-1.344 2.883-7.117 8.95-14.899 20-20.941 31.741-5.674 11.024-11.715 26.246-10.976 42.47 0.643 14.138 7.76 27.773 13.222 36.973 6.275 10.576 14.416 21.741 22.79 32.291 16.806 21.171 36.541 42.326 49.68 55.466l44.173-44.173c-11.952-11.952-29.981-31.309-44.928-50.134-7.504-9.453-13.738-18.157-17.997-25.334-2.87-4.838-3.984-7.578-4.387-8.57l-0.038-0.093c0.266-1.382 1.139-4.736 4.006-10.31 3.552-6.902 8.717-14.438 14.291-21.443 14.611-18.374 20.518-45.424 8.611-69.837l-59.914-122.808zM819.386 613.504c21.36 10.419 37.856 34.202 33.136 62.189-6.426 38.106-25.194 88.826-57.059 126.246-16.157 18.973-36.797 35.818-62.246 44.758-26.048 9.149-54.922 9.21-85.197-2.086-56.813-21.203-117.453-60.515-167.261-97.763-50.122-37.482-91.555-74.608-110.272-93.328l44.173-44.173c16.403 16.406 55.539 51.6 103.51 87.472 48.285 36.109 103.267 71.194 151.69 89.264 17.248 6.435 31.056 5.747 42.653 1.674 12.192-4.282 24.16-13.133 35.386-26.317 22.013-25.85 36.816-63.293 42.394-92.624l-121.094-59.075c-0.077-0.019-0.288-0.048-0.688 0.013-0.752 0.112-1.83 0.502-2.886 1.344-8.95 7.117-20 14.899-31.741 20.941-11.024 5.674-26.246 11.715-42.47 10.976-14.134-0.643-27.773-7.76-36.973-13.222-10.576-6.275-21.741-14.416-32.288-22.79-21.174-16.806-42.33-36.541-55.469-49.68l44.173-44.173c11.952 11.952 31.309 29.981 50.134 44.928 9.453 7.504 18.16 13.738 25.334 17.997 4.838 2.87 7.578 3.984 8.57 4.387l0.093 0.038c1.382-0.266 4.739-1.139 10.314-4.006 6.899-3.552 14.435-8.717 21.44-14.291 18.374-14.611 45.427-20.518 69.837-8.611l122.81 59.914z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["phone"],"defaultCode":59806,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1075,"name":"phone","prevSize":32,"id":163,"code":59806},"setIdx":2,"setId":2,"iconIdx":163},{"icon":{"paths":["M825.373 153.372c12.496-12.497 32.758-12.497 45.254 0s12.496 32.758 0 45.255l-672 672c-12.497 12.496-32.758 12.496-45.255 0s-12.497-32.758 0-45.254l672-672zM575.613 569.069l-44.707 44.707c7.846 5.904 15.846 11.453 23.533 16.016 9.2 5.459 22.838 12.579 36.973 13.222 16.224 0.736 31.446-5.302 42.47-10.976 11.741-6.042 22.79-13.824 31.744-20.944 1.053-0.838 2.134-1.232 2.883-1.341 0.403-0.061 0.611-0.032 0.688-0.013l121.094 59.075c-5.578 29.331-20.381 66.771-42.39 92.621-11.229 13.187-23.197 22.038-35.389 26.32-11.597 4.074-25.402 4.762-42.653-1.677-48.422-18.070-103.405-53.152-151.69-89.261-14.026-10.49-27.299-20.922-39.469-30.842l-44.387 44.39c14.186 11.683 29.84 24.061 46.445 36.48 49.808 37.248 110.448 76.56 167.261 97.76 30.275 11.299 59.149 11.238 85.197 2.086 25.45-8.938 46.090-25.786 62.246-44.755 31.866-37.424 50.634-88.144 57.059-126.246 4.72-27.987-11.776-51.77-33.136-62.192l-122.81-59.91c-24.41-11.907-51.462-6-69.834 8.611-7.008 5.571-14.544 10.739-21.443 14.291-5.574 2.867-8.931 3.741-10.314 4.003l-0.093-0.038c-0.992-0.4-3.731-1.514-8.57-4.387-3.277-1.942-6.87-4.301-10.71-7.002zM313.636 589.683l44.389-44.387c-9.92-12.17-20.349-25.44-30.838-39.466-36.109-48.285-71.192-103.267-89.263-151.69-6.437-17.251-5.748-31.056-1.675-42.652 4.283-12.192 13.134-24.16 26.319-35.388 25.849-22.012 63.291-36.814 92.622-42.392l59.075 121.095c0.019 0.077 0.048 0.285-0.013 0.688-0.109 0.752-0.502 1.83-1.341 2.883-7.12 8.954-14.902 20.003-20.944 31.744-5.674 11.024-11.715 26.246-10.976 42.47 0.643 14.134 7.763 27.773 13.222 36.973 4.563 7.686 10.109 15.683 16.013 23.53l44.707-44.707c-2.701-3.837-5.056-7.434-7.002-10.707-2.87-4.838-3.984-7.578-4.387-8.57l-0.038-0.093c0.266-1.382 1.139-4.739 4.006-10.314 3.552-6.899 8.72-14.435 14.291-21.443 14.611-18.371 20.518-45.424 8.611-69.834l-59.91-122.809c-10.422-21.362-34.205-37.856-62.192-33.137-38.103 6.425-88.824 25.194-126.246 57.060-18.972 16.155-35.817 36.795-44.757 62.246-9.15 26.048-9.211 54.921 2.087 85.196 21.202 56.813 60.513 117.453 97.761 167.261 12.417 16.605 24.795 32.256 36.478 46.442z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["phone-disabled"],"defaultCode":59804,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1076,"name":"phone-disabled","prevSize":32,"id":164,"code":59804},"setIdx":2,"setId":2,"iconIdx":164},{"icon":{"paths":["M717.254 352l137.37-137.372c12.499-12.497 12.499-32.758 0-45.255-12.496-12.497-32.755-12.497-45.254 0l-137.373 137.373v-82.745c0-17.673-14.326-32-32-32-17.67 0-32 14.327-32 32v160c0 4.339 0.864 8.477 2.429 12.25 1.526 3.686 3.773 7.149 6.736 10.166 0.138 0.141 0.278 0.282 0.419 0.419 3.018 2.966 6.48 5.21 10.17 6.736 3.773 1.565 7.91 2.429 12.246 2.429h160c17.674 0 32-14.326 32-32s-14.326-32-32-32h-82.742z","M819.478 613.379l-122.88-59.84c-11.261-5.29-23.786-7.283-36.128-5.757-12.346 1.53-24.003 6.522-33.632 14.397-6.816 5.274-13.978 10.086-21.44 14.4-3.382 1.632-6.922 2.918-10.56 3.84-3.008-1.235-5.901-2.736-8.64-4.48-8.752-5.504-17.19-11.488-25.28-17.92-18.88-15.040-38.080-32-50.24-44.8s-29.76-32-44.8-50.24c-6.435-8.093-12.416-16.531-17.92-25.28-1.747-2.742-3.248-5.635-4.48-8.64 0.918-3.642 2.205-7.181 3.84-10.56 4.314-7.462 9.123-14.627 14.4-21.44 7.875-9.629 12.864-21.29 14.394-33.635 1.53-12.342-0.467-24.867-5.754-36.125l-59.84-122.881c-5.635-11.286-14.73-20.477-25.952-26.234-11.226-5.756-23.997-7.776-36.448-5.766-46.072 7.753-89.44 27.015-126.081 56-20.379 16.952-35.847 39.050-44.8 64-9.479 27.726-8.684 57.931 2.24 85.121 25.032 59.536 57.851 115.491 97.6 166.4 28.686 38.71 59.902 75.485 93.441 110.080 34.406 33.296 70.966 64.298 109.44 92.8 51.203 39.821 107.485 72.643 167.36 97.6 27.158 11.066 57.418 11.862 85.12 2.24 24.368-9.203 45.888-24.653 62.4-44.8 29.328-36.544 48.925-79.92 56.96-126.080 1.984-12.49-0.083-25.286-5.901-36.515-5.814-11.229-15.075-20.301-26.419-25.885zM747.798 761.219c-9.187 11.802-21.331 20.963-35.2 26.56-14.051 4.416-29.197 3.85-42.88-1.6-54.202-23.091-105.187-53.101-151.68-89.28-35.83-27.52-69.923-57.232-102.080-88.96-31.334-32.611-60.618-67.13-87.68-103.36-36.201-46.426-66.113-97.427-88.961-151.68-5.832-13.587-6.514-28.829-1.92-42.881 5.595-13.87 14.757-26.014 26.56-35.2 26.691-20.806 57.953-34.956 91.201-41.28l60.8 121.281c0.154 0.954 0.154 1.926 0 2.88-7.933 9.981-14.899 20.698-20.8 32-7.347 12.966-11.101 27.658-10.88 42.56 1.354 13.142 5.853 25.763 13.12 36.8 6.934 11.104 14.522 21.789 22.72 32 16.96 21.12 36.48 42.56 49.6 55.68s34.56 32 55.68 49.6c10.208 8.198 20.893 15.782 32 22.72 11.034 7.264 23.658 11.763 36.8 13.12 14.899 0.218 29.59-3.536 42.56-10.88 11.302-5.904 22.016-12.867 32-20.8 0.851-0.707 1.827-1.251 2.88-1.6l118.72 59.84c-6.509 33.811-21.11 65.542-42.56 92.48z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{},{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{},{}]},"tags":["phone-in"],"grid":0},"attrs":[{},{}],"properties":{"order":1078,"id":166,"name":"phone-in","prevSize":32,"code":59809},"setIdx":2,"setId":2,"iconIdx":165},{"icon":{"paths":["M428.346 199.399c17.542-17.543 45.984-17.543 63.53 0 17.542 17.543 17.542 45.986 0 63.53l-43.661 43.659 177.83 177.828 60.339-60.339c24.992-24.995 65.517-24.995 90.509 0l45.254 45.254-331.869 331.869-45.254-45.254c-24.992-24.995-24.992-65.517 0-90.509l60.339-60.339-177.827-177.83-43.661 43.661c-17.543 17.542-45.987 17.542-63.53 0s-17.543-45.987 0-63.53l208.001-207.999zM175.090 362.144c-42.537 42.538-42.537 111.501 0 154.038 42.001 42.003 109.771 42.531 152.42 1.587l87.334 87.334-15.075 15.075c-49.987 49.987-49.987 131.034 0 181.021l67.882 67.882c12.496 12.496 32.758 12.496 45.254 0l167.936-167.933 88.013 92.003c12.218 12.771 32.474 13.219 45.245 1.002 12.771-12.214 13.219-32.47 1.002-45.242l-88.995-93.030 163.923-163.923c12.499-12.496 12.499-32.758 0-45.254l-67.882-67.882c-49.987-49.987-131.030-49.987-181.018 0l-15.907 15.907-87.325-87.323c41.766-42.596 41.51-110.983-0.768-153.262-42.538-42.537-111.504-42.537-154.042 0l-207.998 208z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["pin"],"defaultCode":59808,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1080,"name":"pin","prevSize":32,"id":168,"code":59808},"setIdx":2,"setId":2,"iconIdx":166},{"icon":{"paths":["M512.608 128.019c-72.378-1.376-144.906 25.78-199.307 80.524-54.654 54.999-89.301 136.056-89.301 239.464 0 80.234 44.5 174.87 97.546 252.806 53.066 77.965 120.829 148.157 176.141 175.821l15.194 7.6 14.81-8.326c217.158-122.154 272.31-333.882 272.31-427.898 0-101.731-27.923-181.776-80.179-236.932-52.346-55.248-125.296-81.503-207.213-83.060zM288 448.006c0-88.589 29.353-152.745 70.698-194.351 41.6-41.862 97.072-62.705 152.694-61.648 68.992 1.311 124.038 23.054 161.968 63.088 38.019 40.126 62.64 102.649 62.64 192.914 0 74.55-44.691 253.677-224.176 363.030-39.683-25.61-92.186-79.853-137.37-146.237-50.954-74.864-86.454-156.221-86.454-216.797zM544 416c0-17.674-14.326-32-32-32s-32 14.326-32 32c0 17.674 14.326 32 32 32s32-14.326 32-32zM608 416c0 53.021-42.979 96-96 96s-96-42.979-96-96c0-53.021 42.979-96 96-96s96 42.979 96 96z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["pin-map"],"defaultCode":59807,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1081,"name":"pin-map","prevSize":32,"id":169,"code":59807},"setIdx":2,"setId":2,"iconIdx":167},{"icon":{"paths":["M864 512c0-194.404-157.597-352-352-352s-352 157.596-352 352c0 194.403 157.596 352 352 352s352-157.597 352-352zM928 512c0 229.75-186.25 416-416 416s-416-186.25-416-416c0-229.75 186.25-416 416-416s416 186.25 416 416zM451.85 357.187l195.254 136.768c14.208 9.949 18.496 30.87 9.581 46.726-2.432 4.326-5.706 7.981-9.581 10.694l-195.254 136.768c-14.208 9.952-32.954 5.165-41.869-10.694-3.037-5.398-4.646-11.642-4.646-18.016v-273.536c0-18.723 13.597-33.898 30.371-33.898 5.709 0 11.306 1.798 16.144 5.187z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["play"],"defaultCode":59811,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1082,"name":"play","prevSize":32,"id":170,"code":59811},"setIdx":2,"setId":2,"iconIdx":168},{"icon":{"paths":["M512 928.003c229.75 0 416-186.25 416-416s-186.25-415.999-416-415.999c-229.75 0-416 186.25-416 415.999s186.25 416 416 416zM451.846 357.19l195.258 136.768c14.205 9.952 18.496 30.874 9.578 46.73-2.429 4.323-5.706 7.978-9.578 10.691l-195.258 136.768c-14.205 9.952-32.95 5.165-41.866-10.691-3.037-5.398-4.646-11.645-4.646-18.019v-273.536c0-18.72 13.597-33.894 30.368-33.894 5.712 0 11.309 1.795 16.144 5.184z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["play-filled"],"defaultCode":59810,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1083,"name":"play-filled","prevSize":32,"id":171,"code":59810},"setIdx":2,"setId":2,"iconIdx":169},{"icon":{"paths":["M325.686 430.88l224.49 224.49-126.118 126.118-224.491-224.49 126.12-126.118zM370.941 385.626l192.115-192.117 224.49 224.491-192.115 192.115-224.49-224.49zM585.683 125.627c-12.496-12.497-32.758-12.497-45.254 0l-408.745 408.745c-12.497 12.496-12.497 32.758 0 45.254l269.746 269.747c5.229 5.229 11.818 8.269 18.63 9.123v0.067h0.57c2.278 0.243 4.576 0.243 6.851 0h440.579c17.674 0 32-14.33 32-32 0-17.674-14.326-32.003-32-32.003h-366.566l353.936-353.933c12.496-12.496 12.496-32.758 0-45.254l-269.747-269.746z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["prune"],"defaultCode":59817,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1084,"name":"prune","prevSize":32,"id":172,"code":59817},"setIdx":2,"setId":2,"iconIdx":170},{"icon":{"paths":["M230.486 636.688c-14.92-9.472-34.694-5.056-44.167 9.862-9.473 14.922-5.057 34.694 9.862 44.166l298.666 189.632c10.47 6.646 23.837 6.646 34.304 0l298.669-189.632c14.918-9.472 19.334-29.245 9.862-44.166-9.475-14.918-29.248-19.334-44.166-9.862l-281.517 178.739-281.514-178.739zM186.319 494.848c9.473-14.922 29.247-19.334 44.167-9.862l281.514 178.739 281.517-178.739c14.918-9.472 34.691-5.059 44.166 9.862 9.472 14.918 5.056 34.694-9.862 44.166l-298.669 189.632c-10.467 6.646-23.834 6.646-34.304 0l-298.666-189.632c-14.92-9.472-19.335-29.248-9.862-44.166zM529.152 143.657l298.669 189.629c9.245 5.872 14.848 16.064 14.848 27.014 0 10.954-5.603 21.146-14.848 27.014l-298.669 189.632c-10.467 6.646-23.834 6.646-34.304 0l-298.666-189.632c-9.246-5.869-14.848-16.061-14.848-27.014 0-10.95 5.602-21.142 14.848-27.014l298.666-189.629c10.47-6.647 23.837-6.647 34.304 0zM273.035 360.301l238.965 151.725 238.966-151.725-238.966-151.724-238.965 151.724z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["queue"],"defaultCode":59818,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1085,"name":"queue","prevSize":32,"id":173,"code":59818},"setIdx":2,"setId":2,"iconIdx":171},{"icon":{"paths":["M161.352 800c-11.706 0-22.477-6.39-28.087-16.666s-5.161-22.79 1.169-32.64l112.304-174.694h-69.387c-17.673 0-32-14.326-32-32v-288c0-17.673 14.327-32 32-32h255.999c17.674 0 32 14.327 32 32v288c0 6.138-1.763 12.144-5.082 17.306l-143.999 224c-5.888 9.158-16.029 14.694-26.918 14.694h-128zM332.269 561.306l-112.304 174.694h51.916l129.469-201.398v-246.602h-191.999v224h96c11.706 0 22.479 6.39 28.085 16.666 5.61 10.275 5.162 22.79-1.168 32.64zM577.35 800c-11.706 0-22.477-6.39-28.086-16.666s-5.162-22.79 1.171-32.64l112.304-174.694h-69.389c-17.67 0-32-14.326-32-32v-288c0-17.673 14.33-32 32-32h256c17.674 0 32 14.327 32 32v288c0 6.138-1.763 12.144-5.082 17.306l-144 224c-5.888 9.158-16.029 14.694-26.918 14.694h-128zM748.269 561.306l-112.304 174.694h51.917l129.469-201.398v-246.602h-192v224h96c11.706 0 22.48 6.39 28.086 16.666 5.61 10.275 5.162 22.79-1.168 32.64z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["quote"],"defaultCode":59819,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1086,"name":"quote","prevSize":32,"id":174,"code":59819},"setIdx":2,"setId":2,"iconIdx":172},{"icon":{"paths":["M800 560c0 176.73-143.27 320-320 320-176.731 0-320-143.27-320-320s143.269-320 320-320v-64c-212.077 0-384 171.923-384 384s171.923 384 384 384c212.077 0 384-171.923 384-384 0-10.778-0.445-21.45-1.315-32h-64.266c1.046 10.525 1.581 21.2 1.581 32zM800 128c0-17.673-14.326-32-32-32s-32 14.327-32 32v112h-112c-17.674 0-32 14.327-32 32s14.326 32 32 32h112v112c0 17.674 14.326 32 32 32s32-14.326 32-32v-112h112c17.674 0 32-14.327 32-32s-14.326-32-32-32h-112v-112zM384 528c35.347 0 64-28.653 64-64s-28.653-64-64-64c-35.347 0-64 28.653-64 64s28.653 64 64 64zM640 464c0 35.347-28.653 64-64 64s-64-28.653-64-64c0-35.347 28.653-64 64-64s64 28.653 64 64zM329.805 605.075c-10.451-14.25-30.477-17.331-44.728-6.88s-17.333 30.477-6.882 44.73c37.658 51.35 77.754 84.624 119.178 102.662 41.741 18.179 82.797 19.99 120.362 11.651 73.469-16.307 132.211-70.87 164.070-114.314 10.451-14.253 7.37-34.278-6.88-44.73-14.253-10.451-34.278-7.37-44.73 6.88-26.81 36.557-73.664 77.994-126.33 89.686-25.501 5.661-52.643 4.474-80.938-7.85-28.608-12.461-60.381-37.187-93.123-81.837z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["reaction-add"],"defaultCode":59820,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1087,"name":"reaction-add","prevSize":32,"id":175,"code":59820},"setIdx":2,"setId":2,"iconIdx":173},{"icon":{"paths":["M832 512c0-176.73-143.27-320-320-320s-320 143.27-320 320c0 176.73 143.27 320 320 320s320-143.27 320-320zM896 512c0 212.077-171.923 384-384 384s-384-171.923-384-384c0-212.077 171.923-384 384-384s384 171.923 384 384zM512 704c-106.038 0-192-85.962-192-192s85.962-192 192-192c106.038 0 192 85.962 192 192s-85.962 192-192 192z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["record"],"defaultCode":59821,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1088,"name":"record","prevSize":32,"id":176,"code":59821},"setIdx":2,"setId":2,"iconIdx":174},{"icon":{"paths":["M896 512h-63.984c0-175.414-145.754-320-328.518-320-115.27 0-215.818 57.513-274.362 144h110.768c17.674 0 32 14.326 32 32s-14.326 32-32 32h-179.904c-17.673 0-32-14.326-32-32v-192c0-17.673 14.327-32 32-32s32 14.327 32 32v102.32c71.751-91.401 184.589-150.32 311.498-150.32 216.781 0 392.502 171.923 392.502 384 0 1.114 0.010 2.227 0 3.338v-3.338z","M127.997 512h63.986c0 175.414 145.751 320 328.519 320 115.27 0 215.818-57.514 274.358-144h-110.768c-17.67 0-32-14.326-32-32s14.33-32 32-32h179.907c17.67 0 32 14.326 32 32v192c0 17.674-14.33 32-32 32-17.674 0-32-14.326-32-32v-102.32c-71.754 91.402-184.592 150.32-311.498 150.32-216.782 0-392.505-171.923-392.505-384 0-1.082-0.009-2.166 0-3.245v3.245z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["refresh"],"defaultCode":59822,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1089,"name":"refresh","prevSize":32,"id":177,"code":59822},"setIdx":2,"setId":2,"iconIdx":175},{"icon":{"paths":["M565.802 233.862l-97.261 97.261h-187.521l-0.456 0.003c-14.696 0.208-28.717 6.186-39.042 16.637l-97.095 96.797-0.048 0.048c-7.165 7.174-12.248 16.157-14.707 25.994-2.459 9.834-2.202 20.154 0.745 29.856 2.946 9.699 8.471 18.419 15.984 25.226 7.506 6.8 16.746 11.443 26.678 13.424l125.65 25.19c5.103 1.024 10.166 0.771 14.859-0.538l162.866 162.867c1.987 1.987 4.17 3.654 6.483 5.011l22.88 114.128c1.981 9.936 6.618 19.146 13.418 26.653 6.81 7.514 15.526 13.037 25.229 15.984s20.019 3.203 29.856 0.746c9.837-2.461 18.819-7.542 25.994-14.707l96.842-97.146c10.451-10.323 16.432-24.346 16.64-39.040l0.003-0.454v-193.802c0-2.893-0.384-5.693-1.104-8.358l77.443-77.44c110.522-110.525 110.474-223.191 103.152-273.759-1.862-13.592-8.122-26.204-17.824-35.908s-22.317-15.962-35.907-17.823c-50.57-7.321-163.235-7.371-273.757 103.151zM611.056 279.117c92.138-92.138 182.144-90.373 218.947-85.121 5.254 36.804 7.018 126.811-85.12 218.948l-245.798 245.802-133.83-133.827 245.802-245.802zM404.541 395.123l-104.222 104.221-100.071-20.064 84.42-84.157h119.873zM542.89 705.446l106.909-106.906v135.61l-84.16 84.422-22.266-111.062c-0.138-0.698-0.301-1.386-0.483-2.064z","M286.325 699.699c15.297-8.851 20.524-28.426 11.674-43.725-8.85-15.296-28.426-20.522-43.723-11.674-49.486 28.63-72.438 77.786-83.25 115.523-5.52 19.267-8.252 36.813-9.619 49.539-0.687 6.397-1.037 11.661-1.217 15.424-0.090 1.885-0.137 3.402-0.162 4.499l-0.023 1.334-0.004 0.422-0.001 0.15v0.083c0 8.486 3.372 16.65 9.372 22.65 6.001 6.003 14.14 9.373 22.628 9.373v-32c0 32 0.037 32 0.048 32h0.208l0.424-0.003 1.333-0.022c1.099-0.026 2.614-0.074 4.498-0.163 3.764-0.179 9.029-0.528 15.425-1.216 12.727-1.366 30.272-4.099 49.54-9.619 37.739-10.813 86.892-33.763 115.523-83.251 8.851-15.296 3.622-34.87-11.674-43.722s-34.874-3.626-43.725 11.674c-16.669 28.813-47.164 45.011-77.751 53.776-6.095 1.744-12.005 3.139-17.55 4.25 1.111-5.546 2.505-11.456 4.251-17.549 8.763-30.589 24.961-61.085 53.775-77.754zM192 831.299l-32-0.022c0 0.013 0 0.022 32 0.022z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["rocket"],"defaultCode":59816,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1090,"id":178,"name":"rocket","prevSize":32,"code":59816},"setIdx":2,"setId":2,"iconIdx":176},{"icon":{"paths":["M713.718 450.362c0-142.689-115.824-258.362-258.701-258.362-142.878 0-258.704 115.673-258.704 258.362 0 142.691 115.826 258.365 258.704 258.365 142.877 0 258.701-115.674 258.701-258.365zM659.302 699.965c-55.645 45.475-126.774 72.762-204.285 72.762-178.271 0-322.788-144.326-322.788-322.365 0-178.035 144.517-322.362 322.788-322.362 178.269 0 322.787 144.327 322.787 322.362 0 77.408-27.318 148.442-72.854 204.013l186.838 186.592c12.608 12.589 12.608 33.002 0 45.59-12.605 12.589-33.043 12.589-45.648 0l-186.838-186.592z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["search"],"defaultCode":59823,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1091,"name":"search","prevSize":32,"id":179,"code":59823},"setIdx":2,"setId":2,"iconIdx":177},{"icon":{"paths":["M878.022 192.974c7.85 9.521 9.526 22.708 4.31 33.891l-298.669 640.002c-5.69 12.195-18.403 19.526-31.811 18.342-13.405-1.184-24.637-10.627-28.106-23.632l-81.619-306.070-285.772-142.886c-11.978-5.987-18.959-18.8-17.498-32.112s11.056-24.307 24.048-27.552l682.665-170.668c11.974-2.993 24.598 1.165 32.451 10.686zM505.821 545.968l57.082 214.051 233.027-499.35-533.58 133.395 203.606 101.802 69.51-52.131c14.141-10.605 34.198-7.741 44.8 6.4 10.605 14.138 7.741 34.195-6.4 44.8l-68.045 51.034z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["send"],"defaultCode":59825,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1092,"name":"send","prevSize":32,"id":180,"code":59825},"setIdx":2,"setId":2,"iconIdx":178},{"icon":{"paths":["M891.494 238.96l-297.475 637.446c-16.854 36.115-69.622 31.459-79.891-7.050l-66-247.498 151.248-189.059-219.994 109.997-226.833-113.418c-35.43-17.715-29.696-69.949 8.733-79.555l681.197-170.3c34.842-8.71 64.202 26.892 49.014 59.436z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["send-filled"],"defaultCode":59824,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1093,"name":"send-filled","prevSize":32,"id":181,"code":59824},"setIdx":2,"setId":2,"iconIdx":179},{"icon":{"paths":["M421.334 256c0-44.183-35.818-80-80-80s-80 35.817-80 80c0 44.183 35.817 80 80 80s80-35.817 80-80zM465.302 288c-14.211 55.206-64.326 96-123.968 96-59.643 0-109.758-40.794-123.968-96h-89.367c-17.673 0-32-14.327-32-32s14.327-32 32-32h89.367c14.209-55.207 64.324-96 123.968-96 59.642 0 109.757 40.793 123.968 96h430.698c17.674 0 32 14.327 32 32s-14.326 32-32 32h-430.698zM96 768c0-17.674 14.327-32 32-32h89.367c14.209-55.206 64.324-96 123.968-96 60.781 0 111.67 42.365 124.742 99.181 4.208-2.038 8.934-3.181 13.923-3.181h416c17.674 0 32 14.326 32 32s-14.326 32-32 32h-416c-4.989 0-9.715-1.142-13.923-3.181-13.072 56.816-63.962 99.181-124.742 99.181-59.643 0-109.758-40.794-123.968-96h-89.367c-17.673 0-32-14.326-32-32zM341.334 848c44.182 0 80-35.818 80-80s-35.818-80-80-80c-44.183 0-80 35.818-80 80s35.817 80 80 80zM796.029 543.757c-14.122 55.331-64.298 96.243-124.029 96.243s-109.904-40.912-124.029-96.243c-1.302 0.16-2.627 0.243-3.971 0.243h-416c-17.673 0-32-14.326-32-32s14.327-32 32-32h416c1.344 0 2.669 0.083 3.971 0.243 14.125-55.331 64.298-96.243 124.029-96.243s109.907 40.912 124.029 96.243c1.302-0.16 2.627-0.243 3.971-0.243h96c17.674 0 32 14.326 32 32s-14.326 32-32 32h-96c-1.344 0-2.669-0.083-3.971-0.243zM752 512c0-44.182-35.818-80-80-80s-80 35.818-80 80c0 44.182 35.818 80 80 80s80-35.818 80-80z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["settings"],"defaultCode":59826,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1094,"name":"settings","prevSize":32,"id":182,"code":59826},"setIdx":2,"setId":2,"iconIdx":180},{"icon":{"paths":["M690.176 301.708c11.645-11.977 11.645-31.396 0-43.374l-149.091-153.351c-11.645-11.977-30.525-11.977-42.17 0l-149.091 153.351c-11.645 11.977-11.645 31.397 0 43.374s30.525 11.978 42.17 0l98.189-100.993v401.343c0 16.938 13.35 30.669 29.818 30.669s29.818-13.731 29.818-30.669v-401.343l98.189 100.993c11.645 11.978 30.525 11.978 42.17 0z","M221.818 379.274h149.091v59.635h-119.272v387.635h536.728v-387.635h-119.274v-59.635h149.091c16.467 0 29.818 13.35 29.818 29.818v447.274c0 16.467-13.35 29.818-29.818 29.818h-596.364c-16.468 0-29.818-13.35-29.818-29.818v-447.274c0-16.467 13.35-29.818 29.818-29.818z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["share"],"defaultCode":59827,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1095,"name":"share","prevSize":32,"id":183,"code":59827},"setIdx":2,"setId":2,"iconIdx":181},{"icon":{"paths":["M502.627 142.69c12.915-3.408 26.509-3.289 39.363 0.345l245.194 69.317c29.165 8.245 51.254 33.818 53.504 65.14 24.506 341.145-184.394 520.422-272.611 580.214-33.053 22.403-75.28 22.474-108.416 0.259-88.758-59.504-300.1-238.589-276.51-579.794 2.205-31.89 24.96-57.772 54.753-65.633l264.724-69.849zM524.579 204.621c-1.837-0.519-3.779-0.536-5.622-0.049l-264.725 69.849c-4.4 1.161-6.999 4.775-7.233 8.165-21.305 308.166 168.214 468.531 248.301 522.218 11.507 7.715 25.434 7.677 36.87-0.077 79.379-53.798 266.835-214.288 244.685-522.649-0.243-3.358-2.787-6.925-7.082-8.139l-245.194-69.317z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["set-as-moderator"],"defaultCode":59661,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1096,"name":"shield","prevSize":32,"id":184,"code":59661},"setIdx":2,"setId":2,"iconIdx":182},{"icon":{"paths":["M513.302 142.705c12.915-3.408 26.509-3.289 39.36 0.345l245.197 69.318c29.165 8.245 51.254 33.818 53.504 65.14 24.506 341.142-184.397 520.422-272.611 580.214-33.053 22.403-75.28 22.47-108.416 0.259-88.762-59.504-300.101-238.589-276.511-579.794 2.205-31.89 24.96-57.772 54.753-65.633l264.725-69.849zM535.251 204.637c-1.834-0.519-3.776-0.536-5.622-0.050l-264.723 69.849c-4.4 1.161-6.999 4.775-7.234 8.164-21.305 308.164 168.216 468.532 248.299 522.218 11.507 7.715 25.434 7.677 36.874-0.077 79.379-53.798 266.832-214.288 244.682-522.65-0.24-3.358-2.784-6.925-7.078-8.139l-245.197-69.317z","M490.672 337.334c-19.76 4.672-47.245 12.31-81.149 24.554 20.81 108.771 53.219 187.014 81.149 238.832v-263.386zM492.867 271.316c33.77-6.898 61.805 19.742 61.805 51.125v360.963c0 17.024-10.333 31.747-25.642 37.52-15.67 5.91-33.779 1.331-44.861-12.675-32.656-41.267-106.323-152.95-141.19-354.563-3.242-18.746 7.066-37.695 25.328-44.726 56.186-21.63 99.094-32.442 124.56-37.644z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["shield"],"defaultCode":59829,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1097,"name":"shield-alt","prevSize":32,"id":185,"code":59829},"setIdx":2,"setId":2,"iconIdx":183},{"icon":{"paths":["M664.083 405.072c11.638-13.299 10.288-33.517-3.011-45.155s-33.517-10.288-45.155 3.011l-125.251 143.142-39.917-45.619c-11.638-13.299-31.853-14.646-45.155-3.011-13.299 11.638-14.646 31.856-3.008 45.155l64 73.142c6.077 6.944 14.854 10.928 24.080 10.928 9.229 0 18.006-3.984 24.083-10.928l149.334-170.666z","M541.99 143.050c-12.854-3.634-26.448-3.753-39.363-0.345l-264.724 69.849c-29.793 7.861-52.548 33.743-54.753 65.633-23.589 341.205 187.752 520.29 276.51 579.794 33.136 22.211 75.363 22.144 108.416-0.259 88.218-59.792 297.117-239.072 272.611-580.214-2.25-31.321-24.339-56.895-53.504-65.14l-245.194-69.318zM518.957 204.587c1.843-0.487 3.786-0.47 5.622 0.049l245.194 69.318c4.294 1.214 6.838 4.781 7.082 8.139 22.15 308.362-165.306 468.851-244.685 522.65-11.437 7.754-25.363 7.792-36.87 0.077-80.086-53.686-269.606-214.054-248.301-522.218 0.234-3.389 2.833-7.004 7.233-8.164l264.725-69.849z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2}]},"tags":["shield-check"],"defaultCode":59828,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1098,"name":"shield-check","prevSize":32,"id":186,"code":59828},"setIdx":2,"setId":2,"iconIdx":184},{"icon":{"paths":["M778.64 213.336c-17.674 0-32 14.327-32 32v533.333c0 17.674 14.326 32 32 32s32-14.326 32-32v-533.333c0-17.673-14.326-32-32-32z","M600.87 341.334c-17.674 0-32 14.33-32 32v405.334c0 17.674 14.326 32 32 32s32-14.326 32-32v-405.334c0-17.67-14.326-32-32-32z","M423.104 810.669c-17.674 0-32-14.326-32-32v-277.334c0-17.67 14.326-32 32-32 17.67 0 32 14.33 32 32v277.334c0 17.674-14.33 32-32 32z","M245.333 597.334c-17.673 0-32 14.33-32 32v149.334c0 17.674 14.327 32 32 32s32-14.326 32-32v-149.334c0-17.67-14.327-32-32-32z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["signal"],"defaultCode":59830,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1099,"name":"signal","prevSize":32,"id":187,"code":59830},"setIdx":2,"setId":2,"iconIdx":185},{"icon":{"paths":["M772.986 470.432h-40.186c-1.104-12.381-10.090-19.757-26.454-19.757-16.278 0-24.416 6.867-24.502 16.365-0.339 10.342 9.667 15.6 25.437 18.992l14.922 3.389c34.253 7.546 52.989 24.502 53.158 52.227-0.17 32.982-25.773 52.566-69.014 52.566-43.661 0-71.894-19.414-72.403-60.026h40.186c0.934 16.701 13.142 25.35 31.709 25.35 16.874 0 26.794-7.376 26.963-17.974-0.17-9.75-8.733-14.922-27.811-19.331l-18.141-4.24c-30.016-6.867-48.496-21.706-48.413-48.070-0.253-32.304 28.317-53.923 67.997-53.923 40.355 0 66.214 21.958 66.554 54.432z","M354.858 470.432h40.186c-0.339-32.474-26.198-54.432-66.554-54.432-39.679 0-68.251 21.619-67.996 53.923-0.085 26.365 18.398 41.203 48.411 48.070l18.145 4.24c19.075 4.41 27.638 9.581 27.808 19.331-0.17 10.598-10.090 17.974-26.96 17.974-18.569 0-30.778-8.65-31.71-25.35h-40.187c0.509 40.611 28.741 60.026 72.403 60.026 43.242 0 68.845-19.584 69.014-52.566-0.17-27.725-18.906-44.682-53.158-52.227l-14.922-3.389c-15.77-3.392-25.774-8.65-25.435-18.992 0.085-9.498 8.224-16.365 24.501-16.365 16.365 0 25.35 7.376 26.454 19.757z","M418.614 418.374v173.635h40.864v-107.251h1.443l41.712 106.15h26.112l41.715-105.555h1.44v106.656h40.867v-173.635h-51.974l-44.086 107.504h-2.035l-44.086-107.504h-51.971z","M864 192c16.973 0 33.251 6.743 45.254 18.745s18.746 28.281 18.746 45.255v635.296c0 12.186-3.478 24.122-10.032 34.397-6.55 10.278-15.898 18.474-26.947 23.619-11.046 5.146-23.334 7.027-35.418 5.43-12.083-1.6-23.456-6.614-32.787-14.458l-128.81-108.285h-534.006c-16.974 0-33.252-6.742-45.255-18.746s-18.745-28.282-18.745-45.254v-512c0-16.974 6.743-33.252 18.745-45.255s28.281-18.745 45.255-18.745h704zM864 256h-704v512h534.006c15.066 0 29.648 5.315 41.181 15.011l128.813 108.285v-635.296z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["sms"],"defaultCode":59772,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1100,"name":"sms","prevSize":32,"id":188,"code":59772},"setIdx":2,"setId":2,"iconIdx":186},{"icon":{"paths":["M919.258 667.229c12.605-12.253 12.877-32.394 0.605-44.982-12.269-12.589-32.435-12.858-45.040-0.605l-106.112 103.155v-500.8c0-17.568-14.259-31.81-31.853-31.81-17.59 0-31.85 14.242-31.85 31.81v500.8l-106.115-103.155c-12.605-12.253-32.768-11.984-45.040 0.605-12.269 12.589-11.997 32.73 0.608 44.982l160.179 155.718c12.368 12.019 32.070 12.019 44.435 0l160.182-155.718zM560.659 333.667c17.59 0 31.85-14.243 31.85-31.811s-14.259-31.809-31.85-31.809h-432.49c-17.591 0-31.852 14.242-31.852 31.809s14.26 31.811 31.852 31.811h432.49zM464.55 536.099c17.59 0 31.85-14.243 31.85-31.811 0-17.565-14.259-31.808-31.85-31.808h-336.381c-17.591 0-31.852 14.24-31.852 31.808s14.26 31.811 31.852 31.811h336.381zM384.458 722.96c17.594 0 31.853-14.24 31.853-31.808s-14.259-31.811-31.853-31.811h-256.289c-17.591 0-31.852 14.243-31.852 31.811s14.26 31.808 31.852 31.808h256.289z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["sort"],"defaultCode":59832,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1101,"name":"sort","prevSize":32,"id":189,"code":59832},"setIdx":2,"setId":2,"iconIdx":187},{"icon":{"paths":["M289.362 192c13.364 0 25.321 8.305 29.987 20.829l96.001 257.699c6.17 16.56-2.256 34.986-18.816 41.155-16.563 6.17-34.989-2.253-41.158-18.816l-20.477-54.963h-91.074l-20.476 54.963c-6.17 16.563-24.597 24.986-41.158 18.816s-24.986-24.595-18.816-41.155l96-257.699c4.666-12.524 16.622-20.829 29.987-20.829zM311.058 373.904l-21.695-58.238-21.695 58.238h43.391z","M522.131 626.435c-12.154 12.829-11.606 33.082 1.222 45.238l160 151.587c12.342 11.693 31.674 11.693 44.016 0l160-151.587c12.832-12.157 13.376-32.41 1.222-45.238s-32.41-13.376-45.238-1.222l-105.99 100.419v-501.632c0-17.673-14.326-32-32-32s-32 14.327-32 32v501.632l-105.994-100.419c-12.829-12.154-33.082-11.606-45.238 1.222z","M193.362 570.947c-17.673 0-32 14.326-32 32 0 17.67 14.327 32 32 32h116.145l-139.065 142.73c-8.979 9.216-11.565 22.915-6.564 34.771 5.001 11.853 16.617 19.562 29.484 19.562h192.001c17.674 0 32-14.326 32-32s-14.326-32-32-32h-116.146l139.064-142.733c8.979-9.216 11.565-22.915 6.563-34.768-4.998-11.856-16.614-19.562-29.482-19.562h-192.001z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["sort-az"],"defaultCode":59831,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1102,"name":"sort-az","prevSize":32,"id":190,"code":59831},"setIdx":2,"setId":2,"iconIdx":188},{"icon":{"paths":["M472.618 173.508c18.166-58.554 100.454-60.461 121.322-2.812l69.821 192.91h195.44c57.872 0 86.026 70.611 43.994 110.336l-147.888 139.782 53.386 217.363c14.17 57.696-51.251 101.805-99.536 67.11l-177.741-127.709-177.741 127.709c-48.283 34.691-113.703-9.414-99.533-67.11l53.209-216.64-157.591-139.024c-44.179-38.973-16.577-111.818 42.37-111.818h221.513l58.976-190.098zM603.574 385.334l-69.824-192.91-58.976 190.098c-8.304 26.758-33.085 45.002-61.133 45.002h-221.513l157.59 139.021c17.837 15.731 25.456 40.048 19.789 63.13l-53.209 216.643 177.74-127.709c22.33-16.045 52.426-16.045 74.755 0l177.738 127.709-53.386-217.363c-5.478-22.317 1.456-45.856 18.166-61.648l147.888-139.782h-195.44c-26.957 0-51.024-16.87-60.186-42.189z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["star"],"defaultCode":59834,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1103,"name":"star","prevSize":32,"id":191,"code":59834},"setIdx":2,"setId":2,"iconIdx":189},{"icon":{"paths":["M593.939 170.244c-20.867-57.726-103.155-55.816-121.322 2.815l-58.976 190.348h-221.513c-58.947 0-86.549 72.944-42.37 111.968l157.591 139.206-53.209 216.928c-14.17 57.77 51.25 101.936 99.533 67.197l177.741-127.875 177.741 127.875c48.285 34.739 113.706-9.427 99.536-67.197l-53.386-217.651 147.888-139.968c42.032-39.779 13.878-110.483-43.99-110.483h-195.443l-69.821-193.164z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["star-filled"],"defaultCode":59833,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1104,"name":"star-filled","prevSize":32,"id":192,"code":59833},"setIdx":2,"setId":2,"iconIdx":190},{"icon":{"paths":["M512 896c-212.077 0-384-171.923-384-384s171.923-384 384-384c212.077 0 384 171.923 384 384s-171.923 384-384 384zM565.334 288c0-29.455-23.878-53.333-53.334-53.333s-53.334 23.878-53.334 53.333v249.632l180.016 144.013c23.002 18.403 56.563 14.672 74.963-8.326 18.403-23.002 14.672-56.563-8.326-74.963l-139.984-111.987v-198.368z"],"attrs":[{"fill":"rgb(243, 190, 8)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":3}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":2}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":3}]},"tags":["status-away"],"defaultCode":59741,"grid":0},"attrs":[{"fill":"rgb(243, 190, 8)"}],"properties":{"order":1105,"name":"status-away","prevSize":32,"id":193,"code":59741},"setIdx":2,"setId":2,"iconIdx":191},{"icon":{"paths":["M512 896c-212.077 0-384-171.923-384-384s171.923-384 384-384c212.077 0 384 171.923 384 384s-171.923 384-384 384zM384 458.666c-29.456 0-53.334 23.875-53.334 53.331s23.878 53.334 53.334 53.334h256c29.456 0 53.334-23.878 53.334-53.334s-23.878-53.331-53.334-53.331h-256z"],"attrs":[{"fill":"rgb(245, 69, 92)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":6}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":6}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":8}]},"tags":["status-busy"],"defaultCode":59742,"grid":0},"attrs":[{"fill":"rgb(245, 69, 92)"}],"properties":{"order":1106,"name":"status-busy","prevSize":32,"id":194,"code":59742},"setIdx":2,"setId":2,"iconIdx":192},{"icon":{"paths":["M512 896c212.077 0 384-171.923 384-384s-171.923-384-384-384c-212.077 0-384 171.923-384 384s171.923 384 384 384zM554.774 298.667v298.668c0 23.562-19.101 42.666-42.666 42.666s-42.669-19.104-42.669-42.666v-298.668c0-23.564 19.104-42.667 42.669-42.667s42.666 19.102 42.666 42.667zM554.774 725.334c0 23.562-19.101 42.666-42.666 42.666s-42.669-19.104-42.669-42.666c0-23.565 19.104-42.669 42.669-42.669s42.666 19.104 42.666 42.669z"],"attrs":[{"fill":"rgb(243, 140, 57)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":5}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":7}]},"tags":["status-disabled"],"defaultCode":59837,"grid":0},"attrs":[{"fill":"rgb(243, 140, 57)"}],"properties":{"order":1107,"id":195,"name":"status-disabled","prevSize":32,"code":59837},"setIdx":2,"setId":2,"iconIdx":193},{"icon":{"paths":["M888.691 586.941l-125.568-24.838c3.187-16.102 4.877-32.842 4.877-50.102s-1.69-34-4.877-50.102l125.568-24.838c4.794 24.237 7.309 49.296 7.309 74.941s-2.515 50.704-7.309 74.941zM831.322 298.644l-106.365 71.209c-18.726-27.971-42.838-52.083-70.81-70.81l71.21-106.364c41.875 28.035 77.93 64.089 105.965 105.965zM586.941 135.309l-24.838 125.566c-16.102-3.185-32.842-4.876-50.102-4.876s-34 1.69-50.102 4.876l-24.838-125.566c24.237-4.795 49.296-7.309 74.941-7.309s50.704 2.514 74.941 7.309zM298.644 192.679l71.209 106.364c-27.971 18.727-52.083 42.839-70.81 70.81l-106.364-71.209c28.035-41.876 64.089-77.93 105.965-105.964zM135.309 437.059c-4.795 24.237-7.309 49.296-7.309 74.941s2.514 50.704 7.309 74.941l125.566-24.838c-3.185-16.102-4.876-32.842-4.876-50.102s1.69-34 4.876-50.102l-125.566-24.838zM192.679 725.357l106.364-71.21c18.727 27.971 42.839 52.083 70.81 70.81l-71.209 106.365c-41.876-28.035-77.93-64.090-105.964-105.965zM437.059 888.691l24.838-125.568c16.102 3.187 32.842 4.877 50.102 4.877s34-1.69 50.102-4.877l24.838 125.568c-24.237 4.794-49.296 7.309-74.941 7.309s-50.704-2.515-74.941-7.309zM725.357 831.322l-71.21-106.365c27.971-18.726 52.083-42.838 70.81-70.81l106.365 71.21c-28.035 41.875-64.090 77.93-105.965 105.965z"],"attrs":[{"fill":"rgb(158, 162, 168)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":7}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":7}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":9}]},"tags":["status-loading"],"defaultCode":59743,"grid":0},"attrs":[{"fill":"rgb(158, 162, 168)"}],"properties":{"order":1108,"name":"status-loading","prevSize":32,"id":196,"code":59743},"setIdx":2,"setId":2,"iconIdx":194},{"icon":{"paths":["M512 789.334c-153.168 0-277.333-124.166-277.333-277.334s124.165-277.333 277.333-277.333c153.168 0 277.334 124.165 277.334 277.333s-124.166 277.334-277.334 277.334zM512 896c212.077 0 384-171.923 384-384s-171.923-384-384-384c-212.077 0-384 171.923-384 384s171.923 384 384 384z"],"attrs":[{"fill":"rgb(158, 162, 168)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":7}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":7}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":9}]},"tags":["status-offline"],"defaultCode":59744,"grid":0},"attrs":[{"fill":"rgb(158, 162, 168)"}],"properties":{"order":1109,"name":"status-offline","prevSize":32,"id":197,"code":59744},"setIdx":2,"setId":2,"iconIdx":195},{"icon":{"paths":["M896 512c0 212.077-171.923 384-384 384s-384-171.923-384-384c0-212.077 171.923-384 384-384s384 171.923 384 384z"],"attrs":[{"fill":"rgb(45, 224, 165)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":4}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":3}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":5}]},"tags":["status-online"],"defaultCode":59745,"grid":0},"attrs":[{"fill":"rgb(45, 224, 165)"}],"properties":{"order":1110,"name":"status-online","prevSize":32,"id":198,"code":59745},"setIdx":2,"setId":2,"iconIdx":196},{"icon":{"paths":["M511.997 224c-114.163 0-179.555 64.46-179.555 128v0.253c-0.061 7.453 1.072 14.867 3.354 21.962 5.411 16.826-3.84 34.851-20.666 40.259-16.825 5.411-34.85-3.84-40.261-20.666-4.357-13.546-6.527-27.702-6.428-41.933 0.081-113.124 110.343-191.875 243.556-191.875 103.597 0 190.97 46.311 226.886 120.071 7.738 15.889 1.13 35.043-14.762 42.78-15.888 7.738-35.043 1.13-42.781-14.761-22.259-45.713-82.714-84.090-169.344-84.090z","M128 512c0-17.674 14.327-32 32-32h392.893c0.467-0.010 0.938-0.010 1.408 0h309.699c17.674 0 32 14.326 32 32s-14.326 32-32 32h-160.432c38.198 29.328 64.432 70.438 64.432 128.003 0 57.2-32.512 105.965-79.008 139.178-46.557 33.254-109.235 52.822-176.992 52.822s-130.435-19.568-176.992-52.822c-46.495-33.213-79.008-81.978-79.008-139.178 0-17.674 14.327-32 32-32s32 14.326 32 32c0 31.168 17.632 62.4 52.208 87.098 34.515 24.653 83.837 40.902 139.792 40.902s105.277-16.25 139.792-40.902c34.576-24.698 52.208-55.93 52.208-87.098 0-35.558-15.216-59.581-42.134-79.283-27.824-20.368-67.005-35.082-112.88-48.72h-388.986c-17.673 0-32-14.326-32-32z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124319081245699212911624514522416519902101":[{},{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{},{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{},{}]},"tags":["strike"],"defaultCode":59846,"grid":0},"attrs":[{},{}],"properties":{"order":1111,"name":"strike","prevSize":32,"id":199,"code":59846},"setIdx":2,"setId":2,"iconIdx":197},{"icon":{"paths":["M481.35 117.336c0-17.673 14.326-32 32-32s32 14.327 32 32v106.667c0 17.673-14.326 32-32 32s-32-14.327-32-32v-106.667zM771.392 214.631c12.496-12.497 32.758-12.497 45.254 0s12.496 32.758 0 45.255l-75.411 75.413c-12.499 12.496-32.758 12.496-45.254 0-12.499-12.496-12.499-32.759 0-45.255l75.411-75.412zM336.73 694.63c-12.499-12.496-32.759-12.496-45.256 0l-75.495 75.498c-12.497 12.496-12.497 32.755 0 45.254 12.497 12.496 32.758 12.496 45.255 0l75.496-75.498c12.496-12.496 12.496-32.755 0-45.254zM481.35 800.003c0-17.674 14.326-32 32-32s32 14.326 32 32v106.669c0 17.67-14.326 32-32 32s-32-14.33-32-32v-106.669zM213.352 212.001c-12.497 12.497-12.497 32.758 0 45.255l75.349 75.348c12.497 12.496 32.758 12.496 45.254 0 12.499-12.496 12.496-32.757 0-45.254l-75.348-75.349c-12.497-12.497-32.758-12.497-45.255 0zM695.978 739.885c-12.496-12.496-12.496-32.758 0-45.254 12.499-12.496 32.758-12.496 45.254 0l75.331 75.328c12.496 12.496 12.496 32.758 0 45.254-12.499 12.496-32.758 12.496-45.258 0l-75.328-75.328zM87.751 512.003c0 17.674 14.327 32 32 32h106.667c17.673 0 32-14.326 32-32s-14.327-32-32-32h-106.667c-17.673 0-32 14.326-32 32zM801.35 544.003c-17.674 0-32-14.326-32-32s14.326-32 32-32h106.669c17.67 0 32 14.326 32 32s-14.33 32-32 32h-106.669zM668.17 512c0-85.504-69.315-154.816-154.819-154.816-85.507 0-154.819 69.312-154.819 154.816 0 85.507 69.312 154.819 154.819 154.819 85.504 0 154.819-69.312 154.819-154.819zM726.682 512c0 117.821-95.51 213.334-213.331 213.334s-213.335-95.514-213.335-213.334c0-117.821 95.514-213.332 213.335-213.332s213.331 95.511 213.331 213.332z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["sun"],"defaultCode":59847,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1112,"name":"sun","prevSize":32,"id":200,"code":59847},"setIdx":2,"setId":2,"iconIdx":198},{"icon":{"paths":["M930.704 512c0 229.75-186.25 416-416 416s-415.999-186.25-415.999-416c0-229.75 186.25-416 415.999-416s416 186.25 416 416zM570.49 859.603l-41.827-156.102c-4.611 0.33-9.264 0.499-13.958 0.499-4.57 0-9.101-0.16-13.594-0.474l-41.837 156.134c18.058 2.854 36.573 4.339 55.43 4.339 18.986 0 37.616-1.504 55.786-4.397zM438.893 688.451c-47.549-20.454-85.181-59.571-103.674-108.125l-155.029 41.539c33.968 103.485 114.617 185.805 217.045 222.058l41.658-155.472zM162.705 512c0 16.090 1.080 31.926 3.17 47.443l156.906-42.042c-0.051-1.795-0.077-3.594-0.077-5.402 0-4.909 0.186-9.776 0.547-14.595l-156.051-41.814c-2.958 18.368-4.496 37.21-4.496 56.41zM396.31 180.407c-99.16 35.408-177.786 114.033-213.196 213.19l155.535 41.677c19.357-44.352 54.982-79.978 99.334-99.331l-41.674-155.536zM514.704 160c-19.197 0-38.035 1.537-56.4 4.494l41.814 156.053c4.813-0.362 9.68-0.547 14.586-0.547 5.030 0 10.019 0.192 14.95 0.573l41.808-156.021c-18.477-2.995-37.437-4.552-56.758-4.552zM632.512 843.802c102.659-36.451 183.392-119.194 217.094-223.12l-154.973-41.526c-18.291 48.982-56.010 88.493-103.786 109.155l41.664 155.491zM863.699 558.198c1.984-15.117 3.005-30.538 3.005-46.198 0-18.771-1.469-37.197-4.298-55.171l-156.157 41.84c0.301 4.406 0.454 8.851 0.454 13.331 0 1.376-0.013 2.752-0.042 4.122l157.037 42.077zM846.714 394.774c-35.165-99.6-113.885-178.641-213.277-214.247l-41.68 155.559c44.582 19.555 80.314 55.565 99.504 100.342l155.453-41.654zM642.704 512c0-70.691-57.306-128-128-128-70.691 0-128 57.309-128 128s57.309 128 128 128c70.694 0 128-57.309 128-128z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["support"],"defaultCode":59848,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1113,"name":"support","prevSize":32,"id":201,"code":59848},"setIdx":2,"setId":2,"iconIdx":199},{"icon":{"paths":["M368 412.982c-53.592 0-96-42.877-96-94.491 0-51.616 42.408-94.491 96-94.491 53.594 0 96 42.876 96 94.491 0 51.614-42.406 94.491-96 94.491zM368 476.982c88.365 0 160-70.96 160-158.491s-71.635-158.491-160-158.491c-88.365 0-160 70.959-160 158.491s71.635 158.491 160 158.491zM713.6 397.133c-35.92 0-64-28.685-64-62.794s28.080-62.792 64-62.792c35.92 0 64 28.684 64 62.792s-28.080 62.794-64 62.794zM713.6 461.133c70.691 0 128-56.768 128-126.794s-57.309-126.792-128-126.792c-70.691 0-128 56.767-128 126.792s57.309 126.794 128 126.794zM197.459 527.267c27.344-8.707 56.67-9.242 84.319-1.539l48.491 13.51c24.205 6.742 49.882 6.275 73.824-1.347l30.099-9.584c29.475-9.386 61.085-9.962 90.89-1.658 67.962 18.934 114.918 80.333 114.918 150.269v91.987c0 52.518-42.979 95.094-96 95.094h-352c-53.019 0-96-42.576-96-95.094v-103.766c0-62.909 40.999-118.621 101.459-137.872zM264.451 586.758c-15.545-4.333-32.034-4.032-47.407 0.864-33.993 10.822-57.044 42.147-57.044 77.517v103.766c0 17.507 14.327 31.699 32 31.699h352c17.674 0 32-14.192 32-31.699v-91.987c0-41.533-27.885-77.997-68.246-89.242-17.699-4.931-36.474-4.589-53.978 0.986l-30.099 9.584c-35.91 11.434-74.426 12.138-110.737 2.019l-48.489-13.507zM691.2 778.717h140.8c53.021 0 96-42.979 96-96v-30.611c0-56.877-38.614-106.49-93.747-120.454-21.398-5.418-43.853-5.040-65.056 1.098l-16.4 4.746c-21.843 6.323-44.973 6.714-67.018 1.13l-29.805-7.549c-19.907-5.043-40.797-4.691-60.522 1.018-1.066 0.31-2.122 0.634-3.174 0.97 10.71 4.048 20.896 9.539 30.253 16.374l2.429 1.776 15.040 13.206c9.939 8.726 18.141 19.248 24.182 31.014l2.208 4.301 3.677 0.931c33.062 8.374 67.76 7.789 100.525-1.693l16.4-4.749c10.282-2.976 21.171-3.158 31.546-0.531 26.736 6.771 45.462 30.832 45.462 58.413v30.611c0 17.674-14.326 32-32 32h-140.8v64z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["team"],"defaultCode":59849,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1114,"name":"team","prevSize":32,"id":202,"code":59849},"setIdx":2,"setId":2,"iconIdx":200},{"icon":{"paths":["M281.184 336c17.673 0 32-14.326 32-32s-14.327-32-32-32c-17.673 0-32 14.327-32 32s14.327 32 32 32zM281.184 400c-53.020 0-96-42.979-96-96 0-53.019 42.98-96 96-96 53.018 0 96 42.981 96 96 0 53.021-42.982 96-96 96zM576 320c0-26.51-21.491-48-48-48s-48 21.49-48 48c0 26.509 21.491 48 48 48s48-21.491 48-48zM640 320c0 61.856-50.144 112-112 112s-112-50.144-112-112c0-61.856 50.144-112 112-112s112 50.144 112 112zM477.901 478.515c-28.56-10.957-60.291-10.211-88.307 2.067-42.282 18.534-69.594 60.326-69.594 106.49v132.928c0 53.021 42.979 96 96 96h224c53.021 0 96-42.979 96-96v-125.062c0-51.162-31.536-97.034-79.306-115.354-30.352-11.642-64.067-10.851-93.84 2.198l-2.070 0.909c-21.523 9.434-45.901 10.006-67.843 1.59l-15.040-5.766zM415.286 539.2c12.595-5.52 26.858-5.856 39.699-0.931l15.040 5.77c37.664 14.445 79.504 13.462 116.451-2.73l2.070-0.909c14.349-6.288 30.602-6.669 45.229-1.059 23.024 8.829 38.224 30.938 38.224 55.597v125.062c0 17.674-14.326 32-32 32h-224c-17.674 0-32-14.326-32-32v-132.928c0-20.752 12.278-39.539 31.286-47.872zM768 336c-17.674 0-32-14.326-32-32s14.326-32 32-32c17.674 0 32 14.327 32 32s-14.326 32-32 32zM768 400c53.021 0 96-42.979 96-96 0-53.019-42.979-96-96-96s-96 42.981-96 96c0 53.021 42.979 96 96 96zM840.714 681.766h-72.714v-64h72.714c17.674 0 32-14.326 32-32v-44.688c0-15.050-9.664-28.394-23.958-33.091-7.536-2.474-15.69-2.304-23.114 0.483l-4.554 1.709c-19.77 7.421-40.89 9.978-61.619 7.632-12.438-31.683-37.722-57.549-70.774-70.227-1.754-0.672-3.52-1.302-5.296-1.894 18.058-5.312 37.36-5.040 55.344 0.867l14.182 4.659c14.886 4.893 30.998 4.554 45.667-0.954l4.554-1.709c21.069-7.91 44.205-8.394 65.581-1.37 40.566 13.325 67.987 51.197 67.987 93.894v44.688c0 53.021-42.982 96-96 96zM625.267 624h-0.797c0.259 0.598 0.525 1.194 0.797 1.786v-1.786zM357.594 448.582c2.528-1.107 5.088-2.122 7.674-3.043-17.907-5.155-37.014-4.832-54.824 1.018l-14.183 4.659c-14.887 4.893-30.998 4.554-45.668-0.954l-4.554-1.709c-21.067-7.91-44.203-8.394-65.581-1.37-40.565 13.325-67.986 51.197-67.986 93.894v44.688c0 53.021 42.981 96 96 96h79.53v-64h-79.53c-17.673 0-32-14.326-32-32v-44.688c0-15.050 9.664-28.394 23.96-33.091 7.534-2.474 15.688-2.304 23.112 0.483l4.554 1.709c21.238 7.974 44.041 10.333 66.238 7.027 10.398-30.173 32.994-55.357 63.259-68.624zM423.917 624h0.797c-0.259 0.598-0.525 1.194-0.797 1.786v-1.786z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["teams"],"defaultCode":59751,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1115,"name":"teams","prevSize":32,"id":203,"code":59751},"setIdx":2,"setId":2,"iconIdx":201},{"icon":{"paths":["M631.997 256h24v-56c0-57.437 46.563-104 104-104 57.44 0 104 46.562 104 104v56h24c17.674 0 32 14.327 32 32v192c0 17.674-14.326 32-32 32h-256c-17.67 0-32-14.326-32-32v-192c0-17.673 14.33-32 32-32zM759.997 160c-22.090 0-40 17.908-40 40v55.238h80v-55.238c0-22.092-17.907-40-40-40z","M527.997 224c10.096 0 19.882 1.336 29.184 3.84-13.251 16.46-21.184 37.383-21.184 60.16v0.664c-2.602-0.436-5.274-0.664-8-0.664-26.509 0-48 21.49-48 48s21.491 48 48 48c2.726 0 5.398-0.227 8-0.662v64.381c-2.64 0.186-5.309 0.282-8 0.282-61.856 0-112-50.144-112-112s50.144-112 112-112z","M492.941 500.282c14.883 5.709 30.883 7.283 46.355 4.758 6.182 22.938 20.646 42.474 39.987 55.206-35.123 13.318-74.019 13.309-109.261-0.208l-15.040-5.77c-12.838-4.925-27.104-4.589-39.699 0.931-19.008 8.333-31.286 27.12-31.286 47.872v132.928c0 17.674 14.33 32 32 32h224c17.674 0 32-14.326 32-32v-125.062c0-12.842-4.122-24.995-11.325-34.938h70.291c3.29 11.162 5.034 22.902 5.034 34.938v125.062c0 53.021-42.979 96-96 96h-224c-53.018 0-95.999-42.979-95.999-96v-132.928c0-46.163 27.311-87.955 69.592-106.49 28.019-12.278 59.747-13.024 88.31-2.067l15.040 5.766z","M887.997 576h-15.286v25.766c0 17.674-14.326 32-32 32h-72.714v64h72.714c53.021 0 96-42.979 96-96v-39.027c-14.278 8.426-30.931 13.261-48.714 13.261z","M281.182 416c53.020 0 95.999-42.979 95.999-96 0-53.019-42.979-96-95.999-96s-96 42.981-96 96c0 53.021 42.98 96 96 96zM281.182 352c-17.673 0-32-14.326-32-32s14.327-32 32-32c17.673 0 32 14.327 32 32s-14.327 32-32 32z","M625.267 640h-0.8c0.262 0.598 0.528 1.194 0.8 1.786v-1.786z","M357.59 464.582c2.531-1.107 5.091-2.122 7.674-3.043-17.907-5.155-37.011-4.832-54.823 1.018l-14.183 4.659c-14.887 4.893-30.998 4.554-45.668-0.954l-4.554-1.709c-21.067-7.91-44.203-8.394-65.581-1.37-40.565 13.325-67.986 51.197-67.986 93.894v44.688c0 53.021 42.98 96 96 96h79.53v-64h-79.53c-17.673 0-32-14.326-32-32v-44.688c0-15.050 9.664-28.394 23.96-33.091 7.534-2.474 15.688-2.304 23.112 0.483l4.554 1.709c21.238 7.974 44.041 10.333 66.238 7.027 10.398-30.173 32.992-55.357 63.258-68.624z","M423.914 640h0.797c-0.259 0.598-0.525 1.194-0.797 1.786v-1.786z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["teams-private"],"defaultCode":59750,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1116,"name":"teams-private","prevSize":32,"id":204,"code":59750},"setIdx":2,"setId":2,"iconIdx":202},{"icon":{"paths":["M170.664 192c0-17.673 14.327-32 32-32h618.667c17.674 0 32 14.327 32 32v128c0 17.674-14.326 32-32 32s-32-14.326-32-32v-96h-245.334v576h96c17.674 0 32 14.326 32 32s-14.326 32-32 32h-256c-17.67 0-32-14.326-32-32s14.33-32 32-32h96v-576h-245.333v96c0 17.674-14.327 32-32 32s-32-14.326-32-32v-128z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"10811412211581621681203206209124319081245699212911624514522416519902101":[{}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{}]},"tags":["text-format"],"defaultCode":59839,"grid":0},"attrs":[{}],"properties":{"order":1117,"id":205,"name":"text-format","prevSize":32,"code":59839},"setIdx":2,"setId":2,"iconIdx":203},{"icon":{"paths":["M223.311 308.609c-47.832 66.7-64.077 147.667-64.077 201.187v1.405l-0.127 1.398c-9.348 103.235 27.547 175.997 86.848 226.374 60.642 51.52 146.602 80.998 235.29 90.893 88.611 9.885 186.221 1.398 263.341-14.973 38.56-8.189 70.928-18.125 93.888-28.128 8.906-3.882 15.837-7.536 20.941-10.765-2.374-1.514-5.245-3.197-8.672-5.030-8.886-4.749-19.059-9.261-29.613-13.894l-1.843-0.81c-9.315-4.083-19.725-8.65-27.613-13.078-14.291-8.026-28.317-17.155-38.544-26.867-5.034-4.781-10.762-11.194-14.595-19.184-4.054-8.454-6.96-21.078-1.261-34.435 30.816-72.186 45.459-111.725 52.554-137.834 6.621-24.378 6.621-36.653 6.621-56.17v-0.179c0-15.51-8.979-86.595-53.776-152.876-43.376-64.174-121.398-125.729-264.832-125.729-129.725 0-207.83 53.576-254.529 118.696zM173.267 272.433c58.132-81.063 154.749-144.433 304.573-144.433 164.896 0 261.594 72.589 315.859 152.878 52.838 78.181 64.416 161.881 64.416 187.641 0 21.654-0.022 40.336-8.797 72.64-7.834 28.835-22.627 68.614-50.048 133.424 5.069 4.032 12.592 9.005 22.506 14.57 5.12 2.877 12.995 6.339 24.054 11.194 10.266 4.506 22.582 9.93 33.891 15.978 10.848 5.798 23.526 13.571 32.954 23.738 9.859 10.63 20.208 28.87 12.816 51.139-4.87 14.672-16.182 25.091-25.61 32.016-10.24 7.52-22.947 14.278-36.858 20.342-27.949 12.176-64.582 23.181-105.68 31.907-82.198 17.453-186.522 26.688-282.909 15.936-96.31-10.746-195.346-43.178-268.313-105.165-74.031-62.893-119.295-154.778-108.551-277.856 0.276-63.411 19.117-157.053 75.696-235.948zM333.952 422.051c0-17.648 14.25-31.955 31.83-31.955h183.008c17.578 0 31.827 14.307 31.827 31.955s-14.25 31.955-31.827 31.955h-183.008c-17.581 0-31.83-14.307-31.83-31.955zM365.782 539.709c-17.581 0-31.83 14.307-31.83 31.955s14.25 31.955 31.83 31.955h224.118c17.578 0 31.827-14.307 31.827-31.955s-14.25-31.955-31.827-31.955h-224.118z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["threads"],"defaultCode":59850,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1118,"name":"threads","prevSize":32,"id":206,"code":59850},"setIdx":2,"setId":2,"iconIdx":204},{"icon":{"paths":["M353.354 320c0-17.673 14.326-32 32-32h256c17.674 0 32 14.327 32 32s-14.326 32-32 32h-256c-17.674 0-32-14.326-32-32z","M385.354 416c-17.674 0-32 14.326-32 32s14.326 32 32 32c17.674 0 32-14.326 32-32s-14.326-32-32-32z","M481.354 448c0-17.674 14.326-32 32-32s32 14.326 32 32c0 17.674-14.326 32-32 32s-32-14.326-32-32z","M641.354 416c-17.674 0-32 14.326-32 32s14.326 32 32 32c17.674 0 32-14.326 32-32s-14.326-32-32-32z","M353.354 576c0-17.674 14.326-32 32-32s32 14.326 32 32c0 17.674-14.326 32-32 32s-32-14.326-32-32z","M513.354 544c-17.674 0-32 14.326-32 32s14.326 32 32 32c17.674 0 32-14.326 32-32s-14.326-32-32-32z","M609.354 576c0-17.674 14.326-32 32-32s32 14.326 32 32c0 17.674-14.326 32-32 32s-32-14.326-32-32z","M385.354 672c-17.674 0-32 14.326-32 32s14.326 32 32 32c17.674 0 32-14.326 32-32s-14.326-32-32-32z","M481.354 704c0-17.674 14.326-32 32-32s32 14.326 32 32c0 17.674-14.326 32-32 32s-32-14.326-32-32z","M641.354 672c-17.674 0-32 14.326-32 32s14.326 32 32 32c17.674 0 32-14.326 32-32s-14.326-32-32-32z","M289.353 160h448.001c35.344 0 64 28.654 64 64v576c0 35.347-28.656 64-64 64h-448.001c-35.346 0-64-28.653-64-64v-576c0-35.346 28.654-64 64-64zM289.353 224v576h448.001v-576h-448.001z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["total"],"defaultCode":59851,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1119,"name":"total","prevSize":32,"id":207,"code":59851},"setIdx":2,"setId":2,"iconIdx":205},{"icon":{"paths":["M713.613 91.356c13.162-11.794 33.392-10.685 45.187 2.477l129.034 144c10.89 12.154 10.89 30.556 0 42.71l-129.034 144.001c-11.795 13.162-32.026 14.269-45.187 2.477-13.162-11.795-14.272-32.026-2.477-45.187l81.222-90.646h-216.358c-17.674 0-32-14.327-32-32s14.326-32 32-32h216.358l-81.222-90.645c-11.795-13.162-10.685-33.393 2.477-45.187zM340.026 464.461c8.586-15.45 28.067-21.018 43.514-12.432l128.461 71.366 128.461-71.366c15.446-8.586 34.928-3.018 43.514 12.432 8.582 15.45 3.014 34.931-12.435 43.514l-159.539 88.634-159.539-88.634c-15.45-8.582-21.018-28.064-12.435-43.514zM192 288v448h640v-192c0-17.674 14.326-32 32-32s32 14.326 32 32v224c0 17.674-14.326 32-32 32h-704c-17.673 0-32-14.326-32-32v-512c0-17.673 14.327-32 32-32h272c17.674 0 32 14.327 32 32s-14.326 32-32 32h-240z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["transcript"],"defaultCode":59852,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1120,"name":"transcript","prevSize":32,"id":208,"code":59852},"setIdx":2,"setId":2,"iconIdx":206},{"icon":{"paths":["M378.861 853.331c317.456 0 491.091-262.662 491.091-490.442 0-7.462 0-14.89-0.506-22.282 33.779-24.401 62.938-54.614 86.112-89.224-31.501 13.94-64.918 23.082-99.136 27.12 36.032-21.542 62.998-55.424 75.882-95.34-33.878 20.078-70.944 34.228-109.597 41.839-53.501-56.814-138.515-70.72-207.37-33.919-68.851 36.801-104.426 115.155-86.768 191.127-138.774-6.947-268.074-72.409-355.715-180.093-45.811 78.76-22.412 179.517 53.436 230.1-27.467-0.813-54.335-8.214-78.337-21.574 0 0.704 0 1.443 0 2.182 0.022 82.051 57.937 152.723 138.47 168.97-25.41 6.922-52.071 7.933-77.933 2.957 22.611 70.218 87.409 118.32 161.25 119.706-61.116 47.968-136.616 74.010-214.35 73.933-13.732-0.026-27.452-0.858-41.087-2.486 78.931 50.586 170.772 77.418 264.557 77.293z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["twitter-monochromatic"],"defaultCode":59660,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1121,"name":"twitter-monochromatic","prevSize":32,"id":209,"code":59660},"setIdx":2,"setId":2,"iconIdx":207},{"icon":{"paths":["M384 320c0-17.673-14.326-32-32-32s-32 14.327-32 32v256c0 106.038 85.962 192 192 192s192-85.962 192-192v-256c0-17.673-14.326-32-32-32s-32 14.327-32 32v256c0 70.691-57.309 128-128 128s-128-57.309-128-128v-256zM352 856c-13.254 0-24 10.746-24 24s10.746 24 24 24h320c13.254 0 24-10.746 24-24s-10.746-24-24-24h-320z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["underline"],"defaultCode":59853,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1122,"name":"underline","prevSize":32,"id":210,"code":59853},"setIdx":2,"setId":2,"iconIdx":208},{"icon":{"paths":["M512 832c176.73 0 320-143.27 320-320s-143.27-320-320-320c-111.712 0-210.056 57.244-267.295 144h107.295c17.674 0 32 14.326 32 32s-14.326 32-32 32h-176c-17.673 0-32-14.326-32-32v-192c0-17.673 14.327-32 32-32s32 14.327 32 32v101.364c70.228-90.856 180.282-149.364 304-149.364 212.077 0 384 171.923 384 384s-171.923 384-384 384c-212.077 0-384-171.923-384-384h64c0 176.73 143.27 320 320 320z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["undo"],"defaultCode":59854,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1123,"name":"undo","prevSize":32,"id":211,"code":59854},"setIdx":2,"setId":2,"iconIdx":209},{"icon":{"paths":["M589.36 729.43c-107.366 23.603-252.288-9.875-422.339-221.158 65.137-95.478 165.885-189.15 280.79-213.871 108.314-23.302 251.286 10.604 413.674 221.404-61.546 95.187-158.653 188.682-272.125 213.626zM916.819 482.714c-347.59-456.963-669.742-211.156-808.018-2.662-12.655 19.082-10.846 44.304 3.402 62.227 362.786 456.419 677.038 209.142 808.011 0.563 11.674-18.589 9.894-42.656-3.395-60.128zM619.462 512c0-53.709-45.517-100.57-105.834-100.57s-105.834 46.861-105.834 100.57c0 53.709 45.517 100.573 105.834 100.573s105.834-46.864 105.834-100.573zM683.546 512c0 90.893-76.074 164.573-169.917 164.573s-169.917-73.68-169.917-164.573c0-90.89 76.074-164.57 169.917-164.57s169.917 73.68 169.917 164.57z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["unread-on-top"],"defaultCode":59857,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1124,"name":"unread-on-top","prevSize":32,"id":212,"code":59857},"setIdx":2,"setId":2,"iconIdx":210},{"icon":{"paths":["M829.168 153.372c12.515-12.497 32.803-12.497 45.315 0 12.515 12.497 12.515 32.758 0 45.255l-672.887 672c-12.513 12.496-32.801 12.496-45.315 0s-12.513-32.758 0-45.254l672.887-672zM110.155 480.051c101.936-153.699 303.797-327.676 542.114-225.436l-49.578 49.512c-56.528-19.209-108.077-19.504-153.526-9.726-114.906 24.721-215.653 118.392-280.79 213.871 38.633 48 75.969 86.822 111.862 117.885l-45.363 45.302c-39.684-34.736-80.189-77.437-121.317-129.181-14.248-17.923-16.056-43.146-3.402-62.227zM797.981 350.454l-45.328 45.27c35.546 31.427 72.336 70.947 110.186 120.080-61.546 95.187-158.656 188.682-272.125 213.626-46.752 10.278-100.624 9.734-160.592-11.603l-49.331 49.267c244.662 107.334 443.389-69.158 540.778-224.253 11.674-18.589 9.894-42.656-3.395-60.128-40.493-53.235-80.64-96.931-120.192-132.259zM514.982 347.43c13.709 0 27.037 1.571 39.802 4.541l-203.738 203.469c-3.901-13.837-5.981-28.403-5.981-43.44 0-90.89 76.074-164.57 169.917-164.57zM679.091 469.184l-203.264 202.998c12.57 2.87 25.68 4.39 39.155 4.39 93.843 0 169.917-73.68 169.917-164.573 0-14.81-2.019-29.162-5.808-42.816z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["unread-on-top-disabled"],"defaultCode":59856,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1125,"name":"unread-on-top-disabled","prevSize":32,"id":213,"code":59856},"setIdx":2,"setId":2,"iconIdx":211},{"icon":{"paths":["M273.128 356.678c-6.62 27.766-2.384 63.757 25.498 105.581l33.166 49.75h-59.792c-44.011 0-70.484 14.874-86.279 33.619-16.496 19.578-24.573 47.264-23.734 77.491 0.841 30.262 10.601 59.968 25.818 81.312 15.127 21.216 33.404 31.578 52.195 31.578h143.999v64h-144c-45.209 0-80.932-25.642-104.306-58.426-23.283-32.656-36.522-74.95-37.682-116.688-1.16-41.773 9.763-86.083 38.766-120.506 20.726-24.598 49.155-42.32 84.825-50.784-16.1-39.011-19.009-77.050-10.731-111.77 11.253-47.2 42.305-84.492 80.791-107.342 38.4-22.798 85.677-32.139 131.303-21.965 35.584 7.935 68.909 27.48 95.251 59.554 53.75-35.147 127.584-30.892 182.483-2.495 34.438 17.812 64.794 46.382 81.437 85.010 12.294 28.531 16.438 61.011 10.608 96.205 46.112 6.682 81.507 25.155 105.616 53.456 30.346 35.626 38.102 81.35 33.443 123.283-4.659 41.917-21.946 83.485-46.544 115.114-24.061 30.934-59.354 57.354-101.261 57.354h-144v-64h144c14.093 0 32.8-9.581 50.742-32.646 17.398-22.371 30.112-52.806 33.453-82.89 3.341-30.067-2.902-56.339-18.554-74.714-15.222-17.869-44.035-33.75-97.642-33.75h-45.686l15.613-42.938c13.546-37.251 11.091-66.742 1.437-89.149-9.856-22.87-28.502-41.302-52.064-53.488-49.587-25.649-107.475-18.625-134.717 14.064l-30.134 36.16-22.541-41.325c-19.757-36.219-47.232-54.175-74.87-60.339-28.378-6.327-59.098-0.669-84.701 14.53-25.512 15.148-44.461 38.855-51.208 67.152zM630.979 588.778l-96-99.050c-6.029-6.218-14.32-9.728-22.979-9.728s-16.95 3.51-22.979 9.728l-96 99.050c-12.298 12.691-11.981 32.95 0.707 45.251 12.691 12.298 32.95 11.981 45.251-0.707l41.021-42.326v273.005c0 17.674 14.326 32 32 32s32-14.326 32-32v-273.005l41.021 42.326c12.301 12.688 32.56 13.005 45.251 0.707 12.691-12.301 13.005-32.56 0.707-45.251z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["upload"],"defaultCode":59858,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1126,"name":"upload","prevSize":32,"id":214,"code":59858},"setIdx":2,"setId":2,"iconIdx":212},{"icon":{"paths":["M609.354 336c0-53.019-42.979-96-96-96s-96 42.981-96 96c0 53.021 42.979 96 96 96s96-42.979 96-96zM673.354 336c0 88.365-71.635 160-160 160s-160-71.635-160-160c0-88.365 71.635-160 160-160s160 71.635 160 160zM413.805 551.802c-24.621-5.77-50.285-5.366-74.714 1.178-67.086 17.968-113.738 78.762-113.738 148.211v66.81c0 53.021 42.98 96 96 96h384c53.021 0 96-42.979 96-96v-58.531c0-74.301-51.149-138.826-123.488-155.779l-6.458-1.514c-25.674-6.016-52.435-5.594-77.907 1.229l-49.626 13.293c-20.378 5.456-41.789 5.795-62.326 0.979l-67.744-15.875zM355.651 614.8c14.237-3.814 29.197-4.051 43.549-0.688l67.744 15.878c30.806 7.219 62.925 6.714 93.488-1.472l49.629-13.293c15.283-4.096 31.341-4.349 46.742-0.736l6.458 1.51c43.402 10.173 74.093 48.89 74.093 93.469v58.531c0 17.674-14.326 32-32 32h-384c-17.673 0-32-14.326-32-32v-66.81c0-40.483 27.193-75.917 66.298-86.39z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["user"],"defaultCode":59861,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1127,"name":"user","prevSize":32,"id":215,"code":59861},"setIdx":2,"setId":2,"iconIdx":213},{"icon":{"paths":["M553.411 326.282c0 91.578-75.846 165.818-169.411 165.818-93.564 0-169.412-74.24-169.412-165.818 0-91.581 75.848-165.821 169.412-165.821 93.565 0 169.411 74.24 169.411 165.821zM485.648 326.282c0-54.949-45.51-99.493-101.648-99.493s-101.647 44.544-101.647 99.493c0 54.947 45.509 99.491 101.647 99.491s101.648-44.544 101.648-99.491z","M203.427 511.232c28.952-9.11 60.004-9.67 89.279-1.61l51.342 14.131c25.632 7.056 52.819 6.566 78.166-1.408l31.872-10.026c31.206-9.821 64.678-10.422 96.234-1.738 71.962 19.811 121.68 84.051 121.68 157.219v96.24c0 54.947-45.51 99.491-101.648 99.491h-372.705c-56.138 0-101.647-44.544-101.647-99.491v-108.566c0-65.814 43.411-124.106 107.427-144.243zM274.359 573.472c-16.46-4.531-33.918-4.218-50.196 0.906-35.992 11.322-60.399 44.093-60.399 81.098v108.566c0 18.317 15.17 33.165 33.882 33.165h372.705c18.714 0 33.882-14.848 33.882-33.165v-96.24c0-43.453-29.523-81.603-72.259-93.366-18.739-5.158-38.618-4.8-57.152 1.030l-31.872 10.026c-38.022 11.962-78.803 12.698-117.248 2.115l-51.343-14.134z","M797.091 189.321c0-15.913-13.024-28.812-29.091-28.812s-29.091 12.9-29.091 28.812v100.844h-101.818c-16.067 0-29.091 12.9-29.091 28.812s13.024 28.812 29.091 28.812h101.818v100.845c0 15.914 13.024 28.813 29.091 28.813s29.091-12.899 29.091-28.813v-100.845h101.818c16.067 0 29.091-12.899 29.091-28.812s-13.024-28.812-29.091-28.812h-101.818v-100.844z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["user-add"],"defaultCode":59859,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1128,"name":"user-add","prevSize":32,"id":216,"code":59859},"setIdx":2,"setId":2,"iconIdx":214},{"icon":{"paths":["M464 318.747c0-51.548-42.406-94.366-96-94.366-53.592 0-96 42.819-96 94.366s42.408 94.367 96 94.367c53.594 0 96-42.819 96-94.367zM528 318.747c0 87.416-71.635 158.284-160 158.284s-160-70.867-160-158.284c0-87.417 71.635-158.282 160-158.282s160 70.865 160 158.282zM281.778 525.712c-27.649-7.693-56.976-7.158-84.319 1.536-60.46 19.226-101.459 74.864-101.459 137.69v103.629c0 52.451 42.981 94.97 96 94.97h352c3.606 0 7.165-0.195 10.666-0.579v-64.534c-3.334 1.168-6.925 1.802-10.666 1.802h-352c-17.673 0-32-14.173-32-31.658v-103.629c0-35.325 23.051-66.605 57.044-77.414 15.373-4.89 31.862-5.187 47.407-0.864l48.489 13.491c36.311 10.102 74.827 9.402 110.737-2.016l30.099-9.571c17.504-5.568 36.278-5.91 53.978-0.986 18.899 5.261 35.066 16.042 46.912 30.282v-79.712c-9.309-4.749-19.203-8.627-29.584-11.517-29.805-8.291-61.414-7.715-90.89 1.654l-30.099 9.574c-23.942 7.61-49.619 8.080-73.824 1.344l-48.491-13.491zM763.366 489.709c-12.326-12.646-32.586-12.918-45.248-0.608-12.666 12.31-12.938 32.544-0.611 45.19l102.842 105.51h-324.349c-17.674 0-32 14.307-32 31.958 0 17.648 14.326 31.958 32 31.958h324.349l-102.842 105.507c-12.326 12.65-12.054 32.88 0.611 45.194 12.662 12.31 32.922 12.038 45.248-0.611l155.718-159.757c12.093-12.406 12.093-32.176 0-44.582l-155.718-159.76z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["user-forward"],"defaultCode":59860,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1129,"name":"user-forward","prevSize":32,"id":217,"code":59860},"setIdx":2,"setId":2,"iconIdx":215},{"icon":{"paths":["M201.583 672c35.346 0 64-28.653 64-64s-28.654-64-64-64c-35.346 0-64 28.653-64 64s28.654 64 64 64z","M329.584 576c-17.674 0-32.001 14.326-32.001 32s14.327 32 32.001 32h544c17.674 0 32-14.326 32-32s-14.326-32-32-32h-544z","M201.583 480c35.346 0 64-28.653 64-64s-28.654-64-64-64c-35.346 0-64 28.653-64 64s28.654 64 64 64z","M329.584 384c-17.674 0-32.001 14.326-32.001 32s14.327 32 32.001 32h544c17.674 0 32-14.326 32-32s-14.326-32-32-32h-544z","M201.583 288c35.346 0 64-28.654 64-64s-28.654-64-64-64c-35.346 0-64 28.654-64 64s28.654 64 64 64z","M329.584 192c-17.674 0-32.001 14.327-32.001 32s14.327 32 32.001 32h544c17.674 0 32-14.327 32-32s-14.326-32-32-32h-544z","M201.583 864c35.346 0 64-28.653 64-64s-28.654-64-64-64c-35.346 0-64 28.653-64 64s28.654 64 64 64z","M329.584 768c-17.674 0-32.001 14.326-32.001 32s14.327 32 32.001 32h544c17.674 0 32-14.326 32-32s-14.326-32-32-32h-544z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["view-condensed"],"defaultCode":59862,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1130,"name":"view-condensed","prevSize":32,"id":218,"code":59862},"setIdx":2,"setId":2,"iconIdx":216},{"icon":{"paths":["M288 192c0-17.673 14.327-32 32-32h544c17.674 0 32 14.327 32 32s-14.326 32-32 32h-544c-17.673 0-32-14.327-32-32zM288 288c0-17.673 14.327-32 32-32h448c17.674 0 32 14.327 32 32s-14.326 32-32 32h-448c-17.673 0-32-14.327-32-32zM192 304c35.346 0 64-28.654 64-64s-28.654-64-64-64c-35.346 0-64 28.654-64 64s28.654 64 64 64z","M288 464c0-17.674 14.327-32 32-32h544c17.674 0 32 14.326 32 32s-14.326 32-32 32h-544c-17.673 0-32-14.326-32-32zM288 560c0-17.674 14.327-32 32-32h448c17.674 0 32 14.326 32 32s-14.326 32-32 32h-448c-17.673 0-32-14.326-32-32zM192 576c35.346 0 64-28.653 64-64s-28.654-64-64-64c-35.346 0-64 28.653-64 64s28.654 64 64 64z","M288 736c0-17.674 14.327-32 32-32h544c17.674 0 32 14.326 32 32s-14.326 32-32 32h-544c-17.673 0-32-14.326-32-32zM288 832c0-17.674 14.327-32 32-32h448c17.674 0 32 14.326 32 32s-14.326 32-32 32h-448c-17.673 0-32-14.326-32-32zM192 848c35.346 0 64-28.653 64-64s-28.654-64-64-64c-35.346 0-64 28.653-64 64s28.654 64 64 64z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["view-extended"],"defaultCode":59863,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1131,"name":"view-extended","prevSize":32,"id":219,"code":59863},"setIdx":2,"setId":2,"iconIdx":217},{"icon":{"paths":["M192 320c35.346 0 64-28.654 64-64s-28.654-64-64-64c-35.346 0-64 28.654-64 64s28.654 64 64 64z","M320 224c-17.673 0-32 14.327-32 32s14.327 32 32 32h544c17.674 0 32-14.327 32-32s-14.326-32-32-32h-544z","M192 576c35.346 0 64-28.653 64-64s-28.654-64-64-64c-35.346 0-64 28.653-64 64s28.654 64 64 64z","M320 480c-17.673 0-32 14.326-32 32s14.327 32 32 32h544c17.674 0 32-14.326 32-32s-14.326-32-32-32h-544z","M192 832c35.346 0 64-28.653 64-64s-28.654-64-64-64c-35.346 0-64 28.653-64 64s28.654 64 64 64z","M320 736c-17.673 0-32 14.326-32 32s14.327 32 32 32h544c17.674 0 32-14.326 32-32s-14.326-32-32-32h-544z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["view-medium"],"defaultCode":59864,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1132,"name":"view-medium","prevSize":32,"id":220,"code":59864},"setIdx":2,"setId":2,"iconIdx":218},{"icon":{"paths":["M640.854 256c26.512 0 48-21.49 48-48s-21.488-48-48-48c-26.509 0-48 21.49-48 48s21.491 48 48 48zM640.854 320c61.856 0 112-50.144 112-112s-50.144-112-112-112c-61.856 0-112 50.144-112 112s50.144 112 112 112zM592.854 416v256h-160v128h32v-96h224v-288h-96zM528.854 768h160c35.347 0 64-28.653 64-64v-288c0-35.347-28.653-64-64-64h-96c-35.344 0-64 28.653-64 64v192h-96c-35.344 0-64 28.653-64 64v128c0 35.347 28.656 64 64 64h32c35.347 0 64-28.653 64-64v-32zM784.854 448c0-17.674 14.326-32 32-32s32 14.326 32 32v384c0 17.674-14.326 32-32 32h-224c-17.674 0-32-14.326-32-32s14.326-32 32-32h192v-352zM368.403 401.52c9.677-9.059 10.176-24.246 1.117-33.923l-48.272-51.558v-47.925c0-13.255-10.746-24-24-24s-24 10.745-24 24v57.406c0 6.093 2.316 11.955 6.48 16.403l54.752 58.48c9.059 9.677 24.246 10.176 33.923 1.117zM170.974 414.278c53.308 74.218 156.687 91.171 230.908 37.862 10.765-7.731 25.76-5.274 33.494 5.491 7.731 10.768 5.274 25.763-5.494 33.494-95.75 68.771-229.121 46.902-297.894-48.848s-46.902-229.123 48.848-297.895c75.545-54.26 174.453-52.073 246.597-1.796 10.874 7.578 13.546 22.538 5.968 33.412s-22.538 13.547-33.411 5.968c-55.971-39.005-132.65-40.618-191.153 1.402-74.219 53.308-91.171 156.688-37.864 230.909z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["waiting-on-me"],"defaultCode":59865,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1133,"name":"waiting-on-me","prevSize":32,"id":221,"code":59865},"setIdx":2,"setId":2,"iconIdx":219},{"icon":{"paths":["M512 352.003c17.674 0 32 14.33 32 32v224c0 17.674-14.326 32-32 32s-32-14.326-32-32v-224c0-17.67 14.326-32 32-32z","M512 672.003c17.674 0 32 14.33 32 32 0 17.674-14.326 32-32 32s-32-14.326-32-32c0-17.67 14.326-32 32-32z","M567.101 158.348c-24.774-41.922-85.427-41.922-110.202 0l-359.92 609.099c-25.21 42.662 5.544 96.557 55.099 96.557h719.845c49.555 0 80.307-53.894 55.098-96.557l-359.92-609.099zM512 190.906l359.923 609.097h-719.845l359.922-609.097z"],"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2}]},"tags":["warning"],"defaultCode":59866,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1134,"name":"warning","prevSize":32,"id":222,"code":59866},"setIdx":2,"setId":2,"iconIdx":220},{"icon":{"paths":["M784.131 240.143c-35.43-35.658-77.581-63.931-124.016-83.181s-96.227-29.094-146.493-28.961c-210.863 0-382.322 171.532-382.414 382.376-0.085 67.104 17.523 133.043 51.047 191.171l-54.256 198.154 202.72-53.174c56.064 30.531 118.883 46.531 182.717 46.538h0.166c210.752 0 382.32-171.552 382.394-382.394 0.16-50.25-9.645-100.029-28.848-146.464-19.2-46.436-47.418-88.604-83.018-124.065zM513.622 828.486h-0.186c-56.922 0.006-112.797-15.293-161.776-44.298l-11.606-6.896-120.302 31.555 32.124-117.347-7.573-12.029c-31.783-50.64-48.608-109.232-48.535-169.021 0-175.235 142.653-317.816 317.981-317.816 84.301 0.049 165.13 33.58 224.707 93.218 59.581 59.638 93.034 140.499 92.998 224.8-0.074 175.254-142.653 317.834-317.834 317.834zM687.958 590.451c-9.552-4.787-56.528-27.907-65.293-31.171s-15.126-4.768-21.491 4.784c-6.362 9.555-24.678 31.171-30.253 37.462-5.574 6.288-11.149 7.187-20.701 2.4-9.555-4.784-40.339-14.87-76.845-47.434-28.403-25.322-47.584-56.621-53.174-66.192-5.594-9.571-0.589-14.669 4.198-19.491 4.291-4.291 9.552-11.168 14.32-16.742s6.381-9.571 9.552-15.933c3.174-6.362 1.597-11.955-0.787-16.739-2.384-4.787-21.491-51.818-29.466-70.96-7.757-18.63-15.622-16.099-21.491-16.394-5.501-0.275-11.955-0.349-18.336-0.349-4.842 0.131-9.606 1.264-13.994 3.325-4.387 2.058-8.298 5.005-11.491 8.65-8.749 9.552-33.428 32.675-33.428 79.706s34.234 92.467 39.002 98.848c4.765 6.381 67.382 102.883 163.187 144.266 17.792 7.68 35.974 14.413 54.477 20.17 22.902 7.334 43.731 6.237 60.179 3.779 18.336-2.733 56.547-23.104 64.506-45.418 7.955-22.317 7.955-41.459 5.501-45.456-2.458-3.997-8.618-6.326-18.173-11.11z"],"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["whatsapp-monochromatic"],"defaultCode":59868,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1135,"name":"whatsapp-monochromatic","prevSize":32,"id":223,"code":59868},"setIdx":2,"setId":2,"iconIdx":221},{"icon":{"paths":["M354.006 399.123l14.029 0.627-0.541-16.726-152.878 1.578c49.916-116.491 165.64-198.133 300.366-198.133 99.645 0 188.893 44.659 248.81 115.065-3.712 0.171-7.491 0.492-11.526 1.068 0 0-63.76 14.898-13.302 118.708 0 0 31.085 84.541-19.306 198.774l-28.403 73.306-99.101-264.723c0 0-5.984-28.154 23.61-28.154l23.76-1.472 0.339-16.035h-228.368v14.458c0 0 39.83-0.288 56.15 27.149l40.762 103.779-73.014 174.403-108.608-272.4c0 0-3.389-31.779 27.222-31.27z","M841.603 513.168c0-33.862-5.235-66.643-14.726-97.357l-145.949 378.755c96.134-56.88 160.675-161.571 160.675-281.398z","M411.478 823.011c32.49 10.912 67.267 16.778 103.488 16.778 37.85 0 74.102-6.406 107.898-18.256l-99.709-258.502-111.677 259.981z","M188.279 513.149c0-32.083 4.712-63.066 13.339-92.336l1 2.051 152.656 375.229c-99.606-55.882-166.994-162.538-166.994-284.944z","M130.705 512.093c0-211.775 172.316-384.093 384.076-384.093 211.725 0 383.923 172.318 383.923 384.093 0 211.776-172.198 384.010-383.923 384.010-211.757 0-384.076-172.234-384.076-384.010zM514.781 879.254c202.384 0 367.11-164.742 367.11-367.178 0-202.486-164.726-367.145-367.11-367.161-202.489 0-367.213 164.673-367.213 367.161 0 202.435 164.724 367.178 367.213 367.178z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["wordpress-monochromatic"],"defaultCode":59755,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1136,"name":"wordpress-monochromatic","prevSize":32,"id":224,"code":59755},"setIdx":2,"setId":2,"iconIdx":222},{"icon":{"paths":["M193.353 405.334h213.332v-213.334h-213.332v213.334zM129.353 170.667c0-23.564 19.102-42.667 42.667-42.667h256c23.565 0 42.666 19.102 42.666 42.667v255.999c0 23.565-19.101 42.669-42.666 42.669h-256c-23.564 0-42.667-19.104-42.667-42.669v-255.999zM620.019 405.334h213.334v-213.334h-213.334v213.334zM556.019 170.667c0-23.564 19.104-42.667 42.666-42.667h256c23.565 0 42.669 19.102 42.669 42.667v255.999c0 23.565-19.104 42.669-42.669 42.669h-256c-23.562 0-42.666-19.104-42.666-42.669v-255.999zM620.019 618.666h213.334v213.334h-213.334v-213.334zM598.685 554.666c-23.562 0-42.666 19.104-42.666 42.669v256c0 23.562 19.104 42.666 42.666 42.666h256c23.565 0 42.669-19.104 42.669-42.666v-256c0-23.565-19.104-42.669-42.669-42.669h-256zM193.353 832h213.332v-213.334h-213.332v213.334zM129.353 597.334c0-23.565 19.102-42.669 42.667-42.669h256c23.565 0 42.666 19.104 42.666 42.669v256c0 23.562-19.101 42.666-42.666 42.666h-256c-23.564 0-42.667-19.104-42.667-42.666v-256z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2}]},"tags":["workspaces"],"defaultCode":59870,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1137,"name":"workspaces","prevSize":32,"id":225,"code":59870},"setIdx":2,"setId":2,"iconIdx":223},{"icon":{"paths":["M384.509 149.333c0-11.782 9.562-21.333 21.36-21.333h85.446c11.798 0 21.363 9.551 21.363 21.333v106.667h-106.81c-11.798 0-21.36-9.551-21.36-21.333v-85.333z","M512.678 256h106.806c11.798 0 21.36 9.551 21.36 21.333v85.332c0 11.782-9.562 21.334-21.36 21.334h-106.806v-128z","M384.509 405.334c0-11.782 9.562-21.334 21.36-21.334h106.81v128h-106.81c-11.798 0-21.36-9.552-21.36-21.334v-85.331z","M512.678 512h106.806c11.798 0 21.36 9.552 21.36 21.334v106.666h-128.166v-128z","M427.232 640c-23.597 0-42.723 19.104-42.723 42.666v170.669c0 23.562 19.126 42.666 42.723 42.666h170.89c23.597 0 42.723-19.104 42.723-42.666v-213.334h-213.613zM491.315 725.334c-11.798 0-21.36 9.549-21.36 21.331v42.669c0 11.782 9.562 21.331 21.36 21.331h42.723c11.798 0 21.36-9.549 21.36-21.331v-42.669c0-11.782-9.562-21.331-21.36-21.331h-42.723z"],"width":1056,"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"isMulticolor":false,"isMulticolor2":false,"colorPermutations":{"1081141221158162168120320620912282312341243190812456992125519219212552552551291162451452241651699010019902101":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}],"10811412211581621681203206209124314057124319081245699212911624514522416519902101":[{"f":1},{"f":1},{"f":1},{"f":1},{"f":1}],"10811412211581621681201349612032062091211112451212123812431405712431908124569921291162451452241651":[{"f":2},{"f":2},{"f":2},{"f":2},{"f":2}]},"tags":["zip"],"defaultCode":59871,"grid":0},"attrs":[{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"},{"fill":"rgb(108, 114, 122)"}],"properties":{"order":1138,"name":"zip","prevSize":32,"id":226,"code":59871},"setIdx":2,"setId":2,"iconIdx":224},{"icon":{"paths":["M373.437 492.374c25.77-8.39 53.667-8.131 79.376 0.906l19.187 6.752c25.293 8.893 52.963 8.275 77.843-1.718l4.877-1.971c26.989-10.842 56.726-12.432 84.592-4.685 2.832 0.787 5.648 1.674 8.438 2.656 22.342 7.856 41.504 21.35 56.25 38.499 17.84 20.742 29.178 46.848 31.533 75.030 0.304 3.645 0.467 7.328 0.467 11.030v117.126c0 9.936-1.51 19.517-4.314 28.531-4.467 14.371-12.275 27.245-22.435 37.843-2.595 2.704-5.296 5.302-8.189 7.69-2.368 1.952-4.822 3.805-7.376 5.53-5.107 3.453-10.57 6.413-16.31 8.845-11.491 4.861-24.115 7.562-37.376 7.562l-260.938-0.125c-3.277-0.166-6.506-0.515-9.686-1.002-7.949-1.213-15.571-3.398-22.752-6.435-5.741-2.432-11.203-5.392-16.31-8.845-2.55-1.725-5.008-3.578-7.376-5.53-2.893-2.387-5.595-4.986-8.188-7.69-10.162-10.598-17.97-23.472-22.437-37.843-2.803-9.014-4.312-18.595-4.313-28.531v-125.968c0-0.675 0.052-1.357 0.062-2.032 0.487-29.827 11.671-57.741 30.531-79.344 12.578-14.41 28.523-26.032 47.032-33.469 2.576-1.034 5.187-1.958 7.811-2.813zM426.374 552.093c-10.461-2.643-21.446-2.406-31.779 0.688-1.728 0.518-3.443 1.104-5.126 1.782-1.757 0.704-3.466 1.488-5.126 2.342-0.115 0.061-0.227 0.128-0.342 0.189-19.514 10.24-31.997 30.573-32 52.938v125.968c0 17.674 14.326 32 32 32h256c17.674 0 32-14.326 32-32v-117.126c-0.003-23.798-12.39-45.472-32-57.718-0.253-0.157-0.525-0.282-0.781-0.435-1.555-0.944-3.142-1.837-4.781-2.656-0.57-0.288-1.139-0.576-1.718-0.845-2.006-0.934-4.070-1.786-6.189-2.531-3.894-1.37-7.878-2.394-11.907-3.030-10.070-1.597-20.403-0.883-30.218 2.061-1.958 0.589-3.901 1.264-5.811 2.032l-4.877 1.936c-9.818 3.946-19.914 6.973-30.157 9.062-12.81 2.618-25.85 3.763-38.874 3.469l-7.814-0.342c-10.406-0.704-20.774-2.333-30.966-4.906-2.547-0.643-5.072-1.366-7.594-2.125-2.522-0.762-5.037-1.562-7.533-2.438l-19.219-6.749c-1.709-0.602-3.443-1.123-5.187-1.565z","M174.188 458.624c19.051-8.506 40.722-9.024 60.156-1.437l7.906 3.094c8.268 3.229 17.489 2.992 25.594-0.624l0.844-0.378c20.012-8.931 42.773-9.469 63.188-1.498 6.358 2.483 12.262 5.722 17.658 9.562-27.331 11.914-50.085 31.030-66.283 54.688-20.961 6.541-43.62 5.914-64.281-2.157l-7.906-3.062c-3.484-1.36-7.366-1.274-10.781 0.25-5.037 2.25-8.281 7.264-8.281 12.781v49.219c0.001 15.981 12.956 28.938 28.938 28.938h35.125c-0.009 0.675-0.062 1.357-0.062 2.032v61.968h-35.062c-51.328 0-92.937-41.61-92.938-92.938v-49.219c0-30.768 18.093-58.672 46.188-71.219z","M878.406 422.813c11.197 14.163 17.594 31.891 17.594 50.563v102.624c0 53.021-42.979 96-96 96h-32v-53.126l-0.125-6.499c-0.058-1.462-0.246-2.922-0.342-4.374h32.467c17.674 0 32-14.326 32-32v-102.624c0-3.12-0.842-6.109-2.342-8.72 13.494-10.003 27.248-21.219 40.374-33.562 2.797-2.634 5.539-5.45 8.374-8.282z","M512.032 192c-0.106 19.205 0.71 40.743 2.938 64.156-0.986-0.045-1.974-0.156-2.97-0.156-35.347 0-64 28.654-64 64s28.653 64 64 64c14.624 0 28.035-4.995 38.813-13.251 12.131 18.838 26.362 35.45 40.406 49.718-21.798 17.213-49.29 27.533-79.219 27.533-70.691 0-128-57.309-128-128 0-70.692 57.338-128 128.032-128z","M256 224c53.019 0 96 42.981 96 96 0 53.021-42.981 96-96 96s-96-42.979-96-96c0-53.019 42.981-96 96-96zM256 288c-17.673 0-32 14.327-32 32s14.327 32 32 32c17.673 0 32-14.326 32-32s-14.327-32-32-32z","M735.997 96c44.746 0 121.2 10.367 153.827 29.086 4.662 18.723 11.184 75.812 0 154.423-11.187 78.625-107.213 145.092-153.824 168.49-46.614-23.402-142.637-89.869-153.824-168.49-11.184-78.609-4.662-135.699 0-154.423 32.627-18.719 109.072-29.084 153.821-29.086z"],"attrs":[{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["team-shield"],"grid":0},"attrs":[{},{},{},{},{},{}],"properties":{"order":14,"id":227,"name":"team-shield","prevSize":32,"code":59877},"setIdx":2,"setId":2,"iconIdx":225},{"icon":{"paths":["M352 128c17.674 0 32 14.327 32 32v160h142.25c7.789 23.664 19.898 45.082 33.718 64h-175.968v256h256v-177.126c23.274 17.472 46 31.267 64 40.563v136.563h160c17.674 0 32 14.326 32 32s-14.326 32-32 32h-160v160c0 17.674-14.326 32-32 32s-32-14.326-32-32v-160h-256v160c0 17.674-14.326 32-32 32s-32-14.326-32-32v-160h-160c-17.673 0-32-14.326-32-32s14.327-32 32-32h160v-256h-160c-17.673 0-32-14.326-32-32s14.327-32 32-32h160v-160c0-17.673 14.326-32 32-32z","M735.997 96c44.746 0 121.2 10.367 153.827 29.086 4.662 18.723 11.184 75.812 0 154.423-11.187 78.625-107.213 145.092-153.824 168.49-46.614-23.402-142.637-89.869-153.824-168.49-11.184-78.609-4.662-135.699 0-154.423 32.627-18.719 109.072-29.084 153.821-29.086z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["hash-shield"],"grid":0},"attrs":[{},{}],"properties":{"order":15,"id":228,"name":"hash-shield","prevSize":32,"code":59878},"setIdx":2,"setId":2,"iconIdx":226}],"height":1024,"metadata":{"name":"custom"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"custom","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"noie8":true,"ie7":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon","name":"icomoon"},"historySize":50,"showCodes":true,"gridSize":16}}
\ No newline at end of file
diff --git a/app/containers/DirectoryItem/__snapshots__/DirectoryItem.test.tsx.snap b/app/containers/DirectoryItem/__snapshots__/DirectoryItem.test.tsx.snap
index 4807ab3fd9e..3f8cb65864b 100644
--- a/app/containers/DirectoryItem/__snapshots__/DirectoryItem.test.tsx.snap
+++ b/app/containers/DirectoryItem/__snapshots__/DirectoryItem.test.tsx.snap
@@ -18,6 +18,7 @@ exports[`Story Snapshots: CustomStyle should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={1}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -275,6 +276,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={2}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -530,6 +532,7 @@ exports[`Story Snapshots: DirectMessage should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={3}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -754,6 +757,7 @@ exports[`Story Snapshots: LongRoomName should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={4}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -1028,6 +1032,7 @@ exports[`Story Snapshots: OnlyTitle should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={5}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -1194,6 +1199,7 @@ exports[`Story Snapshots: TeamMain should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={6}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -1449,6 +1455,7 @@ exports[`Story Snapshots: WithRightLabel should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={7}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -1723,6 +1730,7 @@ exports[`Story Snapshots: WithoutDescription should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={8}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
diff --git a/app/containers/EmojiPicker/EmojiCategory.tsx b/app/containers/EmojiPicker/EmojiCategory.tsx
index 0773caa6172..e396e4dcf71 100644
--- a/app/containers/EmojiPicker/EmojiCategory.tsx
+++ b/app/containers/EmojiPicker/EmojiCategory.tsx
@@ -1,5 +1,6 @@
 import React, { memo } from 'react';
 import { FlatList } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { type ICustomEmojis, type IEmoji } from '../../definitions/IEmoji';
 import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
@@ -9,6 +10,10 @@ import { emojisByCategory } from '../../lib/constants/emojis';
 import { useAppSelector } from '../../lib/hooks/useAppSelector';
 import { useFrequentlyUsedEmoji } from '../../lib/hooks/useFrequentlyUsedEmoji';
 import { type IEmojiCategoryProps, type TEmojiCategory } from './interfaces';
+import { isAndroid } from '../../lib/methods/helpers';
+
+const ANDROID_BOTTOM_SHEET_EXTRA_OFFSET = 24;
+const ANDROID_BOTTOM_SHEET_CONTENT_PADDING = EMOJI_BUTTON_SIZE + ANDROID_BOTTOM_SHEET_EXTRA_OFFSET;
 
 const useEmojis = (category?: TEmojiCategory) => {
 	const { frequentlyUsed, loaded } = useFrequentlyUsedEmoji();
@@ -38,8 +43,15 @@ const useEmojis = (category?: TEmojiCategory) => {
 	return emojisByCategory[category];
 };
 
-const EmojiCategory = ({ parentWidth, category, emojis, onEmojiSelected }: IEmojiCategoryProps): React.ReactElement | null => {
+const EmojiCategory = ({
+	parentWidth,
+	category,
+	emojis,
+	onEmojiSelected,
+	bottomSheet = false
+}: IEmojiCategoryProps): React.ReactElement | null => {
 	const items = useEmojis(category);
+	const { bottom } = useSafeAreaInsets();
 
 	if (!parentWidth) {
 		return null;
@@ -47,6 +59,7 @@ const EmojiCategory = ({ parentWidth, category, emojis, onEmojiSelected }: IEmoj
 
 	const numColumns = Math.trunc(parentWidth / EMOJI_BUTTON_SIZE);
 	const marginHorizontal = (parentWidth % EMOJI_BUTTON_SIZE) / 2;
+	const contentPaddingBottom = isAndroid && bottomSheet ? ANDROID_BOTTOM_SHEET_CONTENT_PADDING + bottom : undefined;
 
 	const renderItem = ({ item }: { item: IEmoji }) => <PressableEmoji emoji={item} onPress={onEmojiSelected} />;
 
@@ -57,9 +70,13 @@ const EmojiCategory = ({ parentWidth, category, emojis, onEmojiSelected }: IEmoj
 			data={emojis || items}
 			renderItem={renderItem}
 			numColumns={numColumns}
-			contentContainerStyle={{ marginHorizontal }}
+			contentContainerStyle={{
+				marginHorizontal,
+				...(contentPaddingBottom != null && { paddingBottom: contentPaddingBottom })
+			}}
 			{...scrollPersistTaps}
-			keyboardDismissMode={'none'}
+			keyboardDismissMode='none'
+			nestedScrollEnabled
 		/>
 	);
 };
diff --git a/app/containers/EmojiPicker/EmojiSearch.tsx b/app/containers/EmojiPicker/EmojiSearch.tsx
index 3c1cd284ba5..cc110d7e267 100644
--- a/app/containers/EmojiPicker/EmojiSearch.tsx
+++ b/app/containers/EmojiPicker/EmojiSearch.tsx
@@ -3,7 +3,6 @@ import React, { useState } from 'react';
 import { FormTextInput } from '../TextInput/FormTextInput';
 import { useTheme } from '../../theme';
 import I18n from '../../i18n';
-import { isIOS } from '../../lib/methods/helpers';
 import { type IEmojiSearchBarProps } from './interfaces';
 import styles from './styles';
 
@@ -38,7 +37,6 @@ export const EmojiSearch = ({ onBlur, onChangeText, bottomSheet }: IEmojiSearchB
 			onBlur={onBlur}
 			iconRight={'search'}
 			testID='emoji-searchbar-input'
-			bottomSheet={bottomSheet && isIOS}
 			autoFocus={!bottomSheet} // focus on input when not in reaction picker
 		/>
 	);
diff --git a/app/containers/EmojiPicker/PressableEmoji.tsx b/app/containers/EmojiPicker/PressableEmoji.tsx
index 047e9c4d386..f29d1d45c35 100644
--- a/app/containers/EmojiPicker/PressableEmoji.tsx
+++ b/app/containers/EmojiPicker/PressableEmoji.tsx
@@ -1,31 +1,21 @@
 import React from 'react';
-import { Pressable } from 'react-native';
 
-import styles, { EMOJI_BUTTON_SIZE } from './styles';
+import styles from './styles';
 import { type IEmoji } from '../../definitions/IEmoji';
-import { useTheme } from '../../theme';
-import { isIOS } from '../../lib/methods/helpers';
 import { Emoji } from './Emoji';
+import Touch from '../Touch';
 
 export const PressableEmoji = ({ emoji, onPress }: { emoji: IEmoji; onPress: (emoji: IEmoji) => void }): React.ReactElement => {
-	const { colors } = useTheme();
 	const accessibilityLabel = typeof emoji === 'string' ? emoji : emoji.name;
-
 	return (
-		<Pressable
+		<Touch
 			accessible
 			accessibilityLabel={accessibilityLabel}
 			key={typeof emoji === 'string' ? emoji : emoji.name}
 			onPress={() => onPress(emoji)}
-			testID={`emoji-${typeof emoji === 'string' ? emoji : emoji.name}`}
-			android_ripple={{ color: colors.buttonBackgroundSecondaryPress, borderless: true, radius: EMOJI_BUTTON_SIZE / 2 }}
-			style={({ pressed }: { pressed: boolean }) => [
-				styles.emojiButton,
-				{
-					backgroundColor: isIOS && pressed ? colors.buttonBackgroundSecondaryPress : 'transparent'
-				}
-			]}>
+			style={styles.emojiButton}
+			testID={`emoji-${typeof emoji === 'string' ? emoji : emoji.name}`}>
 			<Emoji emoji={emoji} />
-		</Pressable>
+		</Touch>
 	);
 };
diff --git a/app/containers/EmojiPicker/index.tsx b/app/containers/EmojiPicker/index.tsx
index 411ceb16558..75b14aead11 100644
--- a/app/containers/EmojiPicker/index.tsx
+++ b/app/containers/EmojiPicker/index.tsx
@@ -24,7 +24,8 @@ const EmojiPicker = ({
 	onItemClicked,
 	isEmojiKeyboard = false,
 	searching = false,
-	searchedEmojis = []
+	searchedEmojis = [],
+	bottomSheet = false
 }: IEmojiPickerProps): React.ReactElement | null => {
 	const [parentWidth, setParentWidth] = useState(0);
 	const { bottom } = useSafeAreaInsets();
@@ -39,7 +40,12 @@ const EmojiPicker = ({
 	);
 
 	const renderScene = ({ route }: { route: Route }) => (
-		<EmojiCategory parentWidth={parentWidth} onEmojiSelected={handleEmojiSelect} category={route.key as any} />
+		<EmojiCategory
+			parentWidth={parentWidth}
+			onEmojiSelected={handleEmojiSelect}
+			category={route.key as any}
+			bottomSheet={bottomSheet}
+		/>
 	);
 
 	const renderTabItem = (tab: Route, color: string) => (
@@ -63,6 +69,7 @@ const EmojiPicker = ({
 					emojis={searchedEmojis}
 					onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)}
 					parentWidth={parentWidth}
+					bottomSheet={bottomSheet}
 				/>
 			) : (
 				<TabView renderScene={renderScene} renderTabItem={renderTabItem} routes={routes} />
diff --git a/app/containers/EmojiPicker/interfaces.ts b/app/containers/EmojiPicker/interfaces.ts
index 7692b51ba68..1bc5ccf594e 100644
--- a/app/containers/EmojiPicker/interfaces.ts
+++ b/app/containers/EmojiPicker/interfaces.ts
@@ -14,6 +14,7 @@ export interface IEmojiPickerProps {
 	isEmojiKeyboard?: boolean;
 	searching?: boolean;
 	searchedEmojis?: IEmoji[];
+	bottomSheet?: boolean;
 }
 
 export interface IFooterProps {
@@ -28,6 +29,7 @@ export interface IEmojiCategoryProps {
 	parentWidth: number;
 	category?: TEmojiCategory;
 	emojis?: IEmoji[];
+	bottomSheet?: boolean;
 }
 
 export interface IEmojiSearchBarProps {
diff --git a/app/containers/InAppNotification/IncomingCallNotification/index.tsx b/app/containers/InAppNotification/IncomingCallNotification/index.tsx
index 9e7070a822b..65435e92c00 100644
--- a/app/containers/InAppNotification/IncomingCallNotification/index.tsx
+++ b/app/containers/InAppNotification/IncomingCallNotification/index.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { AccessibilityInfo, findNodeHandle, Text, View } from 'react-native';
-import Touchable from 'react-native-platform-touchable';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useDispatch } from 'react-redux';
 import { A11y } from 'react-native-a11y-order';
@@ -16,6 +15,7 @@ import { CallHeader } from '../../CallHeader';
 import { useStyle } from './style';
 import useUserData from '../../../lib/hooks/useUserData';
 import Ringer, { ERingerSounds } from '../../Ringer';
+import Touch from '../../Touch';
 
 export interface INotifierComponent {
 	notification: {
@@ -84,7 +84,7 @@ const IncomingCallHeader = React.memo(
 						</A11y.Index>
 						<View style={styles.row}>
 							<A11y.Index index={3} style={{ flex: 1 }}>
-								<Touchable
+								<Touch
 									hitSlop={BUTTON_HIT_SLOP}
 									onPress={() => {
 										setAudio(!audio);
@@ -93,10 +93,10 @@ const IncomingCallHeader = React.memo(
 									accessibilityLabel={i18n.t('A11y_incoming_call_dismiss')}
 									style={styles.closeButton}>
 									<CustomIcon name='close' size={20} />
-								</Touchable>
+								</Touch>
 							</A11y.Index>
 							<A11y.Index index={4} style={{ flex: 1 }}>
-								<Touchable
+								<Touch
 									hitSlop={BUTTON_HIT_SLOP}
 									onPress={() => {
 										setAudio(!audio);
@@ -105,10 +105,10 @@ const IncomingCallHeader = React.memo(
 									}}
 									style={styles.cancelButton}>
 									<Text style={styles.buttonText}>{i18n.t('decline')}</Text>
-								</Touchable>
+								</Touch>
 							</A11y.Index>
 							<A11y.Index index={5} style={{ flex: 1 }}>
-								<Touchable
+								<Touch
 									hitSlop={BUTTON_HIT_SLOP}
 									onPress={() => {
 										setAudio(!audio);
@@ -117,7 +117,7 @@ const IncomingCallHeader = React.memo(
 									}}
 									style={styles.acceptButton}>
 									<Text style={styles.buttonText}>{i18n.t('accept')}</Text>
-								</Touchable>
+								</Touch>
 							</A11y.Index>
 						</View>
 						{audio ? <Ringer ringer={ERingerSounds.RINGTONE} /> : null}
diff --git a/app/containers/InAppNotification/NotifierComponent.stories.tsx b/app/containers/InAppNotification/NotifierComponent.stories.tsx
new file mode 100644
index 00000000000..bd4f122cbe9
--- /dev/null
+++ b/app/containers/InAppNotification/NotifierComponent.stories.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+
+import { ThemeContext, type TSupportedThemes } from '../../theme';
+import { themes } from '../../lib/constants/colors';
+import NotifierComponent from './NotifierComponent';
+import { SubscriptionType } from '../../definitions';
+import {
+	BASE_ROW_HEIGHT,
+	BASE_ROW_HEIGHT_CONDENSED,
+	ResponsiveLayoutContext
+} from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
+
+const responsiveLayoutProviderValue = {
+	fontScale: 1,
+	fontScaleLimited: 1,
+	isLargeFontScale: false,
+	rowHeight: BASE_ROW_HEIGHT,
+	rowHeightCondensed: BASE_ROW_HEIGHT_CONDENSED,
+	width: 300,
+	height: 800
+};
+
+const baseNotification = {
+	text: 'Hey! How are you doing?',
+	payload: {
+		_id: '1',
+		rid: 'rid-1',
+		name: 'general',
+		sender: { username: 'rocket.cat' },
+		type: SubscriptionType.CHANNEL
+	},
+	title: 'general',
+	avatar: 'rocket.cat'
+};
+
+const Wrapper = ({ children, theme = 'light' }: { children: React.ReactNode; theme?: TSupportedThemes }) => (
+	<ThemeContext.Provider value={{ theme, colors: themes[theme] }}>
+		<ResponsiveLayoutContext.Provider value={responsiveLayoutProviderValue}>{children}</ResponsiveLayoutContext.Provider>
+	</ThemeContext.Provider>
+);
+
+export default {
+	title: 'InAppNotification'
+};
+
+export const DirectMessage = () => (
+	<Wrapper>
+		<NotifierComponent
+			notification={{
+				...baseNotification,
+				payload: {
+					...baseNotification.payload,
+					type: SubscriptionType.DIRECT,
+					sender: { username: 'diego.mello' }
+				},
+				title: 'diego.mello',
+				avatar: 'diego.mello'
+			}}
+		/>
+	</Wrapper>
+);
+export const ChannelMessage = () => (
+	<Wrapper>
+		<NotifierComponent notification={baseNotification} />
+	</Wrapper>
+);
+export const WithDarkTheme = () => (
+	<Wrapper theme='dark'>
+		<NotifierComponent notification={baseNotification} />
+	</Wrapper>
+);
+export const WithBlackTheme = () => (
+	<Wrapper theme='black'>
+		<NotifierComponent notification={baseNotification} />
+	</Wrapper>
+);
diff --git a/app/containers/InAppNotification/NotifierComponent.test.tsx b/app/containers/InAppNotification/NotifierComponent.test.tsx
new file mode 100644
index 00000000000..b6591cded29
--- /dev/null
+++ b/app/containers/InAppNotification/NotifierComponent.test.tsx
@@ -0,0 +1,4 @@
+import { generateSnapshots } from '../../../.rnstorybook/generateSnapshots';
+import * as stories from './NotifierComponent.stories';
+
+generateSnapshots(stories);
diff --git a/app/containers/InAppNotification/NotifierComponent.tsx b/app/containers/InAppNotification/NotifierComponent.tsx
index 0924d94856a..867e0e3bd93 100644
--- a/app/containers/InAppNotification/NotifierComponent.tsx
+++ b/app/containers/InAppNotification/NotifierComponent.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import Touchable from 'react-native-platform-touchable';
 import { connect } from 'react-redux';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -13,6 +12,7 @@ import { goRoom } from '../../lib/methods/helpers/goRoom';
 import { type IApplicationState, type ISubscription, type SubscriptionType } from '../../definitions';
 import { hideNotification } from '../../lib/methods/helpers/notifications';
 import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
+import Touch from '../Touch';
 
 export interface INotifierComponent {
 	notification: {
@@ -46,9 +46,6 @@ const styles = StyleSheet.create({
 		flexDirection: 'row',
 		alignItems: 'center'
 	},
-	inner: {
-		flex: 1
-	},
 	avatar: {
 		marginRight: 10
 	},
@@ -109,15 +106,10 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
 					height: rowHeight
 				}
 			]}>
-			<Touchable
-				style={styles.content}
-				onPress={onPress}
-				hitSlop={BUTTON_HIT_SLOP}
-				background={Touchable.SelectableBackgroundBorderless()}
-				testID={`in-app-notification-${text}`}>
+			<Touch style={styles.content} onPress={onPress} hitSlop={BUTTON_HIT_SLOP} testID={`in-app-notification-${text}`}>
 				<>
 					<Avatar text={avatar} size={AVATAR_SIZE} type={type} rid={rid} style={styles.avatar} />
-					<View style={styles.inner}>
+					<View>
 						<Text style={[styles.roomName, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
 							{title}
 						</Text>
@@ -126,10 +118,10 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
 						</Text>
 					</View>
 				</>
-			</Touchable>
-			<Touchable onPress={hideNotification} hitSlop={BUTTON_HIT_SLOP} background={Touchable.SelectableBackgroundBorderless()}>
+			</Touch>
+			<Touch onPress={hideNotification} hitSlop={BUTTON_HIT_SLOP}>
 				<CustomIcon name='close' size={20} style={styles.close} />
-			</Touchable>
+			</Touch>
 		</View>
 	);
 });
diff --git a/app/containers/InAppNotification/__snapshots__/NotifierComponent.test.tsx.snap b/app/containers/InAppNotification/__snapshots__/NotifierComponent.test.tsx.snap
new file mode 100644
index 00000000000..8d1472aa1b2
--- /dev/null
+++ b/app/containers/InAppNotification/__snapshots__/NotifierComponent.test.tsx.snap
@@ -0,0 +1,1173 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Story Snapshots: ChannelMessage should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "borderRadius": 4,
+        "borderWidth": 0.5,
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "marginHorizontal": 10,
+        "paddingHorizontal": 14,
+      },
+      false,
+      {
+        "backgroundColor": "#FFFFFF",
+        "borderColor": "#CBCED1",
+        "height": 75,
+        "marginTop": 0,
+      },
+    ]
+  }
+>
+  <RNGestureHandlerButton
+    activeOpacity={1}
+    collapsable={false}
+    delayLongPress={600}
+    enabled={true}
+    handlerTag={1}
+    handlerType="NativeViewGestureHandler"
+    hitSlop={
+      {
+        "bottom": 12,
+        "left": 12,
+        "right": 12,
+        "top": 12,
+      }
+    }
+    innerRef={null}
+    onActiveStateChange={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onPress={[Function]}
+    rippleColor="#E4E7EA"
+    style={
+      [
+        {
+          "backgroundColor": undefined,
+          "borderRadius": undefined,
+          "margin": undefined,
+          "marginBottom": undefined,
+          "marginEnd": undefined,
+          "marginHorizontal": undefined,
+          "marginLeft": undefined,
+          "marginRight": undefined,
+          "marginStart": undefined,
+          "marginTop": undefined,
+          "marginVertical": undefined,
+        },
+        {
+          "cursor": undefined,
+        },
+      ]
+    }
+    testID="in-app-notification-Hey! How are you doing?"
+    underlayColor="#E4E7EA"
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#E4E7EA",
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "bottom": 0,
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    />
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        accessibilityLabel="rocket.cat's avatar"
+        accessible={true}
+        style={
+          [
+            {
+              "borderRadius": 4,
+              "height": 48,
+              "width": 48,
+            },
+            {
+              "marginRight": 10,
+            },
+          ]
+        }
+        testID="avatar"
+      >
+        <ViewManagerAdapter_ExpoImage
+          borderRadius={4}
+          containerViewRef={"[React.ref]"}
+          contentFit="cover"
+          contentPosition={
+            {
+              "left": "50%",
+              "top": "50%",
+            }
+          }
+          height={48}
+          nativeViewRef={"[React.ref]"}
+          onError={[Function]}
+          onLoad={[Function]}
+          onLoadStart={[Function]}
+          onProgress={[Function]}
+          placeholder={[]}
+          priority="high"
+          source={
+            [
+              {
+                "headers": {
+                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                },
+                "uri": "https://open.rocket.chat/avatar/room/rid-1?format=png&size=96",
+              },
+            ]
+          }
+          style={
+            {
+              "borderRadius": 4,
+              "height": 48,
+              "width": 48,
+            }
+          }
+          transition={null}
+          width={48}
+        />
+      </View>
+      <View>
+        <Text
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 17,
+                "fontWeight": "500",
+                "lineHeight": 20,
+                "textAlign": "left",
+              },
+              {
+                "color": "#1F2329",
+              },
+            ]
+          }
+        >
+          general
+        </Text>
+        <Text
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 14,
+                "fontWeight": "400",
+                "lineHeight": 17,
+                "textAlign": "left",
+              },
+              {
+                "color": "#1F2329",
+              },
+            ]
+          }
+        >
+          Hey! How are you doing?
+        </Text>
+      </View>
+    </View>
+  </RNGestureHandlerButton>
+  <RNGestureHandlerButton
+    activeOpacity={1}
+    collapsable={false}
+    delayLongPress={600}
+    enabled={true}
+    handlerTag={2}
+    handlerType="NativeViewGestureHandler"
+    hitSlop={
+      {
+        "bottom": 12,
+        "left": 12,
+        "right": 12,
+        "top": 12,
+      }
+    }
+    innerRef={null}
+    onActiveStateChange={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onPress={[Function]}
+    rippleColor="#E4E7EA"
+    style={
+      [
+        {
+          "backgroundColor": undefined,
+          "borderRadius": undefined,
+          "margin": undefined,
+          "marginBottom": undefined,
+          "marginEnd": undefined,
+          "marginHorizontal": undefined,
+          "marginLeft": undefined,
+          "marginRight": undefined,
+          "marginStart": undefined,
+          "marginTop": undefined,
+          "marginVertical": undefined,
+        },
+        {
+          "cursor": undefined,
+        },
+      ]
+    }
+    underlayColor="#E4E7EA"
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#E4E7EA",
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "bottom": 0,
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    />
+    <View
+      style={{}}
+    >
+      <Text
+        allowFontScaling={false}
+        selectable={false}
+        style={
+          [
+            {
+              "color": "#2F343D",
+              "fontSize": 20,
+            },
+            [
+              {
+                "lineHeight": 20,
+              },
+              {
+                "marginLeft": 10,
+              },
+            ],
+            {
+              "fontFamily": "custom",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            {},
+          ]
+        }
+      >
+        
+      </Text>
+    </View>
+  </RNGestureHandlerButton>
+</View>
+`;
+
+exports[`Story Snapshots: DirectMessage should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "borderRadius": 4,
+        "borderWidth": 0.5,
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "marginHorizontal": 10,
+        "paddingHorizontal": 14,
+      },
+      false,
+      {
+        "backgroundColor": "#FFFFFF",
+        "borderColor": "#CBCED1",
+        "height": 75,
+        "marginTop": 0,
+      },
+    ]
+  }
+>
+  <RNGestureHandlerButton
+    activeOpacity={1}
+    collapsable={false}
+    delayLongPress={600}
+    enabled={true}
+    handlerTag={3}
+    handlerType="NativeViewGestureHandler"
+    hitSlop={
+      {
+        "bottom": 12,
+        "left": 12,
+        "right": 12,
+        "top": 12,
+      }
+    }
+    innerRef={null}
+    onActiveStateChange={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onPress={[Function]}
+    rippleColor="#E4E7EA"
+    style={
+      [
+        {
+          "backgroundColor": undefined,
+          "borderRadius": undefined,
+          "margin": undefined,
+          "marginBottom": undefined,
+          "marginEnd": undefined,
+          "marginHorizontal": undefined,
+          "marginLeft": undefined,
+          "marginRight": undefined,
+          "marginStart": undefined,
+          "marginTop": undefined,
+          "marginVertical": undefined,
+        },
+        {
+          "cursor": undefined,
+        },
+      ]
+    }
+    testID="in-app-notification-Hey! How are you doing?"
+    underlayColor="#E4E7EA"
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#E4E7EA",
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "bottom": 0,
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    />
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        accessibilityLabel="diego.mello's avatar"
+        accessible={true}
+        style={
+          [
+            {
+              "borderRadius": 4,
+              "height": 48,
+              "width": 48,
+            },
+            {
+              "marginRight": 10,
+            },
+          ]
+        }
+        testID="avatar"
+      >
+        <ViewManagerAdapter_ExpoImage
+          borderRadius={4}
+          containerViewRef={"[React.ref]"}
+          contentFit="cover"
+          contentPosition={
+            {
+              "left": "50%",
+              "top": "50%",
+            }
+          }
+          height={48}
+          nativeViewRef={"[React.ref]"}
+          onError={[Function]}
+          onLoad={[Function]}
+          onLoadStart={[Function]}
+          onProgress={[Function]}
+          placeholder={[]}
+          priority="high"
+          source={
+            [
+              {
+                "headers": {
+                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                },
+                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=96",
+              },
+            ]
+          }
+          style={
+            {
+              "borderRadius": 4,
+              "height": 48,
+              "width": 48,
+            }
+          }
+          transition={null}
+          width={48}
+        />
+      </View>
+      <View>
+        <Text
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 17,
+                "fontWeight": "500",
+                "lineHeight": 20,
+                "textAlign": "left",
+              },
+              {
+                "color": "#1F2329",
+              },
+            ]
+          }
+        >
+          diego.mello
+        </Text>
+        <Text
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 14,
+                "fontWeight": "400",
+                "lineHeight": 17,
+                "textAlign": "left",
+              },
+              {
+                "color": "#1F2329",
+              },
+            ]
+          }
+        >
+          Hey! How are you doing?
+        </Text>
+      </View>
+    </View>
+  </RNGestureHandlerButton>
+  <RNGestureHandlerButton
+    activeOpacity={1}
+    collapsable={false}
+    delayLongPress={600}
+    enabled={true}
+    handlerTag={4}
+    handlerType="NativeViewGestureHandler"
+    hitSlop={
+      {
+        "bottom": 12,
+        "left": 12,
+        "right": 12,
+        "top": 12,
+      }
+    }
+    innerRef={null}
+    onActiveStateChange={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onPress={[Function]}
+    rippleColor="#E4E7EA"
+    style={
+      [
+        {
+          "backgroundColor": undefined,
+          "borderRadius": undefined,
+          "margin": undefined,
+          "marginBottom": undefined,
+          "marginEnd": undefined,
+          "marginHorizontal": undefined,
+          "marginLeft": undefined,
+          "marginRight": undefined,
+          "marginStart": undefined,
+          "marginTop": undefined,
+          "marginVertical": undefined,
+        },
+        {
+          "cursor": undefined,
+        },
+      ]
+    }
+    underlayColor="#E4E7EA"
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#E4E7EA",
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "bottom": 0,
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    />
+    <View
+      style={{}}
+    >
+      <Text
+        allowFontScaling={false}
+        selectable={false}
+        style={
+          [
+            {
+              "color": "#2F343D",
+              "fontSize": 20,
+            },
+            [
+              {
+                "lineHeight": 20,
+              },
+              {
+                "marginLeft": 10,
+              },
+            ],
+            {
+              "fontFamily": "custom",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            {},
+          ]
+        }
+      >
+        
+      </Text>
+    </View>
+  </RNGestureHandlerButton>
+</View>
+`;
+
+exports[`Story Snapshots: WithBlackTheme should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "borderRadius": 4,
+        "borderWidth": 0.5,
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "marginHorizontal": 10,
+        "paddingHorizontal": 14,
+      },
+      false,
+      {
+        "backgroundColor": "#0d0d0d",
+        "borderColor": "#1f2329",
+        "height": 75,
+        "marginTop": 0,
+      },
+    ]
+  }
+>
+  <RNGestureHandlerButton
+    activeOpacity={1}
+    collapsable={false}
+    delayLongPress={600}
+    enabled={true}
+    handlerTag={5}
+    handlerType="NativeViewGestureHandler"
+    hitSlop={
+      {
+        "bottom": 12,
+        "left": 12,
+        "right": 12,
+        "top": 12,
+      }
+    }
+    innerRef={null}
+    onActiveStateChange={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onPress={[Function]}
+    rippleColor="#16181a"
+    style={
+      [
+        {
+          "backgroundColor": undefined,
+          "borderRadius": undefined,
+          "margin": undefined,
+          "marginBottom": undefined,
+          "marginEnd": undefined,
+          "marginHorizontal": undefined,
+          "marginLeft": undefined,
+          "marginRight": undefined,
+          "marginStart": undefined,
+          "marginTop": undefined,
+          "marginVertical": undefined,
+        },
+        {
+          "cursor": undefined,
+        },
+      ]
+    }
+    testID="in-app-notification-Hey! How are you doing?"
+    underlayColor="#16181a"
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#16181a",
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "bottom": 0,
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    />
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        accessibilityLabel="rocket.cat's avatar"
+        accessible={true}
+        style={
+          [
+            {
+              "borderRadius": 4,
+              "height": 48,
+              "width": 48,
+            },
+            {
+              "marginRight": 10,
+            },
+          ]
+        }
+        testID="avatar"
+      >
+        <ViewManagerAdapter_ExpoImage
+          borderRadius={4}
+          containerViewRef={"[React.ref]"}
+          contentFit="cover"
+          contentPosition={
+            {
+              "left": "50%",
+              "top": "50%",
+            }
+          }
+          height={48}
+          nativeViewRef={"[React.ref]"}
+          onError={[Function]}
+          onLoad={[Function]}
+          onLoadStart={[Function]}
+          onProgress={[Function]}
+          placeholder={[]}
+          priority="high"
+          source={
+            [
+              {
+                "headers": {
+                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                },
+                "uri": "https://open.rocket.chat/avatar/room/rid-1?format=png&size=96",
+              },
+            ]
+          }
+          style={
+            {
+              "borderRadius": 4,
+              "height": 48,
+              "width": 48,
+            }
+          }
+          transition={null}
+          width={48}
+        />
+      </View>
+      <View>
+        <Text
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 17,
+                "fontWeight": "500",
+                "lineHeight": 20,
+                "textAlign": "left",
+              },
+              {
+                "color": "#F2F3F5",
+              },
+            ]
+          }
+        >
+          general
+        </Text>
+        <Text
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 14,
+                "fontWeight": "400",
+                "lineHeight": 17,
+                "textAlign": "left",
+              },
+              {
+                "color": "#F2F3F5",
+              },
+            ]
+          }
+        >
+          Hey! How are you doing?
+        </Text>
+      </View>
+    </View>
+  </RNGestureHandlerButton>
+  <RNGestureHandlerButton
+    activeOpacity={1}
+    collapsable={false}
+    delayLongPress={600}
+    enabled={true}
+    handlerTag={6}
+    handlerType="NativeViewGestureHandler"
+    hitSlop={
+      {
+        "bottom": 12,
+        "left": 12,
+        "right": 12,
+        "top": 12,
+      }
+    }
+    innerRef={null}
+    onActiveStateChange={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onPress={[Function]}
+    rippleColor="#16181a"
+    style={
+      [
+        {
+          "backgroundColor": undefined,
+          "borderRadius": undefined,
+          "margin": undefined,
+          "marginBottom": undefined,
+          "marginEnd": undefined,
+          "marginHorizontal": undefined,
+          "marginLeft": undefined,
+          "marginRight": undefined,
+          "marginStart": undefined,
+          "marginTop": undefined,
+          "marginVertical": undefined,
+        },
+        {
+          "cursor": undefined,
+        },
+      ]
+    }
+    underlayColor="#16181a"
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#16181a",
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "bottom": 0,
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    />
+    <View
+      style={{}}
+    >
+      <Text
+        allowFontScaling={false}
+        selectable={false}
+        style={
+          [
+            {
+              "color": "#E4E7EA",
+              "fontSize": 20,
+            },
+            [
+              {
+                "lineHeight": 20,
+              },
+              {
+                "marginLeft": 10,
+              },
+            ],
+            {
+              "fontFamily": "custom",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            {},
+          ]
+        }
+      >
+        
+      </Text>
+    </View>
+  </RNGestureHandlerButton>
+</View>
+`;
+
+exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "borderRadius": 4,
+        "borderWidth": 0.5,
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "marginHorizontal": 10,
+        "paddingHorizontal": 14,
+      },
+      false,
+      {
+        "backgroundColor": "#262931",
+        "borderColor": "#333842",
+        "height": 75,
+        "marginTop": 0,
+      },
+    ]
+  }
+>
+  <RNGestureHandlerButton
+    activeOpacity={1}
+    collapsable={false}
+    delayLongPress={600}
+    enabled={true}
+    handlerTag={7}
+    handlerType="NativeViewGestureHandler"
+    hitSlop={
+      {
+        "bottom": 12,
+        "left": 12,
+        "right": 12,
+        "top": 12,
+      }
+    }
+    innerRef={null}
+    onActiveStateChange={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onPress={[Function]}
+    rippleColor="#2D3039"
+    style={
+      [
+        {
+          "backgroundColor": undefined,
+          "borderRadius": undefined,
+          "margin": undefined,
+          "marginBottom": undefined,
+          "marginEnd": undefined,
+          "marginHorizontal": undefined,
+          "marginLeft": undefined,
+          "marginRight": undefined,
+          "marginStart": undefined,
+          "marginTop": undefined,
+          "marginVertical": undefined,
+        },
+        {
+          "cursor": undefined,
+        },
+      ]
+    }
+    testID="in-app-notification-Hey! How are you doing?"
+    underlayColor="#2D3039"
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#2D3039",
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "bottom": 0,
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    />
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        accessibilityLabel="rocket.cat's avatar"
+        accessible={true}
+        style={
+          [
+            {
+              "borderRadius": 4,
+              "height": 48,
+              "width": 48,
+            },
+            {
+              "marginRight": 10,
+            },
+          ]
+        }
+        testID="avatar"
+      >
+        <ViewManagerAdapter_ExpoImage
+          borderRadius={4}
+          containerViewRef={"[React.ref]"}
+          contentFit="cover"
+          contentPosition={
+            {
+              "left": "50%",
+              "top": "50%",
+            }
+          }
+          height={48}
+          nativeViewRef={"[React.ref]"}
+          onError={[Function]}
+          onLoad={[Function]}
+          onLoadStart={[Function]}
+          onProgress={[Function]}
+          placeholder={[]}
+          priority="high"
+          source={
+            [
+              {
+                "headers": {
+                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                },
+                "uri": "https://open.rocket.chat/avatar/room/rid-1?format=png&size=96",
+              },
+            ]
+          }
+          style={
+            {
+              "borderRadius": 4,
+              "height": 48,
+              "width": 48,
+            }
+          }
+          transition={null}
+          width={48}
+        />
+      </View>
+      <View>
+        <Text
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 17,
+                "fontWeight": "500",
+                "lineHeight": 20,
+                "textAlign": "left",
+              },
+              {
+                "color": "#F2F3F5",
+              },
+            ]
+          }
+        >
+          general
+        </Text>
+        <Text
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 14,
+                "fontWeight": "400",
+                "lineHeight": 17,
+                "textAlign": "left",
+              },
+              {
+                "color": "#F2F3F5",
+              },
+            ]
+          }
+        >
+          Hey! How are you doing?
+        </Text>
+      </View>
+    </View>
+  </RNGestureHandlerButton>
+  <RNGestureHandlerButton
+    activeOpacity={1}
+    collapsable={false}
+    delayLongPress={600}
+    enabled={true}
+    handlerTag={8}
+    handlerType="NativeViewGestureHandler"
+    hitSlop={
+      {
+        "bottom": 12,
+        "left": 12,
+        "right": 12,
+        "top": 12,
+      }
+    }
+    innerRef={null}
+    onActiveStateChange={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onPress={[Function]}
+    rippleColor="#2D3039"
+    style={
+      [
+        {
+          "backgroundColor": undefined,
+          "borderRadius": undefined,
+          "margin": undefined,
+          "marginBottom": undefined,
+          "marginEnd": undefined,
+          "marginHorizontal": undefined,
+          "marginLeft": undefined,
+          "marginRight": undefined,
+          "marginStart": undefined,
+          "marginTop": undefined,
+          "marginVertical": undefined,
+        },
+        {
+          "cursor": undefined,
+        },
+      ]
+    }
+    underlayColor="#2D3039"
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#2D3039",
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "bottom": 0,
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    />
+    <View
+      style={{}}
+    >
+      <Text
+        allowFontScaling={false}
+        selectable={false}
+        style={
+          [
+            {
+              "color": "#E4E7EA",
+              "fontSize": 20,
+            },
+            [
+              {
+                "lineHeight": 20,
+              },
+              {
+                "marginLeft": 10,
+              },
+            ],
+            {
+              "fontFamily": "custom",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            {},
+          ]
+        }
+      >
+        
+      </Text>
+    </View>
+  </RNGestureHandlerButton>
+</View>
+`;
diff --git a/app/containers/List/ListContainer.tsx b/app/containers/List/ListContainer.tsx
index f882b54f67e..798ae5f50cc 100644
--- a/app/containers/List/ListContainer.tsx
+++ b/app/containers/List/ListContainer.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
+import { ScrollView, type ScrollViewProps, StyleSheet } from 'react-native';
 
 import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
 
@@ -9,7 +9,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IListContainer {
+interface IListContainer extends ScrollViewProps {
 	children: (React.ReactElement | null)[] | React.ReactElement | null;
 	testID?: string;
 }
diff --git a/app/containers/List/ListRadio.tsx b/app/containers/List/ListRadio.tsx
index 58e044bd378..5ddb959ae72 100644
--- a/app/containers/List/ListRadio.tsx
+++ b/app/containers/List/ListRadio.tsx
@@ -10,7 +10,7 @@ interface IListRadio extends IListItem {
 	isSelected: boolean;
 }
 
-const ListRadio = ({ value, isSelected, ...rest }: IListRadio) => {
+const ListRadio = ({ value: _, isSelected, ...rest }: IListRadio) => {
 	const { colors } = useTheme();
 
 	const iconName = isSelected ? 'radio-checked' : 'radio-unchecked';
diff --git a/app/containers/List/__snapshots__/List.test.tsx.snap b/app/containers/List/__snapshots__/List.test.tsx.snap
index 6414017d4fd..2be6919ee62 100644
--- a/app/containers/List/__snapshots__/List.test.tsx.snap
+++ b/app/containers/List/__snapshots__/List.test.tsx.snap
@@ -1105,7 +1105,7 @@ exports[`Story Snapshots: Pressable should match snapshot 1`] = `
       activeOpacity={1}
       collapsable={false}
       delayLongPress={600}
-      enabled={false}
+      enabled={true}
       handlerTag={3}
       handlerType="NativeViewGestureHandler"
       innerRef={null}
@@ -3685,7 +3685,7 @@ exports[`Story Snapshots: WithBiggerFont should match snapshot 1`] = `
           activeOpacity={1}
           collapsable={false}
           delayLongPress={600}
-          enabled={false}
+          enabled={true}
           handlerTag={9}
           handlerType="NativeViewGestureHandler"
           innerRef={null}
@@ -4256,7 +4256,7 @@ exports[`Story Snapshots: WithBiggerFont should match snapshot 1`] = `
           activeOpacity={1}
           collapsable={false}
           delayLongPress={600}
-          enabled={false}
+          enabled={true}
           handlerTag={11}
           handlerType="NativeViewGestureHandler"
           innerRef={null}
@@ -4869,7 +4869,7 @@ exports[`Story Snapshots: WithBlackTheme should match snapshot 1`] = `
           activeOpacity={1}
           collapsable={false}
           delayLongPress={600}
-          enabled={false}
+          enabled={true}
           handlerTag={13}
           handlerType="NativeViewGestureHandler"
           innerRef={null}
@@ -5440,7 +5440,7 @@ exports[`Story Snapshots: WithBlackTheme should match snapshot 1`] = `
           activeOpacity={1}
           collapsable={false}
           delayLongPress={600}
-          enabled={false}
+          enabled={true}
           handlerTag={15}
           handlerType="NativeViewGestureHandler"
           innerRef={null}
@@ -6299,7 +6299,7 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
           activeOpacity={1}
           collapsable={false}
           delayLongPress={600}
-          enabled={false}
+          enabled={true}
           handlerTag={18}
           handlerType="NativeViewGestureHandler"
           innerRef={null}
@@ -6870,7 +6870,7 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
           activeOpacity={1}
           collapsable={false}
           delayLongPress={600}
-          enabled={false}
+          enabled={true}
           handlerTag={20}
           handlerType="NativeViewGestureHandler"
           innerRef={null}
@@ -9115,7 +9115,7 @@ exports[`Story Snapshots: WithSmallFont should match snapshot 1`] = `
           activeOpacity={1}
           collapsable={false}
           delayLongPress={600}
-          enabled={false}
+          enabled={true}
           handlerTag={22}
           handlerType="NativeViewGestureHandler"
           innerRef={null}
@@ -9686,7 +9686,7 @@ exports[`Story Snapshots: WithSmallFont should match snapshot 1`] = `
           activeOpacity={1}
           collapsable={false}
           delayLongPress={600}
-          enabled={false}
+          enabled={true}
           handlerTag={24}
           handlerType="NativeViewGestureHandler"
           innerRef={null}
diff --git a/app/containers/LoginServices/__snapshots__/LoginServices.test.tsx.snap b/app/containers/LoginServices/__snapshots__/LoginServices.test.tsx.snap
index 1f887957e46..e36536132bb 100644
--- a/app/containers/LoginServices/__snapshots__/LoginServices.test.tsx.snap
+++ b/app/containers/LoginServices/__snapshots__/LoginServices.test.tsx.snap
@@ -2,47 +2,44 @@
 
 exports[`Story Snapshots: Separators should match snapshot 1`] = `
 [
-  <View
+  <RNGestureHandlerButton
     accessibilityLabel="More options"
     accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
+    collapsable={false}
+    enabled={true}
+    hitSlop={
       {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
       }
     }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+    rippleColor="transparent"
     style={
-      {
-        "backgroundColor": "#E4E7EA",
-        "borderRadius": 4,
-        "justifyContent": "center",
-        "marginBottom": 0,
-        "opacity": 1,
-        "paddingHorizontal": 16,
-        "paddingVertical": 14,
-      }
+      [
+        {},
+        [
+          {
+            "justifyContent": "center",
+            "paddingHorizontal": 16,
+            "paddingVertical": 14,
+          },
+          {
+            "borderRadius": 4,
+            "marginBottom": 12,
+          },
+          {
+            "backgroundColor": "#E4E7EA",
+          },
+          {},
+          {
+            "marginBottom": 0,
+          },
+        ],
+      ]
     }
+    testOnly_onPress={[Function]}
   >
     <Text
       style={
@@ -63,7 +60,7 @@ exports[`Story Snapshots: Separators should match snapshot 1`] = `
     >
       More options
     </Text>
-  </View>,
+  </RNGestureHandlerButton>,
   <View
     accessible={true}
     style={
@@ -120,47 +117,44 @@ exports[`Story Snapshots: Separators should match snapshot 1`] = `
       }
     />
   </View>,
-  <View
+  <RNGestureHandlerButton
     accessibilityLabel="Less options"
     accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
+    collapsable={false}
+    enabled={true}
+    hitSlop={
       {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
       }
     }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+    rippleColor="transparent"
     style={
-      {
-        "backgroundColor": "#E4E7EA",
-        "borderRadius": 4,
-        "justifyContent": "center",
-        "marginBottom": 0,
-        "opacity": 1,
-        "paddingHorizontal": 16,
-        "paddingVertical": 14,
-      }
+      [
+        {},
+        [
+          {
+            "justifyContent": "center",
+            "paddingHorizontal": 16,
+            "paddingVertical": 14,
+          },
+          {
+            "borderRadius": 4,
+            "marginBottom": 12,
+          },
+          {
+            "backgroundColor": "#E4E7EA",
+          },
+          {},
+          {
+            "marginBottom": 0,
+          },
+        ],
+      ]
     }
+    testOnly_onPress={[Function]}
   >
     <Text
       style={
@@ -181,7 +175,7 @@ exports[`Story Snapshots: Separators should match snapshot 1`] = `
     >
       Less options
     </Text>
-  </View>,
+  </RNGestureHandlerButton>,
   <View
     accessible={true}
     style={
@@ -247,7 +241,8 @@ exports[`Story Snapshots: ServiceList should match snapshot 1`] = `
     activeOpacity={0.5}
     collapsable={false}
     delayLongPress={600}
-    handlerTag={1}
+    enabled={true}
+    handlerTag={7}
     handlerType="NativeViewGestureHandler"
     innerRef={null}
     onActiveStateChange={[Function]}
@@ -382,7 +377,8 @@ exports[`Story Snapshots: ServiceList should match snapshot 1`] = `
     activeOpacity={0.5}
     collapsable={false}
     delayLongPress={600}
-    handlerTag={2}
+    enabled={true}
+    handlerTag={8}
     handlerType="NativeViewGestureHandler"
     innerRef={null}
     onActiveStateChange={[Function]}
@@ -517,7 +513,8 @@ exports[`Story Snapshots: ServiceList should match snapshot 1`] = `
     activeOpacity={0.5}
     collapsable={false}
     delayLongPress={600}
-    handlerTag={3}
+    enabled={true}
+    handlerTag={9}
     handlerType="NativeViewGestureHandler"
     innerRef={null}
     onActiveStateChange={[Function]}
@@ -652,7 +649,8 @@ exports[`Story Snapshots: ServiceList should match snapshot 1`] = `
     activeOpacity={0.5}
     collapsable={false}
     delayLongPress={600}
-    handlerTag={4}
+    enabled={true}
+    handlerTag={10}
     handlerType="NativeViewGestureHandler"
     innerRef={null}
     onActiveStateChange={[Function]}
diff --git a/app/containers/MessageActions/index.tsx b/app/containers/MessageActions/index.tsx
index 466a70ce510..a10a159e6e1 100644
--- a/app/containers/MessageActions/index.tsx
+++ b/app/containers/MessageActions/index.tsx
@@ -404,7 +404,8 @@ const MessageActions = React.memo(
 						title: I18n.t('Edit'),
 						icon: 'edit',
 						onPress: () => handleEdit(message.id),
-						enabled: isEditAllowed
+						enabled: isEditAllowed,
+						testID: 'message-actions-edit'
 					});
 				}
 
@@ -414,7 +415,8 @@ const MessageActions = React.memo(
 					options.push({
 						title: I18n.t('Jump_to_message'),
 						icon: 'jump-to-message',
-						onPress: () => jumpToMessage(quoteMessageLink, true)
+						onPress: () => jumpToMessage(quoteMessageLink, true),
+						testID: 'message-actions-jump-to-message'
 					});
 				}
 
@@ -423,7 +425,8 @@ const MessageActions = React.memo(
 					options.push({
 						title: I18n.t('Quote'),
 						icon: 'quote',
-						onPress: () => handleQuote(message.id)
+						onPress: () => handleQuote(message.id),
+						testID: 'message-actions-quote'
 					});
 				}
 
@@ -432,7 +435,8 @@ const MessageActions = React.memo(
 					options.push({
 						title: I18n.t('Reply_in_Thread'),
 						icon: 'threads',
-						onPress: () => handleReply(message.id)
+						onPress: () => handleReply(message.id),
+						testID: 'message-actions-reply-in-thread'
 					});
 				}
 
@@ -443,7 +447,8 @@ const MessageActions = React.memo(
 						icon: 'arrow-back',
 						onPress: () => handleReplyInDM(message),
 						enabled: permissions.hasCreateDirectMessagePermission && !room.abacAttributes,
-						disabledReason: room.abacAttributes && I18n.t('ABAC_disabled_action_reason')
+						disabledReason: room.abacAttributes && I18n.t('ABAC_disabled_action_reason'),
+						testID: 'message-actions-reply-in-dm'
 					});
 				}
 
@@ -452,7 +457,8 @@ const MessageActions = React.memo(
 					title: I18n.t('Start_a_Discussion'),
 					icon: 'discussions',
 					onPress: () => handleCreateDiscussion(message),
-					enabled: permissions.hasCreateDiscussionOtherUserPermission
+					enabled: permissions.hasCreateDiscussionOtherUserPermission,
+					testID: 'message-actions-create-discussion'
 				});
 
 				// Forward
@@ -462,7 +468,8 @@ const MessageActions = React.memo(
 						icon: 'arrow-forward',
 						onPress: () => handleShareMessage(message),
 						enabled: !room.abacAttributes,
-						disabledReason: room.abacAttributes && I18n.t('ABAC_disabled_action_reason')
+						disabledReason: room.abacAttributes && I18n.t('ABAC_disabled_action_reason'),
+						testID: 'message-actions-forward'
 					});
 				}
 
@@ -472,7 +479,8 @@ const MessageActions = React.memo(
 					icon: 'link',
 					onPress: () => handlePermalink(message),
 					enabled: !room.abacAttributes,
-					disabledReason: room.abacAttributes && I18n.t('ABAC_disabled_action_reason')
+					disabledReason: room.abacAttributes && I18n.t('ABAC_disabled_action_reason'),
+					testID: 'message-actions-get-link'
 				});
 
 				// Copy
@@ -480,7 +488,8 @@ const MessageActions = React.memo(
 					options.push({
 						title: I18n.t('Copy'),
 						icon: 'copy',
-						onPress: () => handleCopy(message)
+						onPress: () => handleCopy(message),
+						testID: 'message-actions-copy'
 					});
 				}
 
@@ -488,7 +497,8 @@ const MessageActions = React.memo(
 				options.push({
 					title: I18n.t('Share'),
 					icon: 'share',
-					onPress: () => handleShare(message)
+					onPress: () => handleShare(message),
+					testID: 'message-actions-share'
 				});
 
 				// Pin
@@ -497,7 +507,8 @@ const MessageActions = React.memo(
 						title: I18n.t(message.pinned ? 'Unpin' : 'Pin'),
 						icon: 'pin',
 						onPress: () => handlePin(message),
-						enabled: permissions?.hasPinPermission
+						enabled: permissions?.hasPinPermission,
+						testID: `message-actions-${message.pinned ? 'unpin' : 'pin'}`
 					});
 				}
 
@@ -506,7 +517,8 @@ const MessageActions = React.memo(
 					options.push({
 						title: I18n.t(message.starred ? 'Unstar' : 'Star'),
 						icon: message.starred ? 'star-filled' : 'star',
-						onPress: () => handleStar(message.id, message.starred || false)
+						onPress: () => handleStar(message.id, message.starred || false),
+						testID: `message-actions-${message.starred ? 'unstar' : 'star'}`
 					});
 				}
 
@@ -515,7 +527,8 @@ const MessageActions = React.memo(
 					options.push({
 						title: I18n.t('Mark_unread'),
 						icon: 'flag',
-						onPress: () => handleUnread(message)
+						onPress: () => handleUnread(message),
+						testID: 'message-actions-mark-unread'
 					});
 				}
 
@@ -524,7 +537,8 @@ const MessageActions = React.memo(
 					options.push({
 						title: I18n.t('Read_Receipt'),
 						icon: 'info',
-						onPress: () => handleReadReceipt(message)
+						onPress: () => handleReadReceipt(message),
+						testID: 'message-actions-read-receipt'
 					});
 				}
 
@@ -533,7 +547,8 @@ const MessageActions = React.memo(
 					options.push({
 						title: I18n.t(message.autoTranslate !== false ? 'View_Original' : 'Translate'),
 						icon: 'language',
-						onPress: () => handleToggleTranslation(message)
+						onPress: () => handleToggleTranslation(message),
+						testID: 'message-actions-toggle-translation'
 					});
 				}
 
@@ -542,7 +557,8 @@ const MessageActions = React.memo(
 					title: I18n.t('Report'),
 					icon: 'warning',
 					danger: true,
-					onPress: () => handleReport(message)
+					onPress: () => handleReport(message),
+					testID: 'message-actions-report'
 				});
 
 				// Delete
@@ -553,7 +569,8 @@ const MessageActions = React.memo(
 						icon: 'delete',
 						danger: true,
 						onPress: () => handleDelete(message),
-						enabled: isDeleteAllowed
+						enabled: isDeleteAllowed,
+						testID: 'message-actions-delete'
 					});
 				}
 
diff --git a/app/containers/MessageComposer/components/Quotes/Quote.tsx b/app/containers/MessageComposer/components/Quotes/Quote.tsx
index c5436f19938..ec291d6c663 100644
--- a/app/containers/MessageComposer/components/Quotes/Quote.tsx
+++ b/app/containers/MessageComposer/components/Quotes/Quote.tsx
@@ -49,7 +49,7 @@ export const Quote = ({ messageId }: { messageId: string }) => {
 					testID={`composer-quote-remove-${message.id}`}
 				/>
 			</View>
-			<MarkdownPreview style={[styles.message]} numberOfLines={1} msg={msg} />
+			<MarkdownPreview style={styles.message} numberOfLines={1} msg={msg} />
 		</View>
 	);
 };
diff --git a/app/containers/MessageComposer/helpers/getMentionRegexp.test.js b/app/containers/MessageComposer/helpers/getMentionRegexp.test.js
index b04be1a6675..4faefe7d9ed 100644
--- a/app/containers/MessageComposer/helpers/getMentionRegexp.test.js
+++ b/app/containers/MessageComposer/helpers/getMentionRegexp.test.js
@@ -29,7 +29,7 @@ describe('getMentionRegexpUser', function () {
 	});
 
 	test('removing query text on user suggestion autocomplete (special characters in query)', () => {
-		const message = 'Hey @\'=test123';
+		const message = "Hey @'=test123";
 		expect(message.replace(regexp, '')).toBe('Hey @');
 	});
 });
diff --git a/app/containers/RoomItem/__snapshots__/RoomItem.test.tsx.snap b/app/containers/RoomItem/__snapshots__/RoomItem.test.tsx.snap
index 971e7b8dc59..a04cc71c4f2 100644
--- a/app/containers/RoomItem/__snapshots__/RoomItem.test.tsx.snap
+++ b/app/containers/RoomItem/__snapshots__/RoomItem.test.tsx.snap
@@ -378,6 +378,7 @@ exports[`Story Snapshots: Alerts should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={4}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -1016,6 +1017,7 @@ exports[`Story Snapshots: Alerts should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={8}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -1695,6 +1697,7 @@ exports[`Story Snapshots: Alerts should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={12}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -2374,6 +2377,7 @@ exports[`Story Snapshots: Alerts should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={16}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -3053,6 +3057,7 @@ exports[`Story Snapshots: Alerts should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={20}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -3732,6 +3737,7 @@ exports[`Story Snapshots: Alerts should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={24}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -4411,6 +4417,7 @@ exports[`Story Snapshots: Alerts should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={28}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -5090,6 +5097,7 @@ exports[`Story Snapshots: Alerts should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={32}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -5769,6 +5777,7 @@ exports[`Story Snapshots: Alerts should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={36}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -6448,6 +6457,7 @@ exports[`Story Snapshots: Alerts should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={40}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -7127,6 +7137,7 @@ exports[`Story Snapshots: Alerts should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={44}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -7810,6 +7821,7 @@ exports[`Story Snapshots: Basic should match snapshot 1`] = `
       activeOpacity={1}
       collapsable={false}
       delayLongPress={600}
+      enabled={true}
       handlerTag={70}
       handlerType="NativeViewGestureHandler"
       innerRef={null}
@@ -8437,6 +8449,7 @@ exports[`Story Snapshots: CondensedRoomItem should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={76}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -9116,6 +9129,7 @@ exports[`Story Snapshots: CondensedRoomItem should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={80}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -9795,6 +9809,7 @@ exports[`Story Snapshots: CondensedRoomItem should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={84}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -10459,6 +10474,7 @@ exports[`Story Snapshots: CondensedRoomItemWithoutAvatar should match snapshot 1
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={94}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -11082,6 +11098,7 @@ exports[`Story Snapshots: CondensedRoomItemWithoutAvatar should match snapshot 1
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={98}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -11649,6 +11666,7 @@ exports[`Story Snapshots: CondensedRoomItemWithoutAvatar should match snapshot 1
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={102}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -12257,6 +12275,7 @@ exports[`Story Snapshots: ExpandedRoomItemWithoutAvatar should match snapshot 1`
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={112}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -12926,6 +12945,7 @@ exports[`Story Snapshots: ExpandedRoomItemWithoutAvatar should match snapshot 1`
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={116}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -13595,6 +13615,7 @@ exports[`Story Snapshots: ExpandedRoomItemWithoutAvatar should match snapshot 1`
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={120}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -14228,6 +14249,7 @@ exports[`Story Snapshots: InvitedRoom should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={130}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -14879,6 +14901,7 @@ exports[`Story Snapshots: InvitedRoom should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={134}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -15535,6 +15558,7 @@ exports[`Story Snapshots: LastMessage should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={142}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -16189,6 +16213,7 @@ exports[`Story Snapshots: LastMessage should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={146}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -16843,6 +16868,7 @@ exports[`Story Snapshots: LastMessage should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={150}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -17497,6 +17523,7 @@ exports[`Story Snapshots: LastMessage should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={154}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -18151,6 +18178,7 @@ exports[`Story Snapshots: LastMessage should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={158}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -18861,6 +18889,7 @@ exports[`Story Snapshots: LastMessage should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={162}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -19571,6 +19600,7 @@ exports[`Story Snapshots: LastMessage should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={166}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -20286,6 +20316,7 @@ exports[`Story Snapshots: OmnichannelIcon should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={184}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -20909,6 +20940,7 @@ exports[`Story Snapshots: OmnichannelIcon should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={188}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -21532,6 +21564,7 @@ exports[`Story Snapshots: OmnichannelIcon should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={192}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -22155,6 +22188,7 @@ exports[`Story Snapshots: OmnichannelIcon should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={196}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -22778,6 +22812,7 @@ exports[`Story Snapshots: OmnichannelIcon should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={200}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -23401,6 +23436,7 @@ exports[`Story Snapshots: OmnichannelIcon should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={204}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -24024,6 +24060,7 @@ exports[`Story Snapshots: OmnichannelIcon should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={208}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -24647,6 +24684,7 @@ exports[`Story Snapshots: OmnichannelIcon should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={212}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -25270,6 +25308,7 @@ exports[`Story Snapshots: OmnichannelIcon should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={216}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -25893,6 +25932,7 @@ exports[`Story Snapshots: OmnichannelIcon should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={220}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -26521,6 +26561,7 @@ exports[`Story Snapshots: Tag should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={244}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -27180,6 +27221,7 @@ exports[`Story Snapshots: Tag should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={248}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -27871,6 +27913,7 @@ exports[`Story Snapshots: Tag should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={252}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -28530,6 +28573,7 @@ exports[`Story Snapshots: Tag should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={256}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -29225,6 +29269,7 @@ exports[`Story Snapshots: Touch should match snapshot 1`] = `
       activeOpacity={1}
       collapsable={false}
       delayLongPress={600}
+      enabled={true}
       handlerTag={268}
       handlerType="NativeViewGestureHandler"
       innerRef={null}
@@ -29852,6 +29897,7 @@ exports[`Story Snapshots: Type should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={274}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -30482,6 +30528,7 @@ exports[`Story Snapshots: Type should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={278}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -31105,6 +31152,7 @@ exports[`Story Snapshots: Type should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={282}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -31728,6 +31776,7 @@ exports[`Story Snapshots: Type should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={286}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -32351,6 +32400,7 @@ exports[`Story Snapshots: Type should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={290}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -32974,6 +33024,7 @@ exports[`Story Snapshots: Type should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={294}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -33597,6 +33648,7 @@ exports[`Story Snapshots: Type should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={298}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -34220,6 +34272,7 @@ exports[`Story Snapshots: Type should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={302}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -34843,6 +34896,7 @@ exports[`Story Snapshots: Type should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={306}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -35471,6 +35525,7 @@ exports[`Story Snapshots: User should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={328}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -36101,6 +36156,7 @@ exports[`Story Snapshots: User should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={332}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
diff --git a/app/containers/ServerItem/__snapshots__/ServerItem.test.tsx.snap b/app/containers/ServerItem/__snapshots__/ServerItem.test.tsx.snap
index 01509e744dc..d0c4feeeb28 100644
--- a/app/containers/ServerItem/__snapshots__/ServerItem.test.tsx.snap
+++ b/app/containers/ServerItem/__snapshots__/ServerItem.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
     activeOpacity={1}
     collapsable={false}
     delayLongPress={600}
+    enabled={true}
     handlerTag={1}
     handlerType="NativeViewGestureHandler"
     innerRef={null}
@@ -209,6 +210,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
     activeOpacity={1}
     collapsable={false}
     delayLongPress={600}
+    enabled={true}
     handlerTag={2}
     handlerType="NativeViewGestureHandler"
     innerRef={null}
@@ -411,6 +413,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
     activeOpacity={1}
     collapsable={false}
     delayLongPress={600}
+    enabled={true}
     handlerTag={3}
     handlerType="NativeViewGestureHandler"
     innerRef={null}
@@ -645,7 +648,7 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
               "top": 0,
             },
             {
-              "width": undefined,
+              "width": 390,
             },
             {
               "height": 68,
@@ -755,6 +758,7 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={5}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -994,7 +998,7 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
               "top": 0,
             },
             {
-              "width": undefined,
+              "width": 390,
             },
             {
               "height": 68,
@@ -1104,6 +1108,7 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={7}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -1321,6 +1326,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
     activeOpacity={1}
     collapsable={false}
     delayLongPress={600}
+    enabled={true}
     handlerTag={10}
     handlerType="NativeViewGestureHandler"
     innerRef={null}
@@ -1523,6 +1529,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
     activeOpacity={1}
     collapsable={false}
     delayLongPress={600}
+    enabled={true}
     handlerTag={11}
     handlerType="NativeViewGestureHandler"
     innerRef={null}
@@ -1725,6 +1732,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
     activeOpacity={1}
     collapsable={false}
     delayLongPress={600}
+    enabled={true}
     handlerTag={12}
     handlerType="NativeViewGestureHandler"
     innerRef={null}
diff --git a/app/containers/SupportedVersions/styles.ts b/app/containers/SupportedVersions/styles.ts
index 3ed3c54c5de..6468861692f 100644
--- a/app/containers/SupportedVersions/styles.ts
+++ b/app/containers/SupportedVersions/styles.ts
@@ -4,7 +4,7 @@ import sharedStyles from '../../views/Styles';
 
 export const styles = StyleSheet.create({
 	container: {
-		flex: 1,
+		flex: 0,
 		padding: 16,
 		backgroundColor: '#fff'
 	},
diff --git a/app/containers/TextInput/FormTextInput.tsx b/app/containers/TextInput/FormTextInput.tsx
index 046cdab1e35..af0d5541b91 100644
--- a/app/containers/TextInput/FormTextInput.tsx
+++ b/app/containers/TextInput/FormTextInput.tsx
@@ -9,8 +9,6 @@ import {
 	View,
 	type ViewStyle
 } from 'react-native';
-import { BottomSheetTextInput } from '@discord/bottom-sheet';
-import Touchable from 'react-native-platform-touchable';
 import { A11y } from 'react-native-a11y-order';
 
 import i18n from '../../i18n';
@@ -20,6 +18,7 @@ import ActivityIndicator from '../ActivityIndicator';
 import { CustomIcon, type TIconsName } from '../CustomIcon';
 import { TextInput } from './TextInput';
 import { isIOS } from '../../lib/methods/helpers';
+import Touch from '../Touch';
 
 const styles = StyleSheet.create({
 	error: {
@@ -72,6 +71,10 @@ const styles = StyleSheet.create({
 	},
 	iconRight: {
 		right: 12
+	},
+	clearInputIcon: {
+		width: 20,
+		height: 20
 	}
 });
 
@@ -87,7 +90,6 @@ export interface IRCTextInputProps extends TextInputProps {
 	iconLeft?: TIconsName;
 	iconRight?: TIconsName;
 	left?: JSX.Element;
-	bottomSheet?: boolean;
 	onClearInput?: () => void;
 }
 
@@ -115,7 +117,6 @@ export const FormTextInput = ({
 	left,
 	testID,
 	secureTextEntry,
-	bottomSheet,
 	placeholder,
 	accessibilityLabel,
 	showErrorMessage = true,
@@ -124,8 +125,6 @@ export const FormTextInput = ({
 	const { colors } = useTheme();
 	const [showPassword, setShowPassword] = useState(false);
 	const showClearInput = onClearInput && value && value.length > 0;
-	const Input = bottomSheet ? BottomSheetTextInput : TextInput;
-
 	const inputError = getInputError(error);
 	const accessibilityLabelText = useMemo(() => {
 		const baseLabel = `${accessibilityLabel || label || ''}`;
@@ -151,7 +150,7 @@ export const FormTextInput = ({
 					) : null}
 
 					<View accessible={false} style={styles.wrap}>
-						<Input
+						<TextInput
 							accessible
 							accessibilityLabel={accessibilityLabelText}
 							style={[
@@ -194,9 +193,15 @@ export const FormTextInput = ({
 						) : null}
 
 						{showClearInput ? (
-							<Touchable onPress={onClearInput} style={[styles.iconContainer, styles.iconRight]} testID='clear-text-input'>
+							<Touch
+								testID='clear-text-input'
+								onPress={() => onClearInput?.()}
+								accessible
+								accessibilityLabel={i18n.t('Clear_input')}
+								rectButtonStyle={[styles.iconContainer, styles.iconRight]}
+								style={styles.clearInputIcon}>
 								<CustomIcon name='input-clear' size={20} color={colors.fontDefault} />
-							</Touchable>
+							</Touch>
 						) : null}
 
 						{iconRight && !showClearInput ? (
@@ -212,7 +217,7 @@ export const FormTextInput = ({
 
 						{secureTextEntry ? (
 							<A11y.Index index={2} style={[styles.iconContainer, styles.iconRight]}>
-								<Touchable
+								<Touch
 									accessible
 									accessibilityLabel={showPassword ? i18n.t('Hide_Password') : i18n.t('Show_Password')}
 									onPress={() => setShowPassword(!showPassword)}>
@@ -222,7 +227,7 @@ export const FormTextInput = ({
 										size={20}
 										color={colors.fontDefault}
 									/>
-								</Touchable>
+								</Touch>
 							</A11y.Index>
 						) : null}
 
diff --git a/app/containers/TextInput/__snapshots__/TextInput.test.tsx.snap b/app/containers/TextInput/__snapshots__/TextInput.test.tsx.snap
index c25341973eb..ca58551553e 100644
--- a/app/containers/TextInput/__snapshots__/TextInput.test.tsx.snap
+++ b/app/containers/TextInput/__snapshots__/TextInput.test.tsx.snap
@@ -536,70 +536,101 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
             underlineColorAndroid="transparent"
             value="https://open.rocket.chat/images/logo/android-chrome-512x512.png"
           />
-          <View
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": undefined,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
+          <RNGestureHandlerButton
+            activeOpacity={1}
             collapsable={false}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            delayLongPress={600}
+            enabled={true}
+            handlerTag={1}
+            handlerType="NativeViewGestureHandler"
+            innerRef={null}
+            onActiveStateChange={[Function]}
+            onGestureHandlerEvent={[Function]}
+            onGestureHandlerStateChange={[Function]}
+            onPress={[Function]}
+            rippleColor="#E4E7EA"
             style={
-              {
-                "opacity": 1,
-                "position": "absolute",
-                "right": 12,
-              }
+              [
+                {
+                  "backgroundColor": undefined,
+                  "borderRadius": undefined,
+                  "margin": undefined,
+                  "marginBottom": undefined,
+                  "marginEnd": undefined,
+                  "marginHorizontal": undefined,
+                  "marginLeft": undefined,
+                  "marginRight": undefined,
+                  "marginStart": undefined,
+                  "marginTop": undefined,
+                  "marginVertical": undefined,
+                  "position": "absolute",
+                  "right": 12,
+                },
+                {
+                  "cursor": undefined,
+                },
+              ]
             }
             testID="clear-text-input"
+            underlayColor="#E4E7EA"
           >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
+            <View
+              collapsable={false}
               style={
-                [
-                  {
-                    "color": "#2F343D",
-                    "fontSize": 20,
-                  },
+                {
+                  "backgroundColor": "#E4E7EA",
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "bottom": 0,
+                  "left": 0,
+                  "opacity": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
+              }
+            />
+            <View
+              accessibilityLabel="Clear input"
+              accessible={true}
+              style={
+                {
+                  "height": 20,
+                  "width": 20,
+                }
+              }
+            >
+              <Text
+                allowFontScaling={false}
+                selectable={false}
+                style={
                   [
                     {
-                      "lineHeight": 20,
+                      "color": "#2F343D",
+                      "fontSize": 20,
                     },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </View>
+                    [
+                      {
+                        "lineHeight": 20,
+                      },
+                      undefined,
+                    ],
+                    {
+                      "fontFamily": "custom",
+                      "fontStyle": "normal",
+                      "fontWeight": "normal",
+                    },
+                    {},
+                  ]
+                }
+              >
+                
+              </Text>
+            </View>
+          </RNGestureHandlerButton>
         </View>
       </View>
     </A11yIndexView>
@@ -1157,68 +1188,93 @@ exports[`Story Snapshots: SecureTextEntry should match snapshot 1`] = `
               ]
             }
           >
-            <View
-              accessibilityLabel="Show Password"
-              accessibilityState={
-                {
-                  "busy": undefined,
-                  "checked": undefined,
-                  "disabled": undefined,
-                  "expanded": undefined,
-                  "selected": undefined,
-                }
-              }
-              accessibilityValue={
-                {
-                  "max": undefined,
-                  "min": undefined,
-                  "now": undefined,
-                  "text": undefined,
-                }
-              }
-              accessible={true}
+            <RNGestureHandlerButton
+              activeOpacity={1}
               collapsable={false}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
+              delayLongPress={600}
+              enabled={true}
+              handlerTag={2}
+              handlerType="NativeViewGestureHandler"
+              innerRef={null}
+              onActiveStateChange={[Function]}
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onPress={[Function]}
+              rippleColor="#E4E7EA"
               style={
-                {
-                  "opacity": 1,
-                }
+                [
+                  {
+                    "backgroundColor": undefined,
+                    "borderRadius": undefined,
+                    "margin": undefined,
+                    "marginBottom": undefined,
+                    "marginEnd": undefined,
+                    "marginHorizontal": undefined,
+                    "marginLeft": undefined,
+                    "marginRight": undefined,
+                    "marginStart": undefined,
+                    "marginTop": undefined,
+                    "marginVertical": undefined,
+                  },
+                  {
+                    "cursor": undefined,
+                  },
+                ]
               }
+              underlayColor="#E4E7EA"
             >
-              <Text
-                allowFontScaling={false}
-                selectable={false}
+              <View
+                collapsable={false}
                 style={
-                  [
-                    {
-                      "color": "#2F343D",
-                      "fontSize": 20,
-                    },
+                  {
+                    "backgroundColor": "#E4E7EA",
+                    "borderBottomLeftRadius": undefined,
+                    "borderBottomRightRadius": undefined,
+                    "borderRadius": undefined,
+                    "borderTopLeftRadius": undefined,
+                    "borderTopRightRadius": undefined,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              />
+              <View
+                accessibilityLabel="Show Password"
+                accessible={true}
+                style={{}}
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
                     [
                       {
-                        "lineHeight": 20,
+                        "color": "#2F343D",
+                        "fontSize": 20,
                       },
-                      undefined,
-                    ],
-                    {
-                      "fontFamily": "custom",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
+                      [
+                        {
+                          "lineHeight": 20,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </RNGestureHandlerButton>
           </A11yIndexView>
         </View>
       </View>
diff --git a/app/containers/ThreadDetails.tsx b/app/containers/ThreadDetails.tsx
index c2ae4216be1..b0e7ab65488 100644
--- a/app/containers/ThreadDetails.tsx
+++ b/app/containers/ThreadDetails.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, Text, View, type ViewStyle } from 'react-native';
-import Touchable from 'react-native-platform-touchable';
 
+import Touch from './Touch';
 import { CustomIcon } from './CustomIcon';
 import { themes } from '../lib/constants/colors';
 import sharedStyles from '../views/Styles';
@@ -87,11 +87,11 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IT
 			</View>
 			<View style={styles.badgeContainer}>
 				{badgeColor ? <View style={[styles.badge, { backgroundColor: badgeColor }]} /> : null}
-				<Touchable
+				<Touch
 					accessibilityLabel={i18n.t(isFollowing ? 'Unfollow_thread' : 'Follow_thread')}
 					onPress={() => toggleFollowThread?.(isFollowing, item.id)}>
 					<CustomIcon size={24} name={isFollowing ? 'notification' : 'notification-disabled'} />
-				</Touchable>
+				</Touch>
 			</View>
 		</View>
 	);
diff --git a/app/containers/Touch.tsx b/app/containers/Touch.tsx
index cc76c7b2a7c..1f062ecaac1 100644
--- a/app/containers/Touch.tsx
+++ b/app/containers/Touch.tsx
@@ -20,6 +20,7 @@ export interface ITouchProps extends RectButtonProps {
 	onAccessibilityAction?: (event: AccessibilityActionEvent) => void;
 	testID?: string;
 	rectButtonStyle?: StyleProp<ViewStyle>;
+	disabled?: boolean;
 }
 
 const Touch = React.forwardRef<React.ElementRef<typeof RectButton>, ITouchProps>(
@@ -35,6 +36,7 @@ const Touch = React.forwardRef<React.ElementRef<typeof RectButton>, ITouchProps>
 			onAccessibilityAction,
 			style,
 			rectButtonStyle,
+			disabled,
 			...props
 		},
 		ref
@@ -78,7 +80,8 @@ const Touch = React.forwardRef<React.ElementRef<typeof RectButton>, ITouchProps>
 				underlayColor={underlayColor || colors.surfaceNeutral}
 				rippleColor={colors.surfaceNeutral}
 				style={[rectButtonStyle, marginStyles, { backgroundColor, borderRadius }]}
-				{...props}>
+				{...props}
+				enabled={!disabled}>
 				<View
 					accessible={accessible}
 					accessibilityRole={props.accessibilityRole}
diff --git a/app/containers/UIKit/Actions.tsx b/app/containers/UIKit/Actions.tsx
index a103ca2bbe5..154647bf113 100644
--- a/app/containers/UIKit/Actions.tsx
+++ b/app/containers/UIKit/Actions.tsx
@@ -30,7 +30,7 @@ export const Actions = ({ blockId, appId, elements, parser }: IActions) => {
 		<>
 			{elements.map((element, index) => {
 				const isVisible = !showMoreVisible || index < maxVisible;
-				const component = parser.renderActions({ blockId, appId, ...element }, BlockContext.ACTION, parser);
+				const component = parser?.renderActions({ blockId, appId, ...element }, BlockContext.ACTION);
 				// Always render the component, but hide it with styles if needed
 				return (
 					<View key={element.actionId || `action-${index}`} style={!isVisible ? styles.hidden : undefined}>
diff --git a/app/containers/UIKit/Context.tsx b/app/containers/UIKit/Context.tsx
index 49344a39d9e..cff859b494b 100644
--- a/app/containers/UIKit/Context.tsx
+++ b/app/containers/UIKit/Context.tsx
@@ -13,5 +13,11 @@ const styles = StyleSheet.create({
 });
 
 export const Context = ({ elements, parser }: IContext) => (
-	<View style={styles.container}>{elements?.map(element => parser?.renderContext(element, BlockContext.CONTEXT, parser))}</View>
+	<View style={styles.container}>
+		{elements?.map((element, index) => (
+			<React.Fragment key={(element as any).type ? `${(element as any).type}-${index}` : `context-${index}`}>
+				{parser?.renderContext(element, BlockContext.CONTEXT)}
+			</React.Fragment>
+		))}
+	</View>
 );
diff --git a/app/containers/UIKit/DatePicker.tsx b/app/containers/UIKit/DatePicker.tsx
index bc1e05fbb60..62a7001fb89 100644
--- a/app/containers/UIKit/DatePicker.tsx
+++ b/app/containers/UIKit/DatePicker.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { StyleSheet, Text, unstable_batchedUpdates, View } from 'react-native';
 import DateTimePicker, { type BaseProps } from '@react-native-community/datetimepicker';
-import Touchable from 'react-native-platform-touchable';
 import { BlockContext } from '@rocket.chat/ui-kit';
 
 import dayjs from '../../lib/dayjs';
@@ -14,6 +13,7 @@ import { isAndroid } from '../../lib/methods/helpers';
 import { useTheme } from '../../theme';
 import ActivityIndicator from '../ActivityIndicator';
 import { type IDatePicker } from './interfaces';
+import Touch from '../Touch';
 
 const styles = StyleSheet.create({
 	input: {
@@ -62,10 +62,7 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 
 	if (context === BlockContext.FORM) {
 		button = (
-			<Touchable
-				onPress={() => onShow(!show)}
-				style={{ backgroundColor: themes[theme].surfaceRoom }}
-				background={Touchable.Ripple(themes[theme].surfaceNeutral)}>
+			<Touch onPress={() => onShow(!show)} style={{ backgroundColor: themes[theme].surfaceRoom }}>
 				<View
 					style={[
 						styles.input,
@@ -85,7 +82,7 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 						/>
 					)}
 				</View>
-			</Touchable>
+			</Touch>
 		);
 	}
 
diff --git a/app/containers/UIKit/Icon.test.tsx b/app/containers/UIKit/Icon.test.tsx
new file mode 100644
index 00000000000..dcd22068ee1
--- /dev/null
+++ b/app/containers/UIKit/Icon.test.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+import { Icon, resolveIconName } from './Icon';
+
+const mockHasIcon = jest.fn();
+const mockCustomIcon = jest.fn(() => <Text testID='custom-icon'>icon</Text>);
+
+jest.mock('../CustomIcon', () => ({
+	hasIcon: (...args: unknown[]) => mockHasIcon(...args),
+	CustomIcon: (...props: Parameters<typeof mockCustomIcon>) => mockCustomIcon(...props)
+}));
+
+jest.mock('../../theme', () => ({
+	useTheme: () => ({
+		colors: {
+			fontDefault: '#000000',
+			fontDanger: '#d00000',
+			fontSecondaryInfo: '#0060d0',
+			statusFontWarning: '#d09000',
+			statusFontDanger: '#ff2020',
+			surfaceTint: '#f2f2f2'
+		}
+	})
+}));
+
+describe('UIKit Icon', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('resolveIconName', () => {
+		it('returns original icon when available', () => {
+			mockHasIcon.mockImplementation((name: string) => name === 'bell');
+
+			expect(resolveIconName('bell')).toBe('bell');
+		});
+
+		it('resolves known alias when alias icon exists', () => {
+			mockHasIcon.mockImplementation((name: string) => name === 'phone-off');
+
+			expect(resolveIconName('phone-end')).toBe('phone-off');
+		});
+
+		it('falls back to info when icon and alias are unavailable', () => {
+			mockHasIcon.mockReturnValue(false);
+
+			expect(resolveIconName('unknown')).toBe('info');
+		});
+	});
+
+	it('renders secondary variant color', () => {
+		mockHasIcon.mockReturnValue(true);
+		render(<Icon element={{ icon: 'bell', type: 'icon', variant: 'secondary' } as any} />);
+
+		expect(mockCustomIcon).toHaveBeenCalledTimes(1);
+		const firstCallArg = (mockCustomIcon.mock.calls[0] as any[])[0];
+		expect(firstCallArg).toEqual(
+			expect.objectContaining({
+				name: 'bell',
+				color: '#0060d0',
+				size: 20
+			})
+		);
+	});
+
+	it('uses framed danger color and frame background', () => {
+		mockHasIcon.mockReturnValue(true);
+		const { toJSON } = render(<Icon element={{ icon: 'bell', type: 'icon', variant: 'danger', framed: true } as any} />);
+
+		expect(mockCustomIcon).toHaveBeenCalledTimes(1);
+		const firstCallArg = (mockCustomIcon.mock.calls[0] as any[])[0];
+		expect(firstCallArg).toEqual(
+			expect.objectContaining({
+				name: 'bell',
+				color: '#ff2020',
+				size: 20
+			})
+		);
+		expect(toJSON()).toMatchObject({
+			props: {
+				style: expect.arrayContaining([expect.objectContaining({ backgroundColor: '#f2f2f2' })])
+			}
+		});
+	});
+});
diff --git a/app/containers/UIKit/Icon.tsx b/app/containers/UIKit/Icon.tsx
new file mode 100644
index 00000000000..51c20aadcfe
--- /dev/null
+++ b/app/containers/UIKit/Icon.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { hasIcon, CustomIcon } from '../CustomIcon';
+import { useTheme } from '../../theme';
+import { type IIcon } from './interfaces';
+
+const iconAliases: Record<string, string> = {
+	'phone-end': 'phone-off'
+};
+
+const styles = StyleSheet.create({
+	frame: {
+		width: 28,
+		height: 28,
+		borderRadius: 4,
+		alignItems: 'center',
+		justifyContent: 'center'
+	}
+});
+
+export const resolveIconName = (icon: string) => {
+	if (hasIcon(icon)) {
+		return icon as any;
+	}
+
+	const aliasedIcon = iconAliases[icon];
+	if (aliasedIcon && hasIcon(aliasedIcon)) {
+		return aliasedIcon as any;
+	}
+
+	return 'info' as any;
+};
+
+const getIconColor = (variant: IIcon['variant'], colors: ReturnType<typeof useTheme>['colors'], framed?: boolean) => {
+	switch (variant) {
+		case 'danger':
+			return framed ? colors.statusFontDanger : colors.fontDanger;
+		case 'secondary':
+			return colors.fontSecondaryInfo;
+		case 'warning':
+			return colors.statusFontWarning;
+		default:
+			return colors.fontDefault;
+	}
+};
+
+export const Icon = ({ element }: { element: IIcon }) => {
+	const { colors } = useTheme();
+	const { icon, variant = 'default', framed } = element;
+	const color = getIconColor(variant, colors, framed);
+	const renderedIcon = <CustomIcon name={resolveIconName(icon)} size={20} color={color} />;
+
+	if (!framed) {
+		return renderedIcon;
+	}
+
+	return <View style={[styles.frame, { backgroundColor: colors.surfaceTint }]}>{renderedIcon}</View>;
+};
diff --git a/app/containers/UIKit/IconButton.tsx b/app/containers/UIKit/IconButton.tsx
new file mode 100644
index 00000000000..9d023c1b6ec
--- /dev/null
+++ b/app/containers/UIKit/IconButton.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+import { type BlockContext } from '@rocket.chat/ui-kit';
+
+import ActivityIndicator from '../ActivityIndicator';
+import { BUTTON_HIT_SLOP } from '../message/utils';
+import openLink from '../../lib/methods/helpers/openLink';
+import { useTheme } from '../../theme';
+import { useBlockContext } from './utils';
+import { Icon } from './Icon';
+import { type IIconButton, type IText } from './interfaces';
+
+const styles = StyleSheet.create({
+	button: {
+		width: 32,
+		height: 32,
+		borderWidth: 1,
+		borderRadius: 8,
+		alignItems: 'center',
+		justifyContent: 'center'
+	},
+	loading: {
+		padding: 0
+	}
+});
+
+const getLabel = (label?: string | IText, fallback?: string) => {
+	if (typeof label === 'string') {
+		return label;
+	}
+
+	if (label?.text) {
+		return label.text;
+	}
+
+	return fallback || 'icon button';
+};
+
+export const IconButton = ({ element, context }: { element: IIconButton; context: BlockContext }) => {
+	const { theme, colors } = useTheme();
+	const [{ loading }, action] = useBlockContext(element, context);
+	const label = getLabel(element.label, element.icon?.icon);
+
+	const onPress = async () => {
+		if (element.url) {
+			await Promise.allSettled([action({ value: element.value }), openLink(element.url, theme)]);
+			return;
+		}
+
+		await action({ value: element.value });
+	};
+
+	return (
+		<Pressable
+			onPress={onPress}
+			disabled={loading}
+			hitSlop={BUTTON_HIT_SLOP}
+			android_ripple={{ color: colors.surfaceNeutral, borderless: false }}
+			style={({ pressed }) => [
+				styles.button,
+				{
+					borderColor: colors.strokeLight,
+					backgroundColor: colors.surfaceLight,
+					opacity: pressed ? 0.7 : 1
+				}
+			]}
+			accessibilityRole={element.url ? 'link' : 'button'}
+			accessibilityLabel={label}>
+			{loading ? <ActivityIndicator style={styles.loading} /> : <Icon element={element.icon} />}
+		</Pressable>
+	);
+};
diff --git a/app/containers/UIKit/Image.tsx b/app/containers/UIKit/Image.tsx
index bac03b64d3d..a240acb9993 100644
--- a/app/containers/UIKit/Image.tsx
+++ b/app/containers/UIKit/Image.tsx
@@ -5,7 +5,7 @@ import { BlockContext } from '@rocket.chat/ui-kit';
 
 import ImageContainer from '../message/Components/Attachments/Image';
 import Navigation from '../../lib/navigation/appNavigation';
-import { type IThumb, type IImage, type IElement } from './interfaces';
+import { type IThumb, type IImage } from './interfaces';
 import { type IAttachment } from '../../definitions';
 
 const styles = StyleSheet.create({
@@ -33,7 +33,7 @@ export const Media = ({ element }: IImage) => {
 	return <ImageContainer file={{ image_url: imageUrl }} showAttachment={showAttachment} />;
 };
 
-const genericImage = (element: IElement, context?: number) => {
+const genericImage = ({ element, context }: IImage) => {
 	switch (context) {
 		case BlockContext.SECTION:
 			return <Thumb element={element} />;
@@ -44,4 +44,4 @@ const genericImage = (element: IElement, context?: number) => {
 	}
 };
 
-export const Image = ({ element, context }: IImage) => genericImage(element, context);
+export const Image = (props: IImage) => genericImage(props);
diff --git a/app/containers/UIKit/InfoCard.test.tsx b/app/containers/UIKit/InfoCard.test.tsx
new file mode 100644
index 00000000000..19ef39051da
--- /dev/null
+++ b/app/containers/UIKit/InfoCard.test.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+import { InfoCard } from './InfoCard';
+
+jest.mock('../../theme', () => ({
+	useTheme: () => ({
+		colors: {
+			surfaceTint: '#f7f7f7',
+			strokeExtraLight: '#e1e1e1',
+			surfaceLight: '#ffffff'
+		}
+	})
+}));
+
+describe('InfoCard', () => {
+	it('renders row elements in order and applies row background', () => {
+		const parser = {
+			icon: jest.fn((element: any) => <Text>{`icon:${element.icon}`}</Text>),
+			plain_text: jest.fn((element: any) => <Text>{`text:${element.text}`}</Text>),
+			mrkdwn: jest.fn((element: any) => <Text>{`md:${element.text}`}</Text>),
+			icon_button: jest.fn(() => <Text>action</Text>)
+		};
+
+		const { getByText, toJSON, UNSAFE_getAllByType } = render(
+			<InfoCard
+				type='info_card'
+				parser={parser as any}
+				blockId='info-card'
+				rows={[
+					{
+						background: 'default',
+						elements: [
+							{ type: 'icon', icon: 'info', variant: 'default' },
+							{ type: 'plain_text', text: 'Plain text' },
+							{ type: 'mrkdwn', text: '*Markdown*' }
+						]
+					}
+				]}
+			/>
+		);
+
+		expect(getByText('icon:info')).toBeTruthy();
+		expect(getByText('text:Plain text')).toBeTruthy();
+		expect(getByText('md:*Markdown*')).toBeTruthy();
+
+		const allTexts = UNSAFE_getAllByType(Text).map(node => node.props.children);
+		expect(allTexts).toEqual(expect.arrayContaining(['icon:info', 'text:Plain text', 'md:*Markdown*']));
+
+		expect(toJSON()).toMatchObject({
+			children: expect.arrayContaining([
+				expect.objectContaining({
+					props: {
+						style: expect.arrayContaining([expect.objectContaining({ backgroundColor: '#ffffff' })])
+					}
+				})
+			])
+		});
+	});
+
+	it('ignores row action rendering for now (non-interactive)', () => {
+		const parser = {
+			icon: jest.fn((element: any) => <Text>{`icon:${element.icon}`}</Text>),
+			plain_text: jest.fn((element: any) => <Text>{`text:${element.text}`}</Text>),
+			mrkdwn: jest.fn((element: any) => <Text>{`md:${element.text}`}</Text>),
+			icon_button: jest.fn(() => <Text>action</Text>)
+		};
+
+		const { queryByText } = render(
+			<InfoCard
+				type='info_card'
+				parser={parser as any}
+				rows={[
+					{
+						background: 'default',
+						elements: [{ type: 'plain_text', text: 'Line' }],
+						action: {
+							type: 'icon_button',
+							actionId: 'act-id',
+							icon: { type: 'icon', icon: 'phone' }
+						} as any
+					}
+				]}
+			/>
+		);
+
+		expect(queryByText('text:Line')).toBeTruthy();
+		expect(queryByText('action')).toBeNull();
+		expect(parser.icon_button).not.toHaveBeenCalled();
+	});
+});
diff --git a/app/containers/UIKit/InfoCard.tsx b/app/containers/UIKit/InfoCard.tsx
new file mode 100644
index 00000000000..29406cfd60d
--- /dev/null
+++ b/app/containers/UIKit/InfoCard.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { BlockContext } from '@rocket.chat/ui-kit';
+
+import { useTheme } from '../../theme';
+import { type IIcon, type IIconButton, type IInfoCard, type IInfoCardRow } from './interfaces';
+
+const styles = StyleSheet.create({
+	card: {
+		borderWidth: StyleSheet.hairlineWidth,
+		borderRadius: 4,
+		overflow: 'hidden'
+	},
+	row: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		padding: 16
+	},
+	rowContent: {
+		flex: 1,
+		flexDirection: 'row',
+		alignItems: 'center',
+		flexWrap: 'wrap'
+	},
+	rowElement: {
+		marginHorizontal: 4
+	}
+});
+
+const renderRowElement = (parser: IInfoCard['parser'], element: IInfoCardRow['elements'][number], key: string) => {
+	if (element.type === 'icon' && parser.icon) {
+		return (
+			<View key={key} style={styles.rowElement}>
+				{parser.icon(element as IIcon, BlockContext.NONE)}
+			</View>
+		);
+	}
+
+	if (element.type === 'mrkdwn' && parser.mrkdwn) {
+		return (
+			<View key={key} style={styles.rowElement}>
+				{parser.mrkdwn(element as any, BlockContext.NONE)}
+			</View>
+		);
+	}
+
+	if (element.type === 'plain_text' && parser.plain_text) {
+		return (
+			<View key={key} style={styles.rowElement}>
+				{parser.plain_text(element as any, BlockContext.NONE)}
+			</View>
+		);
+	}
+
+	return null;
+};
+
+const renderRowAction = (parser: IInfoCard['parser'], action: IIconButton | undefined, _appId?: string, _blockId?: string) => {
+	if (!action || !parser.icon_button) {
+		return null;
+	}
+
+	// TODO: Temporarily removed until we have call history implemented
+	return null;
+
+	// return parser.icon_button(
+	// 	{
+	// 		...action,
+	// 		appId: action.appId || appId || '',
+	// 		blockId: action.blockId || blockId || ''
+	// 	},
+	// 	BlockContext.ACTION
+	// );
+};
+
+export const InfoCard = ({ rows, parser, appId, blockId }: IInfoCard) => {
+	const { colors } = useTheme();
+
+	return (
+		<View style={[styles.card, { backgroundColor: colors.surfaceTint, borderColor: colors.strokeExtraLight }]}>
+			{rows.map((row, index) => (
+				<View
+					key={`${blockId || 'info-card'}-${index}`}
+					style={[
+						styles.row,
+						{
+							backgroundColor: row.background === 'default' ? colors.surfaceLight : undefined
+						}
+					]}>
+					<View style={styles.rowContent}>
+						{row.elements.map((element, elementIndex) => renderRowElement(parser, element, `${index}-${elementIndex}`))}
+					</View>
+					{row.action ? renderRowAction(parser, row.action, appId, blockId) : null}
+				</View>
+			))}
+		</View>
+	);
+};
diff --git a/app/containers/UIKit/Input.tsx b/app/containers/UIKit/Input.tsx
index 9c8aa90d56b..051b4cc55f7 100644
--- a/app/containers/UIKit/Input.tsx
+++ b/app/containers/UIKit/Input.tsx
@@ -38,7 +38,7 @@ export const Input = ({ element, parser, label, description, error, hint, theme
 			<Text style={[styles.label, { color: error ? themes[theme].fontDanger : themes[theme].fontTitlesLabels }]}>{label}</Text>
 		) : null}
 		{description ? <Text style={[styles.description, { color: themes[theme].fontSecondaryInfo }]}>{description}</Text> : null}
-		{parser.renderInputs({ ...element }, BlockContext.FORM, parser)}
+		{parser.renderInputs({ ...element }, BlockContext.FORM)}
 		{error ? <Text style={[styles.error, { color: themes[theme].fontDanger }]}>{error}</Text> : null}
 		{hint ? <Text style={[styles.hint, { color: themes[theme].fontSecondaryInfo }]}>{hint}</Text> : null}
 	</View>
diff --git a/app/containers/UIKit/MultiSelect/Chips.tsx b/app/containers/UIKit/MultiSelect/Chips.tsx
index 34ccef5574a..de6e1387df1 100644
--- a/app/containers/UIKit/MultiSelect/Chips.tsx
+++ b/app/containers/UIKit/MultiSelect/Chips.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Text, View } from 'react-native';
-import Touchable from 'react-native-platform-touchable';
 import { Image } from 'expo-image';
 
 import { textParser } from '../utils';
@@ -8,6 +7,7 @@ import { CustomIcon } from '../../CustomIcon';
 import styles from './styles';
 import { type IItemData } from '.';
 import { useTheme } from '../../../theme';
+import Touch from '../../Touch';
 
 interface IChip {
 	item: IItemData;
@@ -26,11 +26,10 @@ const keyExtractor = (item: IItemData) => item.value.toString();
 const Chip = ({ item, onSelect, style }: IChip) => {
 	const { colors } = useTheme();
 	return (
-		<Touchable
+		<Touch
 			key={item.value}
 			onPress={() => onSelect(item)}
 			style={[styles.chip, { backgroundColor: colors.surfaceHover }, style]}
-			background={Touchable.Ripple(colors.surfaceNeutral)}
 			testID={`multi-select-chip-${item.value}`}>
 			<>
 				{item.imageUrl ? <Image style={styles.chipImage} source={{ uri: item.imageUrl }} /> : null}
@@ -39,7 +38,7 @@ const Chip = ({ item, onSelect, style }: IChip) => {
 				</Text>
 				<CustomIcon name='close' size={16} color={colors.fontSecondaryInfo} />
 			</>
-		</Touchable>
+		</Touch>
 	);
 };
 Chip.propTypes = {};
diff --git a/app/containers/UIKit/MultiSelect/Input.tsx b/app/containers/UIKit/MultiSelect/Input.tsx
index 47a1cb8203a..ce039fcac81 100644
--- a/app/containers/UIKit/MultiSelect/Input.tsx
+++ b/app/containers/UIKit/MultiSelect/Input.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Text, View } from 'react-native';
-import Touchable from 'react-native-platform-touchable';
 
 import { CustomIcon } from '../../CustomIcon';
 import ActivityIndicator from '../../ActivityIndicator';
 import styles from './styles';
 import { useTheme } from '../../../theme';
+import Touch from '../../Touch';
 
 interface IInput {
 	children?: JSX.Element;
@@ -21,12 +21,11 @@ interface IInput {
 const Input = ({ children, onPress, loading, inputStyle, placeholder, disabled, innerInputStyle, testID }: IInput) => {
 	const { colors } = useTheme();
 	return (
-		<Touchable
+		<Touch
 			onPress={onPress}
 			testID={testID}
 			style={[{ backgroundColor: colors.surfaceRoom }, styles.inputBorder, inputStyle]}
-			background={Touchable.Ripple(colors.surfaceNeutral)}
-			disabled={disabled}>
+			enabled={!disabled}>
 			<View style={[styles.input, styles.inputBorder, { borderColor: colors.strokeMedium }, innerInputStyle]}>
 				{placeholder ? <Text style={[styles.pickerText, { color: colors.fontSecondaryInfo }]}>{placeholder}</Text> : children}
 				{loading ? (
@@ -35,7 +34,7 @@ const Input = ({ children, onPress, loading, inputStyle, placeholder, disabled,
 					<CustomIcon name='chevron-down' size={22} color={colors.fontSecondaryInfo} style={styles.icon} />
 				)}
 			</View>
-		</Touchable>
+		</Touch>
 	);
 };
 export default Input;
diff --git a/app/containers/UIKit/MultiSelect/Items.tsx b/app/containers/UIKit/MultiSelect/Items.tsx
index cb01de66ab8..f584a0c9da0 100644
--- a/app/containers/UIKit/MultiSelect/Items.tsx
+++ b/app/containers/UIKit/MultiSelect/Items.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Text, View } from 'react-native';
-import Touchable from 'react-native-platform-touchable';
 import { Image } from 'expo-image';
 import { FlatList } from 'react-native-gesture-handler';
 
@@ -11,6 +10,7 @@ import { type IItemData } from '.';
 import { useTheme } from '../../../theme';
 import { CustomIcon } from '../../CustomIcon';
 import I18n from '../../../i18n';
+import Touch from '../../Touch';
 
 interface IItem {
 	item: IItemData;
@@ -26,7 +26,6 @@ interface IItems {
 
 const keyExtractor = (item: IItemData) => item.value?.name || item.text?.text;
 
-// RectButton doesn't work on modal (Android)
 const Item = ({ item, selected, onSelect }: IItem) => {
 	const itemName = item.value?.name || item.text.text.toLowerCase();
 	const { colors } = useTheme();
@@ -34,7 +33,7 @@ const Item = ({ item, selected, onSelect }: IItem) => {
 	const iconColor = selected ? colors.badgeBackgroundLevel2 : colors.strokeMedium;
 
 	return (
-		<Touchable
+		<Touch
 			accessible
 			accessibilityLabel={`${textParser([item.text])}. ${selected ? I18n.t('Selected') : ''}`}
 			accessibilityRole='checkbox'
@@ -54,7 +53,7 @@ const Item = ({ item, selected, onSelect }: IItem) => {
 					<CustomIcon color={iconColor} size={22} name={iconName} />
 				</View>
 			</View>
-		</Touchable>
+		</Touch>
 	);
 };
 
diff --git a/app/containers/UIKit/MultiSelect/MultiSelectContent.tsx b/app/containers/UIKit/MultiSelect/MultiSelectContent.tsx
index 268f60c3bb8..6c1a3dc3868 100644
--- a/app/containers/UIKit/MultiSelect/MultiSelectContent.tsx
+++ b/app/containers/UIKit/MultiSelect/MultiSelectContent.tsx
@@ -72,7 +72,6 @@ export const MultiSelectContent = React.memo(
 						onChangeText={handleSearch}
 						placeholder={I18n.t('Search')}
 						inputStyle={{ backgroundColor: colors.surfaceLight }}
-						bottomSheet={true}
 						onSubmitEditing={() => {
 							setTimeout(() => {
 								hideActionSheet();
diff --git a/app/containers/UIKit/MultiSelect/styles.ts b/app/containers/UIKit/MultiSelect/styles.ts
index 62e6a126720..5933c65c475 100644
--- a/app/containers/UIKit/MultiSelect/styles.ts
+++ b/app/containers/UIKit/MultiSelect/styles.ts
@@ -9,7 +9,7 @@ export default StyleSheet.create({
 		justifyContent: 'flex-end'
 	},
 	actionSheetContainer: {
-		flex: 1
+		flex: 0
 	},
 	content: {
 		padding: 16
diff --git a/app/containers/UIKit/Overflow.tsx b/app/containers/UIKit/Overflow.tsx
index b97ff6aefa5..832ab697417 100644
--- a/app/containers/UIKit/Overflow.tsx
+++ b/app/containers/UIKit/Overflow.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { FlatList, StyleSheet, Text } from 'react-native';
 import Popover from 'react-native-popover-view';
-import Touchable from 'react-native-platform-touchable';
 
 import { CustomIcon } from '../CustomIcon';
 import ActivityIndicator from '../ActivityIndicator';
@@ -10,6 +9,7 @@ import { useTheme } from '../../theme';
 import { BUTTON_HIT_SLOP } from '../message/utils';
 import * as List from '../List';
 import { type IOption, type IOptions, type IOverflow } from './interfaces';
+import Touch from '../Touch';
 
 const keyExtractor = (item: any) => item.value;
 
@@ -26,13 +26,10 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Option = ({ option: { text, value }, onOptionPress, parser, theme }: IOption) => (
-	<Touchable
-		onPress={() => onOptionPress({ value })}
-		background={Touchable.Ripple(themes[theme].surfaceNeutral)}
-		style={styles.option}>
+const Option = ({ option: { text, value }, onOptionPress, parser }: IOption) => (
+	<Touch onPress={() => onOptionPress({ value })} style={styles.option}>
 		<Text>{parser.text(text)}</Text>
-	</Touchable>
+	</Touch>
 );
 
 const Options = ({ options, onOptionPress, parser, theme }: IOptions) => (
@@ -44,7 +41,7 @@ const Options = ({ options, onOptionPress, parser, theme }: IOptions) => (
 	/>
 );
 
-const touchable: { [key: string]: Touchable | null } = {};
+const touchable: { [key: string]: React.RefObject<any> | null } = {};
 
 export const Overflow = ({ element, loading, action, parser }: IOverflow) => {
 	const { theme } = useTheme();
@@ -59,11 +56,10 @@ export const Overflow = ({ element, loading, action, parser }: IOverflow) => {
 
 	return (
 		<>
-			<Touchable
+			<Touch
 				ref={ref => {
 					touchable[blockId] = ref;
 				}}
-				background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 				onPress={() => onShow(!show)}
 				hitSlop={BUTTON_HIT_SLOP}
 				style={styles.menu}>
@@ -72,13 +68,8 @@ export const Overflow = ({ element, loading, action, parser }: IOverflow) => {
 				) : (
 					<ActivityIndicator style={styles.loading} />
 				)}
-			</Touchable>
-			<Popover
-				isVisible={show}
-				// fromView exists in Popover Component
-				/* @ts-ignore*/
-				fromView={touchable[blockId]}
-				onRequestClose={() => onShow(false)}>
+			</Touch>
+			<Popover isVisible={show} from={touchable[blockId]} onRequestClose={() => onShow(false)}>
 				<Options options={options} onOptionPress={onOptionPress} parser={parser} theme={theme} />
 			</Popover>
 		</>
diff --git a/app/containers/UIKit/Section.tsx b/app/containers/UIKit/Section.tsx
index 17330e88075..4c5f5fd8c33 100644
--- a/app/containers/UIKit/Section.tsx
+++ b/app/containers/UIKit/Section.tsx
@@ -25,13 +25,16 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Accessory = ({ element, parser }: IAccessoryComponent) =>
-	parser.renderAccessories({ ...element }, BlockContext.SECTION, parser);
+const Accessory = ({ element, parser }: IAccessoryComponent) => parser.renderAccessories({ ...element }, BlockContext.SECTION);
 
 const Fields = ({ fields, parser, theme }: IFields) => (
 	<>
-		{fields.map(field => (
-			<Text style={[styles.text, styles.field, { color: themes[theme].fontDefault }]}>{parser.text(field)}</Text>
+		{fields.map((field, index) => (
+			<Text
+				key={`${(field as any).type || 'field'}-${index}`}
+				style={[styles.text, styles.field, { color: themes[theme].fontDefault }]}>
+				{parser.text(field)}
+			</Text>
 		))}
 	</>
 );
diff --git a/app/containers/UIKit/UiKitMessage.stories.tsx b/app/containers/UIKit/UiKitMessage.stories.tsx
index dddce08ff88..0a3b8e9dcb1 100644
--- a/app/containers/UIKit/UiKitMessage.stories.tsx
+++ b/app/containers/UIKit/UiKitMessage.stories.tsx
@@ -1,6 +1,16 @@
+import { type JSX } from 'react';
+import { ScrollView, View } from 'react-native';
+
 import MessageContext from '../message/Context';
 import { UiKitMessage } from '.';
-import { themes } from '../../lib/constants/colors';
+import { themes, colors } from '../../lib/constants/colors';
+import { longText } from '../../../.rnstorybook/utils';
+import {
+	BASE_ROW_HEIGHT,
+	BASE_ROW_HEIGHT_CONDENSED,
+	ResponsiveLayoutContext
+} from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
+import { ThemeContext, type TSupportedThemes } from '../../theme';
 
 const user = {
 	id: 'y8bd77ptZswPj3EW8',
@@ -14,22 +24,33 @@ export default {
 	title: 'UIKit/UiKitMessage',
 	decorators: [
 		(Story: any) => (
-			<MessageContext.Provider
+			<ResponsiveLayoutContext.Provider
 				value={{
-					user,
-					baseUrl,
-					onPress: () => {},
-					onLongPress: () => {},
-					reactionInit: () => {},
-					onErrorPress: () => {},
-					replyBroadcast: () => {},
-					onReactionPress: () => {},
-					onDiscussionPress: () => {},
-					onReactionLongPress: () => {},
-					threadBadgeColor: themes.light.fontInfo
+					fontScale: 1,
+					fontScaleLimited: 1,
+					isLargeFontScale: false,
+					rowHeight: BASE_ROW_HEIGHT,
+					rowHeightCondensed: BASE_ROW_HEIGHT_CONDENSED,
+					width: 350,
+					height: 800
 				}}>
-				<Story />
-			</MessageContext.Provider>
+				<MessageContext.Provider
+					value={{
+						user,
+						baseUrl,
+						onPress: () => {},
+						onLongPress: () => {},
+						reactionInit: () => {},
+						onErrorPress: () => {},
+						replyBroadcast: () => {},
+						onReactionPress: () => {},
+						onDiscussionPress: () => {},
+						onReactionLongPress: () => {},
+						threadBadgeColor: themes.light.fontInfo
+					}}>
+					<Story />
+				</MessageContext.Provider>
+			</ResponsiveLayoutContext.Provider>
 		)
 	]
 };
@@ -513,3 +534,206 @@ export const ActionSelect = () =>
 		}
 	]);
 ActionSelect.storyName = 'Action - Select';
+
+const getInfoCardAction = ({
+	appId,
+	blockId,
+	icon,
+	label
+}: {
+	appId?: string;
+	blockId?: string;
+	icon: string;
+	label?: string;
+}) => ({
+	type: 'icon_button',
+	actionId: 'open-history',
+	...(appId ? { appId } : {}),
+	...(blockId ? { blockId } : {}),
+	label: label ?? 'Call history',
+	icon: {
+		type: 'icon',
+		icon,
+		variant: 'default'
+	}
+});
+
+const ThemedStory = ({ theme, story }: { theme: TSupportedThemes; story: () => JSX.Element }) => (
+	<ThemeContext.Provider value={{ theme, colors: colors[theme] }}>
+		<View style={{ padding: 10, gap: 10, backgroundColor: colors[theme].surfaceTint }}>{story()}</View>
+	</ThemeContext.Provider>
+);
+
+const ThemedStoryInfoCardList = () => (
+	<>
+		{UiKitMessage([
+			{
+				type: 'info_card',
+				appId: 'media-call-core',
+				blockId: 'ended-call',
+				rows: [
+					{
+						background: 'default',
+						elements: [
+							{ type: 'icon', icon: 'phone-off', framed: true, variant: 'secondary' },
+							{ type: 'mrkdwn', text: 'Call ended', i18n: { key: 'Call_ended_bold' } }
+						],
+						action: getInfoCardAction({ appId: 'media-call-core', blockId: 'ended-call', icon: 'info' })
+					},
+					{
+						background: 'secondary',
+						elements: [{ type: 'mrkdwn', text: '*00:06*' }]
+					}
+				]
+			}
+		])}
+		{UiKitMessage([
+			{
+				type: 'info_card',
+				appId: 'media-call-core',
+				blockId: 'transferred-call',
+				rows: [
+					{
+						background: 'default',
+						elements: [
+							{ type: 'icon', icon: 'arrow-forward', framed: true, variant: 'secondary' },
+							{ type: 'mrkdwn', text: 'Call transferred', i18n: { key: 'Call_transferred_bold' } }
+						]
+					},
+					{
+						background: 'secondary',
+						elements: [{ type: 'mrkdwn', text: '*00:06*' }]
+					}
+				]
+			}
+		])}
+		{UiKitMessage([
+			{
+				type: 'info_card',
+				appId: 'media-call-core',
+				blockId: 'not-answered-call',
+				rows: [
+					{
+						background: 'default',
+						elements: [
+							{ type: 'icon', icon: 'phone-question-mark', framed: true, variant: 'warning' },
+							{ type: 'mrkdwn', text: 'Call not answered', i18n: { key: 'Call_not_answered_bold' } }
+						],
+						action: getInfoCardAction({ appId: 'media-call-core', blockId: 'not-answered-call', icon: 'info' })
+					}
+				]
+			}
+		])}
+		{UiKitMessage([
+			{
+				type: 'info_card',
+				appId: 'media-call-core',
+				blockId: 'failed-call',
+				rows: [
+					{
+						background: 'default',
+						elements: [
+							{ type: 'icon', icon: 'phone-issue', framed: true, variant: 'danger' },
+							{ type: 'mrkdwn', text: 'Call failed', i18n: { key: 'Call_failed_bold' } }
+						]
+					}
+				]
+			}
+		])}
+	</>
+);
+export const InfoCard = () => (
+	<ScrollView>
+		<ThemedStory theme={'light'} story={ThemedStoryInfoCardList} />
+		<ThemedStory theme={'dark'} story={ThemedStoryInfoCardList} />
+		<ThemedStory theme={'black'} story={ThemedStoryInfoCardList} />
+	</ScrollView>
+);
+
+InfoCard.storyName = 'UIKit/UiKitMessage/Info Card';
+
+export const InfoCardIcons = () =>
+	UiKitMessage([
+		{
+			type: 'info_card',
+			blockId: 'multiple-icons',
+			rows: [
+				{
+					background: 'default',
+					elements: [
+						{ type: 'plain_text', text: 'Framed icons' },
+						{ type: 'icon', icon: 'phone-off', variant: 'default', framed: true },
+						{ type: 'icon', icon: 'clock', variant: 'warning', framed: true },
+						{ type: 'icon', icon: 'phone-question-mark', variant: 'warning', framed: true },
+						{ type: 'icon', icon: 'phone-issue', variant: 'danger', framed: true }
+					]
+				},
+				{
+					background: 'secondary',
+					elements: [
+						{ type: 'plain_text', text: 'Icons' },
+						{ type: 'icon', icon: 'phone-off', variant: 'default' },
+						{ type: 'icon', icon: 'clock', variant: 'warning' },
+						{ type: 'icon', icon: 'phone-question-mark', variant: 'warning' },
+						{ type: 'icon', icon: 'phone-issue', variant: 'danger' },
+						{ type: 'icon', icon: 'info', variant: 'secondary' }
+					]
+				}
+			]
+		}
+	]);
+InfoCardIcons.storyName = 'Info Card - Icons';
+
+export const InfoCardI18n = () =>
+	UiKitMessage([
+		{
+			type: 'info_card',
+			blockId: 'i18n-keys',
+			rows: [
+				{
+					background: 'default',
+					elements: [{ type: 'mrkdwn', text: 'Call ended', i18n: { key: 'Call_ended_bold' } }]
+				},
+				{
+					background: 'default',
+					elements: [{ type: 'mrkdwn', text: 'Call failed', i18n: { key: 'Call_failed_bold' } }]
+				},
+				{
+					background: 'default',
+					elements: [{ type: 'mrkdwn', text: 'Call not answered', i18n: { key: 'Call_not_answered_bold' } }]
+				},
+				{
+					background: 'default',
+					elements: [{ type: 'mrkdwn', text: 'Call transferred', i18n: { key: 'Call_transferred_bold' } }]
+				}
+			]
+		}
+	]);
+InfoCardI18n.storyName = 'Info Card - i18n';
+
+export const InfoCardLongText = () =>
+	UiKitMessage([
+		{
+			type: 'info_card',
+			appId: 'media-call-core',
+			blockId: 'edge-action-no-ids',
+			rows: [
+				{
+					background: 'default',
+					elements: [
+						{ type: 'icon', icon: 'phone-question-mark', variant: 'warning' },
+						{
+							type: 'plain_text',
+							text: longText
+						}
+					],
+					action: getInfoCardAction({ icon: 'info', label: 'Details' })
+				},
+				{
+					background: 'secondary',
+					elements: [{ type: 'plain_text', text: longText }]
+				}
+			]
+		}
+	]);
+InfoCardLongText.storyName = 'Info Card - Long text';
diff --git a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceBaseContainer.tsx b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceBaseContainer.tsx
index 6fa9c2b14da..cfca79af54f 100644
--- a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceBaseContainer.tsx
+++ b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceBaseContainer.tsx
@@ -17,7 +17,7 @@ export const VideoConferenceBaseContainer = ({ variant, children }: VideoConfMes
 
 	const iconStyle: { [key: string]: { icon: TIconsName; color: string; backgroundColor: string; label: string } } = {
 		ended: {
-			icon: 'phone-end',
+			icon: 'phone-off',
 			color: colors.fontSecondaryInfo,
 			backgroundColor: colors.surfaceNeutral,
 			label: i18n.t('Call_ended')
diff --git a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceEnded.tsx b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceEnded.tsx
index 0fd62be8a8c..77ef75dbae8 100644
--- a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceEnded.tsx
+++ b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceEnded.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Text } from 'react-native';
-import Touchable from 'react-native-platform-touchable';
 
 import { type IUser } from '../../../../definitions';
 import { type VideoConferenceType } from '../../../../definitions/IVideoConference';
@@ -10,6 +9,7 @@ import { useVideoConf } from '../../../../lib/hooks/useVideoConf';
 import { CallParticipants, type TCallUsers } from './CallParticipants';
 import useStyle from './styles';
 import { VideoConferenceBaseContainer } from './VideoConferenceBaseContainer';
+import Touch from '../../../Touch';
 
 export default function VideoConferenceEnded({
 	users,
@@ -32,11 +32,11 @@ export default function VideoConferenceEnded({
 		<VideoConferenceBaseContainer variant='ended'>
 			{type === 'direct' ? (
 				<>
-					<Touchable style={style.callToActionCallBack} onPress={showInitCallActionSheet}>
+					<Touch style={style.callToActionCallBack} onPress={showInitCallActionSheet}>
 						<Text style={style.callToActionCallBackText}>
 							{createdBy.username === username ? i18n.t('Call_again') : i18n.t('Call_back')}
 						</Text>
-					</Touchable>
+					</Touch>
 					<Text style={style.callBack}>{i18n.t('Call_was_not_answered')}</Text>
 				</>
 			) : (
diff --git a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceOutgoing.tsx b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceOutgoing.tsx
index accb49d285c..ea5f7984842 100644
--- a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceOutgoing.tsx
+++ b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceOutgoing.tsx
@@ -1,21 +1,21 @@
 import React from 'react';
 import { Text } from 'react-native';
-import Touchable from 'react-native-platform-touchable';
 
 import i18n from '../../../../i18n';
 import { videoConfJoin } from '../../../../lib/methods/videoConf';
 import { CallParticipants, type TCallUsers } from './CallParticipants';
 import useStyle from './styles';
 import { VideoConferenceBaseContainer } from './VideoConferenceBaseContainer';
+import Touch from '../../../Touch';
 
 export default function VideoConferenceOutgoing({ users, blockId }: { users: TCallUsers; blockId: string }): React.ReactElement {
 	const style = useStyle();
 
 	return (
 		<VideoConferenceBaseContainer variant='outgoing'>
-			<Touchable style={style.callToActionButton} onPress={() => videoConfJoin(blockId)}>
+			<Touch style={style.callToActionButton} onPress={() => videoConfJoin(blockId)}>
 				<Text style={style.callToActionButtonText}>{i18n.t('Join')}</Text>
-			</Touchable>
+			</Touch>
 			<CallParticipants users={users} />
 		</VideoConferenceBaseContainer>
 	);
diff --git a/app/containers/UIKit/__snapshots__/UiKitMessage.test.tsx.snap b/app/containers/UIKit/__snapshots__/UiKitMessage.test.tsx.snap
index 7458a149302..7afc636e519 100644
--- a/app/containers/UIKit/__snapshots__/UiKitMessage.test.tsx.snap
+++ b/app/containers/UIKit/__snapshots__/UiKitMessage.test.tsx.snap
@@ -3,47 +3,44 @@
 exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
 [
   <View>
-    <View
+    <RNGestureHandlerButton
       accessibilityLabel="Approve"
       accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
+      collapsable={false}
+      enabled={true}
+      hitSlop={
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
         }
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      rippleColor="transparent"
       style={
-        {
-          "backgroundColor": "#156FF5",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "marginBottom": 16,
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 14,
-        }
+        [
+          {},
+          [
+            {
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 14,
+            },
+            {
+              "borderRadius": 4,
+              "marginBottom": 12,
+            },
+            {
+              "backgroundColor": "#156FF5",
+            },
+            {},
+            {
+              "marginBottom": 16,
+            },
+          ],
+        ]
       }
+      testOnly_onPress={[Function]}
     >
       <Text
         style={
@@ -64,50 +61,47 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
       >
         Approve
       </Text>
-    </View>
+    </RNGestureHandlerButton>
   </View>,
   <View>
-    <View
+    <RNGestureHandlerButton
       accessibilityLabel="Deny"
       accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
+      collapsable={false}
+      enabled={true}
+      hitSlop={
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
         }
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      rippleColor="transparent"
       style={
-        {
-          "backgroundColor": "#E4E7EA",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "marginBottom": 16,
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 14,
-        }
+        [
+          {},
+          [
+            {
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 14,
+            },
+            {
+              "borderRadius": 4,
+              "marginBottom": 12,
+            },
+            {
+              "backgroundColor": "#E4E7EA",
+            },
+            {},
+            {
+              "marginBottom": 16,
+            },
+          ],
+        ]
       }
+      testOnly_onPress={[Function]}
     >
       <Text
         style={
@@ -128,50 +122,47 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
       >
         Deny
       </Text>
-    </View>
+    </RNGestureHandlerButton>
   </View>,
   <View>
-    <View
+    <RNGestureHandlerButton
       accessibilityLabel="Deny"
       accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
+      collapsable={false}
+      enabled={true}
+      hitSlop={
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
         }
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      rippleColor="transparent"
       style={
-        {
-          "backgroundColor": "#E4E7EA",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "marginBottom": 16,
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 14,
-        }
+        [
+          {},
+          [
+            {
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 14,
+            },
+            {
+              "borderRadius": 4,
+              "marginBottom": 12,
+            },
+            {
+              "backgroundColor": "#E4E7EA",
+            },
+            {},
+            {
+              "marginBottom": 16,
+            },
+          ],
+        ]
       }
+      testOnly_onPress={[Function]}
     >
       <Text
         style={
@@ -192,50 +183,47 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
       >
         Deny
       </Text>
-    </View>
+    </RNGestureHandlerButton>
   </View>,
   <View>
-    <View
+    <RNGestureHandlerButton
       accessibilityLabel="Deny"
       accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
+      collapsable={false}
+      enabled={true}
+      hitSlop={
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
         }
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      rippleColor="transparent"
       style={
-        {
-          "backgroundColor": "#E4E7EA",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "marginBottom": 16,
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 14,
-        }
+        [
+          {},
+          [
+            {
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 14,
+            },
+            {
+              "borderRadius": 4,
+              "marginBottom": 12,
+            },
+            {
+              "backgroundColor": "#E4E7EA",
+            },
+            {},
+            {
+              "marginBottom": 16,
+            },
+          ],
+        ]
       }
+      testOnly_onPress={[Function]}
     >
       <Text
         style={
@@ -256,50 +244,47 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
       >
         Deny
       </Text>
-    </View>
+    </RNGestureHandlerButton>
   </View>,
   <View>
-    <View
+    <RNGestureHandlerButton
       accessibilityLabel="Deny"
       accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
+      collapsable={false}
+      enabled={true}
+      hitSlop={
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
         }
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      rippleColor="transparent"
       style={
-        {
-          "backgroundColor": "#E4E7EA",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "marginBottom": 16,
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 14,
-        }
+        [
+          {},
+          [
+            {
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 14,
+            },
+            {
+              "borderRadius": 4,
+              "marginBottom": 12,
+            },
+            {
+              "backgroundColor": "#E4E7EA",
+            },
+            {},
+            {
+              "marginBottom": 16,
+            },
+          ],
+        ]
       }
+      testOnly_onPress={[Function]}
     >
       <Text
         style={
@@ -320,7 +305,7 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
       >
         Deny
       </Text>
-    </View>
+    </RNGestureHandlerButton>
   </View>,
   <View
     style={
@@ -330,47 +315,44 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
       }
     }
   >
-    <View
+    <RNGestureHandlerButton
       accessibilityLabel="Deny"
       accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
+      collapsable={false}
+      enabled={true}
+      hitSlop={
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
         }
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      rippleColor="transparent"
       style={
-        {
-          "backgroundColor": "#E4E7EA",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "marginBottom": 16,
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 14,
-        }
+        [
+          {},
+          [
+            {
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 14,
+            },
+            {
+              "borderRadius": 4,
+              "marginBottom": 12,
+            },
+            {
+              "backgroundColor": "#E4E7EA",
+            },
+            {},
+            {
+              "marginBottom": 16,
+            },
+          ],
+        ]
       }
+      testOnly_onPress={[Function]}
     >
       <Text
         style={
@@ -391,7 +373,7 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
       >
         Deny
       </Text>
-    </View>
+    </RNGestureHandlerButton>
   </View>,
   <View
     style={
@@ -401,47 +383,44 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
       }
     }
   >
-    <View
+    <RNGestureHandlerButton
       accessibilityLabel="Deny"
       accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
+      collapsable={false}
+      enabled={true}
+      hitSlop={
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
         }
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      rippleColor="transparent"
       style={
-        {
-          "backgroundColor": "#E4E7EA",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "marginBottom": 16,
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 14,
-        }
+        [
+          {},
+          [
+            {
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 14,
+            },
+            {
+              "borderRadius": 4,
+              "marginBottom": 12,
+            },
+            {
+              "backgroundColor": "#E4E7EA",
+            },
+            {},
+            {
+              "marginBottom": 16,
+            },
+          ],
+        ]
       }
+      testOnly_onPress={[Function]}
     >
       <Text
         style={
@@ -462,49 +441,44 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
       >
         Deny
       </Text>
-    </View>
+    </RNGestureHandlerButton>
   </View>,
-  <View
+  <RNGestureHandlerButton
     accessibilityLabel="Show more"
     accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
+    collapsable={false}
+    enabled={true}
+    hitSlop={
       {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
       }
     }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+    rippleColor="transparent"
     style={
-      {
-        "backgroundColor": "#156FF5",
-        "borderRadius": 4,
-        "justifyContent": "center",
-        "marginBottom": 12,
-        "opacity": 1,
-        "paddingHorizontal": 16,
-        "paddingVertical": 14,
-      }
+      [
+        {},
+        [
+          {
+            "justifyContent": "center",
+            "paddingHorizontal": 16,
+            "paddingVertical": 14,
+          },
+          {
+            "borderRadius": 4,
+            "marginBottom": 12,
+          },
+          {
+            "backgroundColor": "#156FF5",
+          },
+          {},
+          undefined,
+        ],
+      ]
     }
+    testOnly_onPress={[Function]}
   >
     <Text
       style={
@@ -525,7 +499,7 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
     >
       Show more
     </Text>
-  </View>,
+  </RNGestureHandlerButton>,
 ]
 `;
 
@@ -848,9 +822,3797 @@ exports[`Story Snapshots: Fields should match snapshot 1`] = `
         ]
       }
     >
-      *this is plain_text text*
-    </Text>
-  </Text>
+      *this is plain_text text*
+    </Text>
+  </Text>
+</View>
+`;
+
+exports[`Story Snapshots: InfoCard should match snapshot 1`] = `
+<RCTScrollView>
+  <View>
+    <View
+      style={
+        {
+          "backgroundColor": "#F7F8FA",
+          "gap": 10,
+          "padding": 10,
+        }
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "borderRadius": 4,
+              "borderWidth": 0.5,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": "#F7F8FA",
+              "borderColor": "#EBECEF",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "padding": 16,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "borderRadius": 4,
+                      "height": 28,
+                      "justifyContent": "center",
+                      "width": 28,
+                    },
+                    {
+                      "backgroundColor": "#F7F8FA",
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#6C727A",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "gap": 2,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#2F343D",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    style={
+                      {
+                        "backgroundColor": "transparent",
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      <Text
+                        accessibilityLabel="Voice call ended"
+                        style={
+                          [
+                            {
+                              "flexShrink": 1,
+                              "fontSize": 16,
+                              "lineHeight": 22,
+                            },
+                            {
+                              "color": "#2F343D",
+                            },
+                            {
+                              "fontSize": 14,
+                            },
+                          ]
+                        }
+                      >
+                        Voice call ended
+                      </Text>
+                    </Text>
+                  </Text>
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "padding": 16,
+              },
+              {
+                "backgroundColor": undefined,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "gap": 2,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#2F343D",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    style={
+                      {
+                        "backgroundColor": "transparent",
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      <Text
+                        accessibilityLabel="00:06"
+                        style={
+                          [
+                            {
+                              "flexShrink": 1,
+                              "fontSize": 16,
+                              "lineHeight": 22,
+                            },
+                            {
+                              "color": "#2F343D",
+                            },
+                            {
+                              "fontSize": 14,
+                            },
+                          ]
+                        }
+                      >
+                        00:06
+                      </Text>
+                    </Text>
+                  </Text>
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          [
+            {
+              "borderRadius": 4,
+              "borderWidth": 0.5,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": "#F7F8FA",
+              "borderColor": "#EBECEF",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "padding": 16,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "borderRadius": 4,
+                      "height": 28,
+                      "justifyContent": "center",
+                      "width": 28,
+                    },
+                    {
+                      "backgroundColor": "#F7F8FA",
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#6C727A",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "gap": 2,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#2F343D",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    style={
+                      {
+                        "backgroundColor": "transparent",
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      <Text
+                        accessibilityLabel="Voice call transferred"
+                        style={
+                          [
+                            {
+                              "flexShrink": 1,
+                              "fontSize": 16,
+                              "lineHeight": 22,
+                            },
+                            {
+                              "color": "#2F343D",
+                            },
+                            {
+                              "fontSize": 14,
+                            },
+                          ]
+                        }
+                      >
+                        Voice call transferred
+                      </Text>
+                    </Text>
+                  </Text>
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "padding": 16,
+              },
+              {
+                "backgroundColor": undefined,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "gap": 2,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#2F343D",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    style={
+                      {
+                        "backgroundColor": "transparent",
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      <Text
+                        accessibilityLabel="00:06"
+                        style={
+                          [
+                            {
+                              "flexShrink": 1,
+                              "fontSize": 16,
+                              "lineHeight": 22,
+                            },
+                            {
+                              "color": "#2F343D",
+                            },
+                            {
+                              "fontSize": 14,
+                            },
+                          ]
+                        }
+                      >
+                        00:06
+                      </Text>
+                    </Text>
+                  </Text>
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          [
+            {
+              "borderRadius": 4,
+              "borderWidth": 0.5,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": "#F7F8FA",
+              "borderColor": "#EBECEF",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "padding": 16,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "borderRadius": 4,
+                      "height": 28,
+                      "justifyContent": "center",
+                      "width": 28,
+                    },
+                    {
+                      "backgroundColor": "#F7F8FA",
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#8E6300",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "gap": 2,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#2F343D",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    style={
+                      {
+                        "backgroundColor": "transparent",
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      <Text
+                        accessibilityLabel="Voice call not answered"
+                        style={
+                          [
+                            {
+                              "flexShrink": 1,
+                              "fontSize": 16,
+                              "lineHeight": 22,
+                            },
+                            {
+                              "color": "#2F343D",
+                            },
+                            {
+                              "fontSize": 14,
+                            },
+                          ]
+                        }
+                      >
+                        Voice call not answered
+                      </Text>
+                    </Text>
+                  </Text>
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          [
+            {
+              "borderRadius": 4,
+              "borderWidth": 0.5,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": "#F7F8FA",
+              "borderColor": "#EBECEF",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "padding": 16,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "borderRadius": 4,
+                      "height": 28,
+                      "justifyContent": "center",
+                      "width": 28,
+                    },
+                    {
+                      "backgroundColor": "#F7F8FA",
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#9B1325",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "gap": 2,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#2F343D",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    style={
+                      {
+                        "backgroundColor": "transparent",
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      <Text
+                        accessibilityLabel="Voice call failed"
+                        style={
+                          [
+                            {
+                              "flexShrink": 1,
+                              "fontSize": 16,
+                              "lineHeight": 22,
+                            },
+                            {
+                              "color": "#2F343D",
+                            },
+                            {
+                              "fontSize": 14,
+                            },
+                          ]
+                        }
+                      >
+                        Voice call failed
+                      </Text>
+                    </Text>
+                  </Text>
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#1F2329",
+          "gap": 10,
+          "padding": 10,
+        }
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "borderRadius": 4,
+              "borderWidth": 0.5,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": "#1F2329",
+              "borderColor": "#2F343D",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "padding": 16,
+              },
+              {
+                "backgroundColor": "#262931",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "borderRadius": 4,
+                      "height": 28,
+                      "justifyContent": "center",
+                      "width": 28,
+                    },
+                    {
+                      "backgroundColor": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#9EA2A8",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "gap": 2,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#E4E7EA",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    style={
+                      {
+                        "backgroundColor": "transparent",
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      <Text
+                        accessibilityLabel="Voice call ended"
+                        style={
+                          [
+                            {
+                              "flexShrink": 1,
+                              "fontSize": 16,
+                              "lineHeight": 22,
+                            },
+                            {
+                              "color": "#E4E7EA",
+                            },
+                            {
+                              "fontSize": 14,
+                            },
+                          ]
+                        }
+                      >
+                        Voice call ended
+                      </Text>
+                    </Text>
+                  </Text>
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "padding": 16,
+              },
+              {
+                "backgroundColor": undefined,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "gap": 2,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#E4E7EA",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    style={
+                      {
+                        "backgroundColor": "transparent",
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      <Text
+                        accessibilityLabel="00:06"
+                        style={
+                          [
+                            {
+                              "flexShrink": 1,
+                              "fontSize": 16,
+                              "lineHeight": 22,
+                            },
+                            {
+                              "color": "#E4E7EA",
+                            },
+                            {
+                              "fontSize": 14,
+                            },
+                          ]
+                        }
+                      >
+                        00:06
+                      </Text>
+                    </Text>
+                  </Text>
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          [
+            {
+              "borderRadius": 4,
+              "borderWidth": 0.5,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": "#1F2329",
+              "borderColor": "#2F343D",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "padding": 16,
+              },
+              {
+                "backgroundColor": "#262931",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "borderRadius": 4,
+                      "height": 28,
+                      "justifyContent": "center",
+                      "width": 28,
+                    },
+                    {
+                      "backgroundColor": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#9EA2A8",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "gap": 2,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#E4E7EA",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    style={
+                      {
+                        "backgroundColor": "transparent",
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      <Text
+                        accessibilityLabel="Voice call transferred"
+                        style={
+                          [
+                            {
+                              "flexShrink": 1,
+                              "fontSize": 16,
+                              "lineHeight": 22,
+                            },
+                            {
+                              "color": "#E4E7EA",
+                            },
+                            {
+                              "fontSize": 14,
+                            },
+                          ]
+                        }
+                      >
+                        Voice call transferred
+                      </Text>
+                    </Text>
+                  </Text>
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "padding": 16,
+              },
+              {
+                "backgroundColor": undefined,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "gap": 2,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#E4E7EA",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    style={
+                      {
+                        "backgroundColor": "transparent",
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      <Text
+                        accessibilityLabel="00:06"
+                        style={
+                          [
+                            {
+                              "flexShrink": 1,
+                              "fontSize": 16,
+                              "lineHeight": 22,
+                            },
+                            {
+                              "color": "#E4E7EA",
+                            },
+                            {
+                              "fontSize": 14,
+                            },
+                          ]
+                        }
+                      >
+                        00:06
+                      </Text>
+                    </Text>
+                  </Text>
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          [
+            {
+              "borderRadius": 4,
+              "borderWidth": 0.5,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": "#1F2329",
+              "borderColor": "#2F343D",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "padding": 16,
+              },
+              {
+                "backgroundColor": "#262931",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "borderRadius": 4,
+                      "height": 28,
+                      "justifyContent": "center",
+                      "width": 28,
+                    },
+                    {
+                      "backgroundColor": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#C7AA66",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "gap": 2,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#E4E7EA",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    style={
+                      {
+                        "backgroundColor": "transparent",
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      <Text
+                        accessibilityLabel="Voice call not answered"
+                        style={
+                          [
+                            {
+                              "flexShrink": 1,
+                              "fontSize": 16,
+                              "lineHeight": 22,
+                            },
+                            {
+                              "color": "#E4E7EA",
+                            },
+                            {
+                              "fontSize": 14,
+                            },
+                          ]
+                        }
+                      >
+                        Voice call not answered
+                      </Text>
+                    </Text>
+                  </Text>
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          [
+            {
+              "borderRadius": 4,
+              "borderWidth": 0.5,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": "#1F2329",
+              "borderColor": "#2F343D",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "padding": 16,
+              },
+              {
+                "backgroundColor": "#262931",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "borderRadius": 4,
+                      "height": 28,
+                      "justifyContent": "center",
+                      "width": 28,
+                    },
+                    {
+                      "backgroundColor": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#D88892",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "gap": 2,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#E4E7EA",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    style={
+                      {
+                        "backgroundColor": "transparent",
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      <Text
+                        accessibilityLabel="Voice call failed"
+                        style={
+                          [
+                            {
+                              "flexShrink": 1,
+                              "fontSize": 16,
+                              "lineHeight": 22,
+                            },
+                            {
+                              "color": "#E4E7EA",
+                            },
+                            {
+                              "fontSize": 14,
+                            },
+                          ]
+                        }
+                      >
+                        Voice call failed
+                      </Text>
+                    </Text>
+                  </Text>
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#16181a",
+          "gap": 10,
+          "padding": 10,
+        }
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "borderRadius": 4,
+              "borderWidth": 0.5,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": "#16181a",
+              "borderColor": "#2F343D",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "padding": 16,
+              },
+              {
+                "backgroundColor": "#0d0d0d",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "borderRadius": 4,
+                      "height": 28,
+                      "justifyContent": "center",
+                      "width": 28,
+                    },
+                    {
+                      "backgroundColor": "#16181a",
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#9EA2A8",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "gap": 2,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#E4E7EA",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    style={
+                      {
+                        "backgroundColor": "transparent",
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      <Text
+                        accessibilityLabel="Voice call ended"
+                        style={
+                          [
+                            {
+                              "flexShrink": 1,
+                              "fontSize": 16,
+                              "lineHeight": 22,
+                            },
+                            {
+                              "color": "#E4E7EA",
+                            },
+                            {
+                              "fontSize": 14,
+                            },
+                          ]
+                        }
+                      >
+                        Voice call ended
+                      </Text>
+                    </Text>
+                  </Text>
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "padding": 16,
+              },
+              {
+                "backgroundColor": undefined,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "gap": 2,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#E4E7EA",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    style={
+                      {
+                        "backgroundColor": "transparent",
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      <Text
+                        accessibilityLabel="00:06"
+                        style={
+                          [
+                            {
+                              "flexShrink": 1,
+                              "fontSize": 16,
+                              "lineHeight": 22,
+                            },
+                            {
+                              "color": "#E4E7EA",
+                            },
+                            {
+                              "fontSize": 14,
+                            },
+                          ]
+                        }
+                      >
+                        00:06
+                      </Text>
+                    </Text>
+                  </Text>
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          [
+            {
+              "borderRadius": 4,
+              "borderWidth": 0.5,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": "#16181a",
+              "borderColor": "#2F343D",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "padding": 16,
+              },
+              {
+                "backgroundColor": "#0d0d0d",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "borderRadius": 4,
+                      "height": 28,
+                      "justifyContent": "center",
+                      "width": 28,
+                    },
+                    {
+                      "backgroundColor": "#16181a",
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#9EA2A8",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "gap": 2,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#E4E7EA",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    style={
+                      {
+                        "backgroundColor": "transparent",
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      <Text
+                        accessibilityLabel="Voice call transferred"
+                        style={
+                          [
+                            {
+                              "flexShrink": 1,
+                              "fontSize": 16,
+                              "lineHeight": 22,
+                            },
+                            {
+                              "color": "#E4E7EA",
+                            },
+                            {
+                              "fontSize": 14,
+                            },
+                          ]
+                        }
+                      >
+                        Voice call transferred
+                      </Text>
+                    </Text>
+                  </Text>
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "padding": 16,
+              },
+              {
+                "backgroundColor": undefined,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "gap": 2,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#E4E7EA",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    style={
+                      {
+                        "backgroundColor": "transparent",
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      <Text
+                        accessibilityLabel="00:06"
+                        style={
+                          [
+                            {
+                              "flexShrink": 1,
+                              "fontSize": 16,
+                              "lineHeight": 22,
+                            },
+                            {
+                              "color": "#E4E7EA",
+                            },
+                            {
+                              "fontSize": 14,
+                            },
+                          ]
+                        }
+                      >
+                        00:06
+                      </Text>
+                    </Text>
+                  </Text>
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          [
+            {
+              "borderRadius": 4,
+              "borderWidth": 0.5,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": "#16181a",
+              "borderColor": "#2F343D",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "padding": 16,
+              },
+              {
+                "backgroundColor": "#0d0d0d",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "borderRadius": 4,
+                      "height": 28,
+                      "justifyContent": "center",
+                      "width": 28,
+                    },
+                    {
+                      "backgroundColor": "#16181a",
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#C7AA66",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "gap": 2,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#E4E7EA",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    style={
+                      {
+                        "backgroundColor": "transparent",
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      <Text
+                        accessibilityLabel="Voice call not answered"
+                        style={
+                          [
+                            {
+                              "flexShrink": 1,
+                              "fontSize": 16,
+                              "lineHeight": 22,
+                            },
+                            {
+                              "color": "#E4E7EA",
+                            },
+                            {
+                              "fontSize": 14,
+                            },
+                          ]
+                        }
+                      >
+                        Voice call not answered
+                      </Text>
+                    </Text>
+                  </Text>
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          [
+            {
+              "borderRadius": 4,
+              "borderWidth": 0.5,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": "#16181a",
+              "borderColor": "#2F343D",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "padding": 16,
+              },
+              {
+                "backgroundColor": "#0d0d0d",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "borderRadius": 4,
+                      "height": 28,
+                      "justifyContent": "center",
+                      "width": 28,
+                    },
+                    {
+                      "backgroundColor": "#16181a",
+                    },
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#D88892",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "marginHorizontal": 4,
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "gap": 2,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#E4E7EA",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    style={
+                      {
+                        "backgroundColor": "transparent",
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      <Text
+                        accessibilityLabel="Voice call failed"
+                        style={
+                          [
+                            {
+                              "flexShrink": 1,
+                              "fontSize": 16,
+                              "lineHeight": 22,
+                            },
+                            {
+                              "color": "#E4E7EA",
+                            },
+                            {
+                              "fontSize": 14,
+                            },
+                          ]
+                        }
+                      >
+                        Voice call failed
+                      </Text>
+                    </Text>
+                  </Text>
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: InfoCardI18n should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "borderRadius": 4,
+        "borderWidth": 0.5,
+        "overflow": "hidden",
+      },
+      {
+        "backgroundColor": "#F7F8FA",
+        "borderColor": "#EBECEF",
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        {
+          "backgroundColor": "#FFFFFF",
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "flexWrap": "wrap",
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "marginHorizontal": 4,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "gap": 2,
+            }
+          }
+        >
+          <Text
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 16,
+                  "fontWeight": "400",
+                  "lineHeight": 22,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#2F343D",
+                },
+              ]
+            }
+          >
+            <Text
+              style={
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontWeight": "400",
+                  "textAlign": "left",
+                }
+              }
+            >
+              <Text
+                style={
+                  {
+                    "backgroundColor": "transparent",
+                    "fontFamily": "Inter",
+                    "fontWeight": "700",
+                    "textAlign": "left",
+                  }
+                }
+              >
+                <Text
+                  accessibilityLabel="Voice call ended"
+                  style={
+                    [
+                      {
+                        "flexShrink": 1,
+                        "fontSize": 16,
+                        "lineHeight": 22,
+                      },
+                      {
+                        "color": "#2F343D",
+                      },
+                      {
+                        "fontSize": 14,
+                      },
+                    ]
+                  }
+                >
+                  Voice call ended
+                </Text>
+              </Text>
+            </Text>
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        {
+          "backgroundColor": "#FFFFFF",
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "flexWrap": "wrap",
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "marginHorizontal": 4,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "gap": 2,
+            }
+          }
+        >
+          <Text
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 16,
+                  "fontWeight": "400",
+                  "lineHeight": 22,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#2F343D",
+                },
+              ]
+            }
+          >
+            <Text
+              style={
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontWeight": "400",
+                  "textAlign": "left",
+                }
+              }
+            >
+              <Text
+                style={
+                  {
+                    "backgroundColor": "transparent",
+                    "fontFamily": "Inter",
+                    "fontWeight": "700",
+                    "textAlign": "left",
+                  }
+                }
+              >
+                <Text
+                  accessibilityLabel="Voice call failed"
+                  style={
+                    [
+                      {
+                        "flexShrink": 1,
+                        "fontSize": 16,
+                        "lineHeight": 22,
+                      },
+                      {
+                        "color": "#2F343D",
+                      },
+                      {
+                        "fontSize": 14,
+                      },
+                    ]
+                  }
+                >
+                  Voice call failed
+                </Text>
+              </Text>
+            </Text>
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        {
+          "backgroundColor": "#FFFFFF",
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "flexWrap": "wrap",
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "marginHorizontal": 4,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "gap": 2,
+            }
+          }
+        >
+          <Text
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 16,
+                  "fontWeight": "400",
+                  "lineHeight": 22,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#2F343D",
+                },
+              ]
+            }
+          >
+            <Text
+              style={
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontWeight": "400",
+                  "textAlign": "left",
+                }
+              }
+            >
+              <Text
+                style={
+                  {
+                    "backgroundColor": "transparent",
+                    "fontFamily": "Inter",
+                    "fontWeight": "700",
+                    "textAlign": "left",
+                  }
+                }
+              >
+                <Text
+                  accessibilityLabel="Voice call not answered"
+                  style={
+                    [
+                      {
+                        "flexShrink": 1,
+                        "fontSize": 16,
+                        "lineHeight": 22,
+                      },
+                      {
+                        "color": "#2F343D",
+                      },
+                      {
+                        "fontSize": 14,
+                      },
+                    ]
+                  }
+                >
+                  Voice call not answered
+                </Text>
+              </Text>
+            </Text>
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        {
+          "backgroundColor": "#FFFFFF",
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "flexWrap": "wrap",
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "marginHorizontal": 4,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "gap": 2,
+            }
+          }
+        >
+          <Text
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 16,
+                  "fontWeight": "400",
+                  "lineHeight": 22,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#2F343D",
+                },
+              ]
+            }
+          >
+            <Text
+              style={
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontWeight": "400",
+                  "textAlign": "left",
+                }
+              }
+            >
+              <Text
+                style={
+                  {
+                    "backgroundColor": "transparent",
+                    "fontFamily": "Inter",
+                    "fontWeight": "700",
+                    "textAlign": "left",
+                  }
+                }
+              >
+                <Text
+                  accessibilityLabel="Voice call transferred"
+                  style={
+                    [
+                      {
+                        "flexShrink": 1,
+                        "fontSize": 16,
+                        "lineHeight": 22,
+                      },
+                      {
+                        "color": "#2F343D",
+                      },
+                      {
+                        "fontSize": 14,
+                      },
+                    ]
+                  }
+                >
+                  Voice call transferred
+                </Text>
+              </Text>
+            </Text>
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Story Snapshots: InfoCardIcons should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "borderRadius": 4,
+        "borderWidth": 0.5,
+        "overflow": "hidden",
+      },
+      {
+        "backgroundColor": "#F7F8FA",
+        "borderColor": "#EBECEF",
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        {
+          "backgroundColor": "#FFFFFF",
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "flexWrap": "wrap",
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "marginHorizontal": 4,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textAlign": "left",
+                "textAlignVertical": "center",
+              },
+              {
+                "color": "#2F343D",
+              },
+            ]
+          }
+        >
+          Framed icons
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "marginHorizontal": 4,
+          }
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "borderRadius": 4,
+                "height": 28,
+                "justifyContent": "center",
+                "width": 28,
+              },
+              {
+                "backgroundColor": "#F7F8FA",
+              },
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "#2F343D",
+                  "fontSize": 20,
+                },
+                [
+                  {
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+      <View
+        style={
+          {
+            "marginHorizontal": 4,
+          }
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "borderRadius": 4,
+                "height": 28,
+                "justifyContent": "center",
+                "width": 28,
+              },
+              {
+                "backgroundColor": "#F7F8FA",
+              },
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "#8E6300",
+                  "fontSize": 20,
+                },
+                [
+                  {
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+      <View
+        style={
+          {
+            "marginHorizontal": 4,
+          }
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "borderRadius": 4,
+                "height": 28,
+                "justifyContent": "center",
+                "width": 28,
+              },
+              {
+                "backgroundColor": "#F7F8FA",
+              },
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "#8E6300",
+                  "fontSize": 20,
+                },
+                [
+                  {
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+      <View
+        style={
+          {
+            "marginHorizontal": 4,
+          }
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "borderRadius": 4,
+                "height": 28,
+                "justifyContent": "center",
+                "width": 28,
+              },
+              {
+                "backgroundColor": "#F7F8FA",
+              },
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "#9B1325",
+                  "fontSize": 20,
+                },
+                [
+                  {
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        {
+          "backgroundColor": undefined,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "flexWrap": "wrap",
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "marginHorizontal": 4,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textAlign": "left",
+                "textAlignVertical": "center",
+              },
+              {
+                "color": "#2F343D",
+              },
+            ]
+          }
+        >
+          Icons
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "marginHorizontal": 4,
+          }
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
+            [
+              {
+                "color": "#2F343D",
+                "fontSize": 20,
+              },
+              [
+                {
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "marginHorizontal": 4,
+          }
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
+            [
+              {
+                "color": "#8E6300",
+                "fontSize": 20,
+              },
+              [
+                {
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "marginHorizontal": 4,
+          }
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
+            [
+              {
+                "color": "#8E6300",
+                "fontSize": 20,
+              },
+              [
+                {
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "marginHorizontal": 4,
+          }
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
+            [
+              {
+                "color": "#D40C26",
+                "fontSize": 20,
+              },
+              [
+                {
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "marginHorizontal": 4,
+          }
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
+            [
+              {
+                "color": "#6C727A",
+                "fontSize": 20,
+              },
+              [
+                {
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Story Snapshots: InfoCardLongText should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "borderRadius": 4,
+        "borderWidth": 0.5,
+        "overflow": "hidden",
+      },
+      {
+        "backgroundColor": "#F7F8FA",
+        "borderColor": "#EBECEF",
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        {
+          "backgroundColor": "#FFFFFF",
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "flexWrap": "wrap",
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "marginHorizontal": 4,
+          }
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
+            [
+              {
+                "color": "#8E6300",
+                "fontSize": 20,
+              },
+              [
+                {
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "marginHorizontal": 4,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textAlign": "left",
+                "textAlignVertical": "center",
+              },
+              {
+                "color": "#2F343D",
+              },
+            ]
+          }
+        >
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+        </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        {
+          "backgroundColor": undefined,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "flexWrap": "wrap",
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "marginHorizontal": 4,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textAlign": "left",
+                "textAlignVertical": "center",
+              },
+              {
+                "color": "#2F343D",
+              },
+            ]
+          }
+        >
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+        </Text>
+      </View>
+    </View>
+  </View>
 </View>
 `;
 
@@ -922,6 +4684,9 @@ exports[`Story Snapshots: Section should match snapshot 1`] = `
                 {
                   "color": "#2F343D",
                 },
+                {
+                  "fontSize": 14,
+                },
               ]
             }
           >
@@ -1002,6 +4767,9 @@ exports[`Story Snapshots: SectionButton should match snapshot 1`] = `
                 {
                   "color": "#2F343D",
                 },
+                {
+                  "fontSize": 14,
+                },
               ]
             }
           >
@@ -1011,47 +4779,44 @@ exports[`Story Snapshots: SectionButton should match snapshot 1`] = `
       </Text>
     </View>
   </View>
-  <View
+  <RNGestureHandlerButton
     accessibilityLabel="button"
     accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": false,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
+    collapsable={false}
+    enabled={true}
+    hitSlop={
       {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
       }
     }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+    rippleColor="transparent"
     style={
-      {
-        "backgroundColor": "#156FF5",
-        "borderRadius": 4,
-        "justifyContent": "center",
-        "marginBottom": 16,
-        "opacity": 1,
-        "paddingHorizontal": 16,
-        "paddingVertical": 14,
-      }
+      [
+        {},
+        [
+          {
+            "justifyContent": "center",
+            "paddingHorizontal": 16,
+            "paddingVertical": 14,
+          },
+          {
+            "borderRadius": 4,
+            "marginBottom": 12,
+          },
+          {
+            "backgroundColor": "#156FF5",
+          },
+          {},
+          {
+            "marginBottom": 16,
+          },
+        ],
+      ]
     }
+    testOnly_onPress={[Function]}
   >
     <Text
       style={
@@ -1072,7 +4837,7 @@ exports[`Story Snapshots: SectionButton should match snapshot 1`] = `
     >
       button
     </Text>
-  </View>
+  </RNGestureHandlerButton>
 </View>
 `;
 
@@ -1144,6 +4909,9 @@ exports[`Story Snapshots: SectionDatePicker should match snapshot 1`] = `
                 {
                   "color": "#2F343D",
                 },
+                {
+                  "fontSize": 14,
+                },
               ]
             }
           >
@@ -1153,47 +4921,42 @@ exports[`Story Snapshots: SectionDatePicker should match snapshot 1`] = `
       </Text>
     </View>
   </View>
-  <View
+  <RNGestureHandlerButton
     accessibilityLabel="Select a date"
     accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": false,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
+    collapsable={false}
+    enabled={true}
+    hitSlop={
       {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
       }
     }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+    rippleColor="transparent"
     style={
-      {
-        "backgroundColor": "#156FF5",
-        "borderRadius": 4,
-        "justifyContent": "center",
-        "marginBottom": 12,
-        "opacity": 1,
-        "paddingHorizontal": 16,
-        "paddingVertical": 14,
-      }
+      [
+        {},
+        [
+          {
+            "justifyContent": "center",
+            "paddingHorizontal": 16,
+            "paddingVertical": 14,
+          },
+          {
+            "borderRadius": 4,
+            "marginBottom": 12,
+          },
+          {
+            "backgroundColor": "#156FF5",
+          },
+          {},
+          undefined,
+        ],
+      ]
     }
+    testOnly_onPress={[Function]}
   >
     <Text
       style={
@@ -1214,7 +4977,7 @@ exports[`Story Snapshots: SectionDatePicker should match snapshot 1`] = `
     >
       Select a date
     </Text>
-  </View>
+  </RNGestureHandlerButton>
 </View>
 `;
 
@@ -1296,6 +5059,9 @@ exports[`Story Snapshots: SectionMarkdownList should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -1314,6 +5080,9 @@ exports[`Story Snapshots: SectionMarkdownList should match snapshot 1`] = `
                 {
                   "color": "#2F343D",
                 },
+                {
+                  "fontSize": 14,
+                },
               ]
             }
           >
@@ -1401,6 +5170,9 @@ exports[`Story Snapshots: SectionMarkdownList should match snapshot 1`] = `
                     {
                       "color": "#2F343D",
                     },
+                    {
+                      "fontSize": 14,
+                    },
                   ]
                 }
               >
@@ -1484,6 +5256,9 @@ exports[`Story Snapshots: SectionMultiSelect should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -1493,47 +5268,42 @@ exports[`Story Snapshots: SectionMultiSelect should match snapshot 1`] = `
         </Text>
       </View>
     </View>
-    <View
+    <RNGestureHandlerButton
       accessibilityLabel="2 selecteds"
       accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
+      collapsable={false}
+      enabled={true}
+      hitSlop={
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
         }
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      rippleColor="transparent"
       style={
-        {
-          "backgroundColor": "#156FF5",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "marginBottom": 12,
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 14,
-        }
+        [
+          {},
+          [
+            {
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 14,
+            },
+            {
+              "borderRadius": 4,
+              "marginBottom": 12,
+            },
+            {
+              "backgroundColor": "#156FF5",
+            },
+            {},
+            undefined,
+          ],
+        ]
       }
+      testOnly_onPress={[Function]}
     >
       <Text
         style={
@@ -1554,7 +5324,7 @@ exports[`Story Snapshots: SectionMultiSelect should match snapshot 1`] = `
       >
         2 selecteds
       </Text>
-    </View>
+    </RNGestureHandlerButton>
   </View>,
   <View
     style={
@@ -1623,6 +5393,9 @@ exports[`Story Snapshots: SectionMultiSelect should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -1632,47 +5405,42 @@ exports[`Story Snapshots: SectionMultiSelect should match snapshot 1`] = `
         </Text>
       </View>
     </View>
-    <View
+    <RNGestureHandlerButton
       accessibilityLabel="0 selecteds"
       accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
+      collapsable={false}
+      enabled={true}
+      hitSlop={
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
         }
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      rippleColor="transparent"
       style={
-        {
-          "backgroundColor": "#156FF5",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "marginBottom": 12,
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 14,
-        }
+        [
+          {},
+          [
+            {
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 14,
+            },
+            {
+              "borderRadius": 4,
+              "marginBottom": 12,
+            },
+            {
+              "backgroundColor": "#156FF5",
+            },
+            {},
+            undefined,
+          ],
+        ]
       }
+      testOnly_onPress={[Function]}
     >
       <Text
         style={
@@ -1693,7 +5461,7 @@ exports[`Story Snapshots: SectionMultiSelect should match snapshot 1`] = `
       >
         0 selecteds
       </Text>
-    </View>
+    </RNGestureHandlerButton>
   </View>,
 ]
 `;
@@ -1766,6 +5534,9 @@ exports[`Story Snapshots: SectionOverflow should match snapshot 1`] = `
                 {
                   "color": "#2F343D",
                 },
+                {
+                  "fontSize": 14,
+                },
               ]
             }
           >
@@ -1775,27 +5546,13 @@ exports[`Story Snapshots: SectionOverflow should match snapshot 1`] = `
       </Text>
     </View>
   </View>
-  <View
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
+  <RNGestureHandlerButton
+    activeOpacity={1}
     collapsable={false}
-    focusable={true}
+    delayLongPress={600}
+    enabled={true}
+    handlerTag={37}
+    handlerType="NativeViewGestureHandler"
     hitSlop={
       {
         "bottom": 4,
@@ -1804,47 +5561,88 @@ exports[`Story Snapshots: SectionOverflow should match snapshot 1`] = `
         "top": 4,
       }
     }
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+    innerRef={[Function]}
+    onActiveStateChange={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onPress={[Function]}
+    rippleColor="#E4E7EA"
     style={
-      {
-        "justifyContent": "center",
-        "opacity": 1,
-      }
+      [
+        {
+          "backgroundColor": undefined,
+          "borderRadius": undefined,
+          "margin": undefined,
+          "marginBottom": undefined,
+          "marginEnd": undefined,
+          "marginHorizontal": undefined,
+          "marginLeft": undefined,
+          "marginRight": undefined,
+          "marginStart": undefined,
+          "marginTop": undefined,
+          "marginVertical": undefined,
+        },
+        {
+          "cursor": undefined,
+        },
+      ]
     }
+    underlayColor="#E4E7EA"
   >
-    <Text
-      allowFontScaling={false}
-      selectable={false}
+    <View
+      collapsable={false}
       style={
-        [
-          {
-            "color": "#2F343D",
-            "fontSize": 18,
-          },
+        {
+          "backgroundColor": "#E4E7EA",
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "bottom": 0,
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    />
+    <View
+      style={
+        {
+          "justifyContent": "center",
+        }
+      }
+    >
+      <Text
+        allowFontScaling={false}
+        selectable={false}
+        style={
           [
             {
-              "lineHeight": 18,
+              "color": "#2F343D",
+              "fontSize": 18,
             },
-            undefined,
-          ],
-          {
-            "fontFamily": "custom",
-            "fontStyle": "normal",
-            "fontWeight": "normal",
-          },
-          {},
-        ]
-      }
-    >
-      
-    </Text>
-  </View>
+            [
+              {
+                "lineHeight": 18,
+              },
+              undefined,
+            ],
+            {
+              "fontFamily": "custom",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            {},
+          ]
+        }
+      >
+        
+      </Text>
+    </View>
+  </RNGestureHandlerButton>
 </View>
 `;
 
@@ -1916,6 +5714,9 @@ exports[`Story Snapshots: SectionSelect should match snapshot 1`] = `
                 {
                   "color": "#2F343D",
                 },
+                {
+                  "fontSize": 14,
+                },
               ]
             }
           >
diff --git a/app/containers/UIKit/__snapshots__/UiKitModal.test.tsx.snap b/app/containers/UIKit/__snapshots__/UiKitModal.test.tsx.snap
index e9864a2c756..7599afa0fc8 100644
--- a/app/containers/UIKit/__snapshots__/UiKitModal.test.tsx.snap
+++ b/app/containers/UIKit/__snapshots__/UiKitModal.test.tsx.snap
@@ -173,6 +173,9 @@ exports[`Story Snapshots: ModalActions should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -880,6 +883,9 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
                     {
                       "color": "#2F343D",
                     },
+                    {
+                      "fontSize": 14,
+                    },
                   ]
                 }
               >
@@ -898,6 +904,9 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -971,6 +980,9 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -999,47 +1011,44 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
     }
   />,
   <View>
-    <View
+    <RNGestureHandlerButton
       accessibilityLabel="Primary Action"
       accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
+      collapsable={false}
+      enabled={true}
+      hitSlop={
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
         }
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      rippleColor="transparent"
       style={
-        {
-          "backgroundColor": "#156FF5",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "marginBottom": 16,
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 14,
-        }
+        [
+          {},
+          [
+            {
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 14,
+            },
+            {
+              "borderRadius": 4,
+              "marginBottom": 12,
+            },
+            {
+              "backgroundColor": "#156FF5",
+            },
+            {},
+            {
+              "marginBottom": 16,
+            },
+          ],
+        ]
       }
+      testOnly_onPress={[Function]}
     >
       <Text
         style={
@@ -1060,50 +1069,47 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       >
         Primary Action
       </Text>
-    </View>
+    </RNGestureHandlerButton>
   </View>,
   <View>
-    <View
+    <RNGestureHandlerButton
       accessibilityLabel="Secondary"
       accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
+      collapsable={false}
+      enabled={true}
+      hitSlop={
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
         }
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      rippleColor="transparent"
       style={
-        {
-          "backgroundColor": "#156FF5",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "marginBottom": 16,
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 14,
-        }
+        [
+          {},
+          [
+            {
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 14,
+            },
+            {
+              "borderRadius": 4,
+              "marginBottom": 12,
+            },
+            {
+              "backgroundColor": "#156FF5",
+            },
+            {},
+            {
+              "marginBottom": 16,
+            },
+          ],
+        ]
       }
+      testOnly_onPress={[Function]}
     >
       <Text
         style={
@@ -1124,50 +1130,47 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       >
         Secondary
       </Text>
-    </View>
+    </RNGestureHandlerButton>
   </View>,
   <View>
-    <View
+    <RNGestureHandlerButton
       accessibilityLabel="Danger Action"
       accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
+      collapsable={false}
+      enabled={true}
+      hitSlop={
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
         }
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      rippleColor="transparent"
       style={
-        {
-          "backgroundColor": "#E4E7EA",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "marginBottom": 16,
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 14,
-        }
+        [
+          {},
+          [
+            {
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 14,
+            },
+            {
+              "borderRadius": 4,
+              "marginBottom": 12,
+            },
+            {
+              "backgroundColor": "#E4E7EA",
+            },
+            {},
+            {
+              "marginBottom": 16,
+            },
+          ],
+        ]
       }
+      testOnly_onPress={[Function]}
     >
       <Text
         style={
@@ -1188,50 +1191,47 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       >
         Danger Action
       </Text>
-    </View>
+    </RNGestureHandlerButton>
   </View>,
   <View>
-    <View
+    <RNGestureHandlerButton
       accessibilityLabel="Button 4"
       accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
+      collapsable={false}
+      enabled={true}
+      hitSlop={
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
         }
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      rippleColor="transparent"
       style={
-        {
-          "backgroundColor": "#156FF5",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "marginBottom": 16,
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 14,
-        }
+        [
+          {},
+          [
+            {
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 14,
+            },
+            {
+              "borderRadius": 4,
+              "marginBottom": 12,
+            },
+            {
+              "backgroundColor": "#156FF5",
+            },
+            {},
+            {
+              "marginBottom": 16,
+            },
+          ],
+        ]
       }
+      testOnly_onPress={[Function]}
     >
       <Text
         style={
@@ -1252,50 +1252,47 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       >
         Button 4
       </Text>
-    </View>
+    </RNGestureHandlerButton>
   </View>,
   <View>
-    <View
+    <RNGestureHandlerButton
       accessibilityLabel="Button 5"
       accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
+      collapsable={false}
+      enabled={true}
+      hitSlop={
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
         }
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      rippleColor="transparent"
       style={
-        {
-          "backgroundColor": "#156FF5",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "marginBottom": 16,
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 14,
-        }
+        [
+          {},
+          [
+            {
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 14,
+            },
+            {
+              "borderRadius": 4,
+              "marginBottom": 12,
+            },
+            {
+              "backgroundColor": "#156FF5",
+            },
+            {},
+            {
+              "marginBottom": 16,
+            },
+          ],
+        ]
       }
+      testOnly_onPress={[Function]}
     >
       <Text
         style={
@@ -1316,7 +1313,7 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       >
         Button 5
       </Text>
-    </View>
+    </RNGestureHandlerButton>
   </View>,
   <View
     style={
@@ -1326,47 +1323,44 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       }
     }
   >
-    <View
+    <RNGestureHandlerButton
       accessibilityLabel="Button 6 - Hidden"
       accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
+      collapsable={false}
+      enabled={true}
+      hitSlop={
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
         }
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      rippleColor="transparent"
       style={
-        {
-          "backgroundColor": "#156FF5",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "marginBottom": 16,
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 14,
-        }
+        [
+          {},
+          [
+            {
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 14,
+            },
+            {
+              "borderRadius": 4,
+              "marginBottom": 12,
+            },
+            {
+              "backgroundColor": "#156FF5",
+            },
+            {},
+            {
+              "marginBottom": 16,
+            },
+          ],
+        ]
       }
+      testOnly_onPress={[Function]}
     >
       <Text
         style={
@@ -1387,7 +1381,7 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       >
         Button 6 - Hidden
       </Text>
-    </View>
+    </RNGestureHandlerButton>
   </View>,
   <View
     style={
@@ -1397,47 +1391,44 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       }
     }
   >
-    <View
+    <RNGestureHandlerButton
       accessibilityLabel="Button 7 - Hidden"
       accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
+      collapsable={false}
+      enabled={true}
+      hitSlop={
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
         }
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      rippleColor="transparent"
       style={
-        {
-          "backgroundColor": "#156FF5",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "marginBottom": 16,
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 14,
-        }
+        [
+          {},
+          [
+            {
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 14,
+            },
+            {
+              "borderRadius": 4,
+              "marginBottom": 12,
+            },
+            {
+              "backgroundColor": "#156FF5",
+            },
+            {},
+            {
+              "marginBottom": 16,
+            },
+          ],
+        ]
       }
+      testOnly_onPress={[Function]}
     >
       <Text
         style={
@@ -1458,7 +1449,7 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       >
         Button 7 - Hidden
       </Text>
-    </View>
+    </RNGestureHandlerButton>
   </View>,
   <View
     style={
@@ -1468,47 +1459,44 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       }
     }
   >
-    <View
+    <RNGestureHandlerButton
       accessibilityLabel="Button 8 - Hidden"
       accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
+      collapsable={false}
+      enabled={true}
+      hitSlop={
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
         }
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      rippleColor="transparent"
       style={
-        {
-          "backgroundColor": "#156FF5",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "marginBottom": 16,
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 14,
-        }
+        [
+          {},
+          [
+            {
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 14,
+            },
+            {
+              "borderRadius": 4,
+              "marginBottom": 12,
+            },
+            {
+              "backgroundColor": "#156FF5",
+            },
+            {},
+            {
+              "marginBottom": 16,
+            },
+          ],
+        ]
       }
+      testOnly_onPress={[Function]}
     >
       <Text
         style={
@@ -1529,49 +1517,44 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       >
         Button 8 - Hidden
       </Text>
-    </View>
+    </RNGestureHandlerButton>
   </View>,
-  <View
+  <RNGestureHandlerButton
     accessibilityLabel="Show more"
     accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
+    collapsable={false}
+    enabled={true}
+    hitSlop={
       {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
       }
     }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+    rippleColor="transparent"
     style={
-      {
-        "backgroundColor": "#156FF5",
-        "borderRadius": 4,
-        "justifyContent": "center",
-        "marginBottom": 12,
-        "opacity": 1,
-        "paddingHorizontal": 16,
-        "paddingVertical": 14,
-      }
+      [
+        {},
+        [
+          {
+            "justifyContent": "center",
+            "paddingHorizontal": 16,
+            "paddingVertical": 14,
+          },
+          {
+            "borderRadius": 4,
+            "marginBottom": 12,
+          },
+          {
+            "backgroundColor": "#156FF5",
+          },
+          {},
+          undefined,
+        ],
+      ]
     }
+    testOnly_onPress={[Function]}
   >
     <Text
       style={
@@ -1592,7 +1575,7 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
     >
       Show more
     </Text>
-  </View>,
+  </RNGestureHandlerButton>,
   <View
     style={
       [
@@ -1660,6 +1643,9 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -1687,6 +1673,9 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
                     {
                       "color": "#2F343D",
                     },
+                    {
+                      "fontSize": 14,
+                    },
                   ]
                 }
               >
@@ -1705,6 +1694,9 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -1732,6 +1724,9 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
                     {
                       "color": "#2F343D",
                     },
+                    {
+                      "fontSize": 14,
+                    },
                   ]
                 }
               >
@@ -1750,6 +1745,9 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -1882,6 +1880,9 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -1891,27 +1892,13 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
         </Text>
       </View>
     </View>
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={28}
+      handlerType="NativeViewGestureHandler"
       hitSlop={
         {
           "bottom": 4,
@@ -1920,47 +1907,88 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
           "top": 4,
         }
       }
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      innerRef={[Function]}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "justifyContent": "center",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": undefined,
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
+      underlayColor="#E4E7EA"
     >
-      <Text
-        allowFontScaling={false}
-        selectable={false}
+      <View
+        collapsable={false}
         style={
-          [
-            {
-              "color": "#2F343D",
-              "fontSize": 18,
-            },
+          {
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      />
+      <View
+        style={
+          {
+            "justifyContent": "center",
+          }
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
             [
               {
-                "lineHeight": 18,
+                "color": "#2F343D",
+                "fontSize": 18,
               },
-              undefined,
-            ],
-            {
-              "fontFamily": "custom",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-            {},
-          ]
-        }
-      >
-        
-      </Text>
-    </View>
+              [
+                {
+                  "lineHeight": 18,
+                },
+                undefined,
+              ],
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+    </RNGestureHandlerButton>
   </View>,
   <View
     style={
@@ -2029,6 +2057,9 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -2038,27 +2069,13 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
         </Text>
       </View>
     </View>
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={29}
+      handlerType="NativeViewGestureHandler"
       hitSlop={
         {
           "bottom": 4,
@@ -2067,47 +2084,88 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
           "top": 4,
         }
       }
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      innerRef={[Function]}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "justifyContent": "center",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": undefined,
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
+      underlayColor="#E4E7EA"
     >
-      <Text
-        allowFontScaling={false}
-        selectable={false}
+      <View
+        collapsable={false}
         style={
-          [
-            {
-              "color": "#2F343D",
-              "fontSize": 18,
-            },
+          {
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      />
+      <View
+        style={
+          {
+            "justifyContent": "center",
+          }
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
             [
               {
-                "lineHeight": 18,
+                "color": "#2F343D",
+                "fontSize": 18,
               },
-              undefined,
-            ],
-            {
-              "fontFamily": "custom",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-            {},
-          ]
-        }
-      >
-        
-      </Text>
-    </View>
+              [
+                {
+                  "lineHeight": 18,
+                },
+                undefined,
+              ],
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+    </RNGestureHandlerButton>
   </View>,
   <View
     style={
@@ -2176,6 +2234,9 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -2185,27 +2246,13 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
         </Text>
       </View>
     </View>
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={30}
+      handlerType="NativeViewGestureHandler"
       hitSlop={
         {
           "bottom": 4,
@@ -2214,47 +2261,88 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
           "top": 4,
         }
       }
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      innerRef={[Function]}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "justifyContent": "center",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": undefined,
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
+      underlayColor="#E4E7EA"
     >
-      <Text
-        allowFontScaling={false}
-        selectable={false}
+      <View
+        collapsable={false}
         style={
-          [
-            {
-              "color": "#2F343D",
-              "fontSize": 18,
-            },
+          {
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      />
+      <View
+        style={
+          {
+            "justifyContent": "center",
+          }
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
             [
               {
-                "lineHeight": 18,
+                "color": "#2F343D",
+                "fontSize": 18,
               },
-              undefined,
-            ],
-            {
-              "fontFamily": "custom",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-            {},
-          ]
-        }
-      >
-        
-      </Text>
-    </View>
+              [
+                {
+                  "lineHeight": 18,
+                },
+                undefined,
+              ],
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+    </RNGestureHandlerButton>
   </View>,
 ]
 `;
@@ -2286,107 +2374,130 @@ exports[`Story Snapshots: ModalDatePickerWithError should match snapshot 1`] = `
   >
     Label
   </Text>
-  <View
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
+  <RNGestureHandlerButton
+    activeOpacity={1}
     collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+    delayLongPress={600}
+    enabled={true}
+    handlerTag={31}
+    handlerType="NativeViewGestureHandler"
+    innerRef={null}
+    onActiveStateChange={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onPress={[Function]}
+    rippleColor="#E4E7EA"
     style={
-      {
-        "backgroundColor": "#FFFFFF",
-        "opacity": 1,
-      }
+      [
+        {
+          "backgroundColor": "#FFFFFF",
+          "borderRadius": undefined,
+          "margin": undefined,
+          "marginBottom": undefined,
+          "marginEnd": undefined,
+          "marginHorizontal": undefined,
+          "marginLeft": undefined,
+          "marginRight": undefined,
+          "marginStart": undefined,
+          "marginTop": undefined,
+          "marginVertical": undefined,
+        },
+        {
+          "cursor": undefined,
+        },
+      ]
     }
+    underlayColor="#E4E7EA"
   >
     <View
+      collapsable={false}
       style={
-        [
-          {
-            "alignItems": "center",
-            "borderRadius": 4,
-            "borderWidth": 1,
-            "flexDirection": "row",
-            "height": 48,
-            "paddingLeft": 16,
-          },
-          {
-            "borderColor": "#EC0D2A",
-          },
-        ]
+        {
+          "backgroundColor": "#E4E7EA",
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "bottom": 0,
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
       }
+    />
+    <View
+      style={{}}
     >
-      <Text
+      <View
         style={
           [
             {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 14,
-              "fontWeight": "400",
-              "textAlign": "left",
+              "alignItems": "center",
+              "borderRadius": 4,
+              "borderWidth": 1,
+              "flexDirection": "row",
+              "height": 48,
+              "paddingLeft": 16,
             },
             {
-              "color": "#D40C26",
+              "borderColor": "#EC0D2A",
             },
           ]
         }
       >
-        Invalid Date
-      </Text>
-      <Text
-        allowFontScaling={false}
-        selectable={false}
-        style={
-          [
-            {
-              "color": "#EC0D2A",
-              "fontSize": 20,
-            },
+        <Text
+          style={
             [
               {
-                "lineHeight": 20,
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 14,
+                "fontWeight": "400",
+                "textAlign": "left",
               },
               {
-                "position": "absolute",
-                "right": 16,
+                "color": "#D40C26",
               },
-            ],
-            {
-              "fontFamily": "custom",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-            {},
-          ]
-        }
-      >
-        
-      </Text>
+            ]
+          }
+        >
+          Invalid Date
+        </Text>
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
+            [
+              {
+                "color": "#EC0D2A",
+                "fontSize": 20,
+              },
+              [
+                {
+                  "lineHeight": 20,
+                },
+                {
+                  "position": "absolute",
+                  "right": 16,
+                },
+              ],
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
     </View>
-  </View>
+  </RNGestureHandlerButton>
   <Text
     style={
       [
@@ -2644,107 +2755,130 @@ exports[`Story Snapshots: ModalFormInput should match snapshot 1`] = `
     >
       Set a date
     </Text>
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={32}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
+      underlayColor="#E4E7EA"
     >
       <View
+        collapsable={false}
         style={
-          [
-            {
-              "alignItems": "center",
-              "borderRadius": 4,
-              "borderWidth": 1,
-              "flexDirection": "row",
-              "height": 48,
-              "paddingLeft": 16,
-            },
-            {
-              "borderColor": "#CBCED1",
-            },
-          ]
+          {
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
         }
+      />
+      <View
+        style={{}}
       >
-        <Text
+        <View
           style={
             [
               {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 14,
-                "fontWeight": "400",
-                "textAlign": "left",
+                "alignItems": "center",
+                "borderRadius": 4,
+                "borderWidth": 1,
+                "flexDirection": "row",
+                "height": 48,
+                "paddingLeft": 16,
               },
               {
-                "color": "#1F2329",
+                "borderColor": "#CBCED1",
               },
             ]
           }
         >
-          Invalid Date
-        </Text>
-        <Text
-          allowFontScaling={false}
-          selectable={false}
-          style={
-            [
-              {
-                "color": "#6C727A",
-                "fontSize": 20,
-              },
+          <Text
+            style={
               [
                 {
-                  "lineHeight": 20,
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 14,
+                  "fontWeight": "400",
+                  "textAlign": "left",
                 },
                 {
-                  "position": "absolute",
-                  "right": 16,
+                  "color": "#1F2329",
                 },
-              ],
-              {
-                "fontFamily": "custom",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              {},
-            ]
-          }
-        >
-          
-        </Text>
+              ]
+            }
+          >
+            Invalid Date
+          </Text>
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "#6C727A",
+                  "fontSize": 20,
+                },
+                [
+                  {
+                    "lineHeight": 20,
+                  },
+                  {
+                    "position": "absolute",
+                    "right": 16,
+                  },
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
       </View>
-    </View>
+    </RNGestureHandlerButton>
   </View>,
 ]
 `;
@@ -2851,6 +2985,9 @@ exports[`Story Snapshots: ModalFormTextArea should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -2860,47 +2997,44 @@ exports[`Story Snapshots: ModalFormTextArea should match snapshot 1`] = `
         </Text>
       </View>
     </View>
-    <View
+    <RNGestureHandlerButton
       accessibilityLabel="Change"
       accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
+      collapsable={false}
+      enabled={true}
+      hitSlop={
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
         }
       }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      rippleColor="transparent"
       style={
-        {
-          "backgroundColor": "#156FF5",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "marginBottom": 16,
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 14,
-        }
+        [
+          {},
+          [
+            {
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 14,
+            },
+            {
+              "borderRadius": 4,
+              "marginBottom": 12,
+            },
+            {
+              "backgroundColor": "#156FF5",
+            },
+            {},
+            {
+              "marginBottom": 16,
+            },
+          ],
+        ]
       }
+      testOnly_onPress={[Function]}
     >
       <Text
         style={
@@ -2921,7 +3055,7 @@ exports[`Story Snapshots: ModalFormTextArea should match snapshot 1`] = `
       >
         Change
       </Text>
-    </View>
+    </RNGestureHandlerButton>
   </View>,
   <View
     style={
@@ -3512,113 +3646,135 @@ exports[`Story Snapshots: ModalMultiSelect should match snapshot 1`] = `
     >
       Share with...
     </Text>
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={36}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "borderRadius": 4,
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": 4,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
+      underlayColor="#E4E7EA"
     >
       <View
+        collapsable={false}
         style={
-          [
-            {
-              "alignItems": "center",
-              "borderWidth": 1,
-              "flexDirection": "row",
-              "minHeight": 48,
-              "paddingBottom": 0,
-              "paddingHorizontal": 8,
-            },
-            {
-              "borderRadius": 4,
-            },
-            {
-              "borderColor": "#9EA2A8",
-            },
-            undefined,
-          ]
+          {
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": 4,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
         }
+      />
+      <View
+        style={{}}
       >
-        <Text
+        <View
           style={
             [
               {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontWeight": "400",
-                "paddingLeft": 6,
-                "textAlign": "left",
+                "alignItems": "center",
+                "borderWidth": 1,
+                "flexDirection": "row",
+                "minHeight": 48,
+                "paddingBottom": 0,
+                "paddingHorizontal": 8,
+              },
+              {
+                "borderRadius": 4,
               },
               {
-                "color": "#6C727A",
+                "borderColor": "#9EA2A8",
               },
+              undefined,
             ]
           }
         >
-          Search
-        </Text>
-        <Text
-          allowFontScaling={false}
-          selectable={false}
-          style={
-            [
-              {
-                "color": "#6C727A",
-                "fontSize": 22,
-              },
+          <Text
+            style={
               [
                 {
-                  "lineHeight": 22,
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 16,
+                  "fontWeight": "400",
+                  "paddingLeft": 6,
+                  "textAlign": "left",
                 },
                 {
-                  "position": "absolute",
-                  "right": 16,
+                  "color": "#6C727A",
                 },
-              ],
-              {
-                "fontFamily": "custom",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              {},
-            ]
-          }
-        >
-          
-        </Text>
+              ]
+            }
+          >
+            Search
+          </Text>
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "#6C727A",
+                  "fontSize": 22,
+                },
+                [
+                  {
+                    "lineHeight": 22,
+                  },
+                  {
+                    "position": "absolute",
+                    "right": 16,
+                  },
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
       </View>
-    </View>
+    </RNGestureHandlerButton>
     <Text
       style={
         [
@@ -3664,196 +3820,241 @@ exports[`Story Snapshots: ModalMultiSelect should match snapshot 1`] = `
     >
       Share with...
     </Text>
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={37}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "borderRadius": 4,
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": 4,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
+      underlayColor="#E4E7EA"
     >
       <View
+        collapsable={false}
         style={
-          [
-            {
-              "alignItems": "center",
-              "borderWidth": 1,
-              "flexDirection": "row",
-              "minHeight": 48,
-              "paddingBottom": 0,
-              "paddingHorizontal": 8,
-            },
-            {
-              "borderRadius": 4,
-            },
-            {
-              "borderColor": "#9EA2A8",
-            },
-            undefined,
-          ]
+          {
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": 4,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
         }
+      />
+      <View
+        style={{}}
       >
         <View
           style={
-            {
-              "flexDirection": "row",
-              "flexWrap": "wrap",
-              "marginRight": 50,
-              "paddingTop": 8,
-            }
+            [
+              {
+                "alignItems": "center",
+                "borderWidth": 1,
+                "flexDirection": "row",
+                "minHeight": 48,
+                "paddingBottom": 0,
+                "paddingHorizontal": 8,
+              },
+              {
+                "borderRadius": 4,
+              },
+              {
+                "borderColor": "#9EA2A8",
+              },
+              undefined,
+            ]
           }
         >
           <View
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": undefined,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
             style={
               {
-                "alignItems": "center",
-                "backgroundColor": "#F2F3F5",
-                "borderRadius": 2,
                 "flexDirection": "row",
-                "height": 28,
-                "marginBottom": 8,
-                "marginRight": 8,
-                "opacity": 1,
-                "paddingHorizontal": 4,
+                "flexWrap": "wrap",
+                "marginRight": 50,
+                "paddingTop": 8,
               }
             }
-            testID="multi-select-chip-1"
           >
-            <Text
-              numberOfLines={1}
+            <RNGestureHandlerButton
+              activeOpacity={1}
+              collapsable={false}
+              delayLongPress={600}
+              enabled={true}
+              handlerTag={38}
+              handlerType="NativeViewGestureHandler"
+              innerRef={null}
+              onActiveStateChange={[Function]}
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onPress={[Function]}
+              rippleColor="#E4E7EA"
               style={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "paddingHorizontal": 8,
-                    "textAlign": "left",
+                    "backgroundColor": "#F2F3F5",
+                    "borderRadius": 2,
+                    "margin": undefined,
+                    "marginBottom": 8,
+                    "marginEnd": undefined,
+                    "marginHorizontal": undefined,
+                    "marginLeft": undefined,
+                    "marginRight": 8,
+                    "marginStart": undefined,
+                    "marginTop": undefined,
+                    "marginVertical": undefined,
                   },
                   {
-                    "color": "#1F2329",
+                    "cursor": undefined,
                   },
                 ]
               }
+              testID="multi-select-chip-1"
+              underlayColor="#E4E7EA"
             >
-              John
-            </Text>
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
-                [
+              <View
+                collapsable={false}
+                style={
                   {
-                    "color": "#6C727A",
-                    "fontSize": 16,
-                  },
-                  [
-                    {
-                      "lineHeight": 16,
-                    },
-                    undefined,
-                  ],
+                    "backgroundColor": "#E4E7EA",
+                    "borderBottomLeftRadius": undefined,
+                    "borderBottomRightRadius": undefined,
+                    "borderRadius": 2,
+                    "borderTopLeftRadius": undefined,
+                    "borderTopRightRadius": undefined,
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              />
+              <View
+                style={
                   {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "height": 28,
+                    "paddingHorizontal": 4,
+                  }
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 14,
+                        "fontWeight": "500",
+                        "paddingHorizontal": 8,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#1F2329",
+                      },
+                    ]
+                  }
+                >
+                  John
+                </Text>
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#6C727A",
+                        "fontSize": 16,
+                      },
+                      [
+                        {
+                          "lineHeight": 16,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </RNGestureHandlerButton>
           </View>
-        </View>
-        <Text
-          allowFontScaling={false}
-          selectable={false}
-          style={
-            [
-              {
-                "color": "#6C727A",
-                "fontSize": 22,
-              },
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
               [
                 {
-                  "lineHeight": 22,
+                  "color": "#6C727A",
+                  "fontSize": 22,
                 },
+                [
+                  {
+                    "lineHeight": 22,
+                  },
+                  {
+                    "position": "absolute",
+                    "right": 16,
+                  },
+                ],
                 {
-                  "position": "absolute",
-                  "right": 16,
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
                 },
-              ],
-              {
-                "fontFamily": "custom",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              {},
-            ]
-          }
-        >
-          
-        </Text>
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
       </View>
-    </View>
+    </RNGestureHandlerButton>
     <Text
       style={
         [
@@ -4084,6 +4285,9 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
                     {
                       "color": "#2F343D",
                     },
+                    {
+                      "fontSize": 14,
+                    },
                   ]
                 }
               >
@@ -4102,6 +4306,9 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -4149,6 +4356,9 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -4176,6 +4386,9 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
                     {
                       "color": "#2F343D",
                     },
+                    {
+                      "fontSize": 14,
+                    },
                   ]
                 }
               >
@@ -4194,6 +4407,9 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -4241,6 +4457,9 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -4268,6 +4487,9 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
                     {
                       "color": "#2F343D",
                     },
+                    {
+                      "fontSize": 14,
+                    },
                   ]
                 }
               >
@@ -4286,6 +4508,9 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -4424,6 +4649,9 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
                     {
                       "color": "#2F343D",
                     },
+                    {
+                      "fontSize": 14,
+                    },
                   ]
                 }
               >
@@ -4472,6 +4700,9 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -4559,6 +4790,9 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
                     {
                       "color": "#2F343D",
                     },
+                    {
+                      "fontSize": 14,
+                    },
                   ]
                 }
               >
@@ -4607,6 +4841,9 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -4694,6 +4931,9 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
                     {
                       "color": "#2F343D",
                     },
+                    {
+                      "fontSize": 14,
+                    },
                   ]
                 }
               >
@@ -4742,6 +4982,9 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -4829,6 +5072,9 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
                     {
                       "color": "#2F343D",
                     },
+                    {
+                      "fontSize": 14,
+                    },
                   ]
                 }
               >
@@ -4877,6 +5123,9 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -4969,6 +5218,9 @@ exports[`Story Snapshots: ModalSectionSelects should match snapshot 1`] = `
                     {
                       "color": "#2F343D",
                     },
+                    {
+                      "fontSize": 14,
+                    },
                   ]
                 }
               >
@@ -4987,6 +5239,9 @@ exports[`Story Snapshots: ModalSectionSelects should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -5053,6 +5308,9 @@ exports[`Story Snapshots: ModalSectionSelects should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -5069,6 +5327,9 @@ exports[`Story Snapshots: ModalSectionSelects should match snapshot 1`] = `
                     "lineHeight": 22,
                     "textAlign": "left",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                   {
                     "color": "#2F343D",
                   },
@@ -5184,6 +5445,9 @@ exports[`Story Snapshots: ModalSectionSelects should match snapshot 1`] = `
                     {
                       "color": "#2F343D",
                     },
+                    {
+                      "fontSize": 14,
+                    },
                   ]
                 }
               >
@@ -5232,6 +5496,9 @@ exports[`Story Snapshots: ModalSectionSelects should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -5314,6 +5581,9 @@ exports[`Story Snapshots: ModalSectionSelects should match snapshot 1`] = `
                     {
                       "color": "#2F343D",
                     },
+                    {
+                      "fontSize": 14,
+                    },
                   ]
                 }
               >
@@ -5362,6 +5632,9 @@ exports[`Story Snapshots: ModalSectionSelects should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -5457,6 +5730,9 @@ exports[`Story Snapshots: ModalSectionSelects should match snapshot 1`] = `
                     {
                       "color": "#2F343D",
                     },
+                    {
+                      "fontSize": 14,
+                    },
                   ]
                 }
               >
@@ -5505,6 +5781,9 @@ exports[`Story Snapshots: ModalSectionSelects should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
@@ -5587,6 +5866,9 @@ exports[`Story Snapshots: ModalSectionSelects should match snapshot 1`] = `
                     {
                       "color": "#2F343D",
                     },
+                    {
+                      "fontSize": 14,
+                    },
                   ]
                 }
               >
@@ -5635,6 +5917,9 @@ exports[`Story Snapshots: ModalSectionSelects should match snapshot 1`] = `
                   {
                     "color": "#2F343D",
                   },
+                  {
+                    "fontSize": 14,
+                  },
                 ]
               }
             >
diff --git a/app/containers/UIKit/index.tsx b/app/containers/UIKit/index.tsx
index aae5e53f061..9f57c0afbde 100644
--- a/app/containers/UIKit/index.tsx
+++ b/app/containers/UIKit/index.tsx
@@ -27,9 +27,24 @@ import { MultiSelect } from './MultiSelect';
 import { Input } from './Input';
 import { DatePicker } from './DatePicker';
 import { Overflow } from './Overflow';
+import { Icon } from './Icon';
+import { IconButton } from './IconButton';
+import { InfoCard } from './InfoCard';
 import { ThemeContext } from '../../theme';
-import { type IActions, type IButton, type IElement, type IInputIndex, type IParser, type ISection } from './interfaces';
+import {
+	type IActions,
+	type IButton,
+	type IContext,
+	type IElement,
+	type IIcon,
+	type IIconButton,
+	type IInfoCard,
+	type IInputIndex,
+	type IParser,
+	type ISection
+} from './interfaces';
 import VideoConferenceBlock from './VideoConferenceBlock';
+import I18n from '../../i18n';
 
 const styles = StyleSheet.create({
 	input: {
@@ -52,6 +67,13 @@ const styles = StyleSheet.create({
 const plainText = ({ text } = { text: '' }) => text;
 
 class MessageParser extends UiKitParserMessage<React.ReactElement> {
+	constructor() {
+		super();
+		// Compatibility for @rocket.chat/ui-kit@0.39.0 where info_card is exported
+		// but still missing from message allowed layout block types.
+		this.allowedLayoutBlockTypes.add('info_card' as any);
+	}
+
 	get current() {
 		return this as unknown as IParser;
 	}
@@ -66,15 +88,15 @@ class MessageParser extends UiKitParserMessage<React.ReactElement> {
 		return <Text style={[styles.text, { color: themes[theme].fontDefault }]}>{element.text}</Text>;
 	}
 
-	mrkdwn(element: IMarkdown, context: BlockContext) {
+	mrkdwn(element: IMarkdown, context: BlockContext): React.ReactElement {
 		const isContext = context === BlockContext.CONTEXT;
 		if (isContext) {
 			return <MarkdownPreview msg={element.text} numberOfLines={0} />;
 		}
-		return <Markdown msg={element.text} />;
+		return <Markdown msg={element.i18n ? I18n.t(element.i18n.key) : element.text} textStyle={{ fontSize: 14 }} />;
 	}
 
-	button(element: IButton, context: BlockContext) {
+	button(element: IButton, context: BlockContext): React.ReactElement {
 		const { text, value, actionId, style } = element;
 		const [{ loading }, action] = useBlockContext(element, context);
 		return (
@@ -89,25 +111,36 @@ class MessageParser extends UiKitParserMessage<React.ReactElement> {
 		);
 	}
 
-	divider() {
+	icon(element: IIcon, _context: BlockContext): React.ReactElement {
+		return <Icon element={element} />;
+	}
+
+	icon_button(element: IIconButton, context: BlockContext): React.ReactElement {
+		return <IconButton element={element} context={context} />;
+	}
+
+	divider(): React.ReactElement {
 		return <Divider />;
 	}
 
-	section(args: ISection) {
+	section(args: ISection): React.ReactElement {
 		return <Section {...args} parser={this.current} />;
 	}
 
-	actions(args: IActions) {
+	actions(args: IActions): React.ReactElement {
 		return <Actions {...args} parser={this.current} />;
 	}
 
-	overflow(element: IElement, context: BlockContext) {
-		const [{ loading }, action] = useBlockContext(element, context);
+	overflow(element: IElement, context: BlockContext): React.ReactElement {
+		const [{ loading }, action] = useBlockContext({ ...element, actionId: element.actionId || '' }, context);
 		return <Overflow element={element} context={context} loading={loading} action={action} parser={this.current} />;
 	}
 
-	datePicker(element: IElement, context: BlockContext) {
-		const [{ loading, value, error, language }, action] = useBlockContext(element, context);
+	datePicker(element: IElement, context: BlockContext): React.ReactElement {
+		const [{ loading, value, error, language }, action] = useBlockContext(
+			{ ...element, actionId: element.actionId || '' },
+			context
+		);
 		return (
 			<DatePicker
 				element={element}
@@ -121,32 +154,36 @@ class MessageParser extends UiKitParserMessage<React.ReactElement> {
 		);
 	}
 
-	image(element: IElement, context: BlockContext) {
+	image(element: IElement, context: BlockContext): React.ReactElement {
 		return <Image element={element} context={context} />;
 	}
 
-	context(args: any) {
+	context(args: IContext): React.ReactElement {
 		const { theme } = useContext(ThemeContext);
-		return <Context {...args} theme={theme} parser={this} />;
+		return <Context {...args} theme={theme} parser={this.current} />;
+	}
+
+	info_card(args: IInfoCard): React.ReactElement {
+		return <InfoCard {...args} parser={this.current} />;
 	}
 
-	multiStaticSelect(element: IElement, context: BlockContext) {
-		const [{ loading, value }, action] = useBlockContext(element, context);
+	multiStaticSelect(element: IElement, context: BlockContext): React.ReactElement {
+		const [{ loading, value }, action] = useBlockContext({ ...element, actionId: element.actionId || '' }, context);
 		const valueFiltered = element?.options?.filter(option => value?.includes(option.value));
 		return <MultiSelect {...element} value={valueFiltered} onChange={action} context={context} loading={loading} multiselect />;
 	}
 
-	staticSelect(element: IElement, context: BlockContext) {
-		const [{ loading, value }, action] = useBlockContext(element, context);
+	staticSelect(element: IElement, context: BlockContext): React.ReactElement {
+		const [{ loading, value }, action] = useBlockContext({ ...element, actionId: element.actionId || '' }, context);
 		return <Select {...element} value={value} onChange={action} loading={loading} />;
 	}
 
-	selectInput(element: IElement, context: BlockContext) {
-		const [{ loading, value }, action] = useBlockContext(element, context);
+	selectInput(element: IElement, context: BlockContext): React.ReactElement {
+		const [{ loading, value }, action] = useBlockContext({ ...element, actionId: element.actionId || '' }, context);
 		return <MultiSelect {...element} value={value} onChange={action} context={context} loading={loading} />;
 	}
 
-	video_conf(element: IElement & { callId: string }) {
+	video_conf(element: IElement & { callId: string }): React.ReactElement {
 		return <VideoConferenceBlock callId={element.callId} blockId={element.blockId!} />;
 	}
 }
@@ -166,8 +203,8 @@ class ModalParser extends UiKitParserModal<React.ReactElement> {
 		return this as unknown as IParser;
 	}
 
-	input({ element, blockId, appId, label, description, hint }: IInputIndex, context: number) {
-		const [{ error }] = useBlockContext({ ...element, appId, blockId }, context);
+	input({ element, blockId, appId, label, description, hint }: IInputIndex, context: number): React.ReactElement {
+		const [{ error }] = useBlockContext({ ...element, appId, blockId, actionId: element.actionId || '' }, context);
 		const { theme } = useContext(ThemeContext);
 		return (
 			<Input
@@ -182,12 +219,12 @@ class ModalParser extends UiKitParserModal<React.ReactElement> {
 		);
 	}
 
-	image(element: IElement, context: BlockContext) {
+	image(element: IElement, context: BlockContext): React.ReactElement {
 		return <Image element={element} context={context} />;
 	}
 
-	plainInput(element: IElement, context: BlockContext) {
-		const [{ loading, value, error }, action] = useBlockContext(element, context);
+	plainInput(element: IElement, context: BlockContext): React.ReactElement {
+		const [{ loading, value, error }, action] = useBlockContext({ ...element, actionId: element.actionId || '' }, context);
 		const { multiline, actionId, placeholder } = element;
 		return (
 			<FormTextInput
diff --git a/app/containers/UIKit/interactionAdapters.test.ts b/app/containers/UIKit/interactionAdapters.test.ts
new file mode 100644
index 00000000000..18785a97c02
--- /dev/null
+++ b/app/containers/UIKit/interactionAdapters.test.ts
@@ -0,0 +1,93 @@
+import { ActionTypes } from './interfaces';
+import { toServerModalInteractionType, toUserInteraction } from './interactionAdapters';
+
+describe('interactionAdapters', () => {
+	describe('toUserInteraction', () => {
+		it('maps message block action with required metadata', () => {
+			const interaction = toUserInteraction({
+				type: ActionTypes.ACTION,
+				actionId: 'action-id',
+				blockId: 'block-id',
+				value: 'old-value',
+				payload: 'new-value',
+				container: { type: 'message', id: 'container-id' },
+				mid: 'message-id',
+				rid: 'room-id',
+				triggerId: 'trigger-id'
+			});
+
+			expect(interaction).toEqual({
+				type: 'blockAction',
+				actionId: 'action-id',
+				payload: {
+					blockId: 'block-id',
+					value: 'new-value'
+				},
+				container: {
+					type: 'message',
+					id: 'container-id'
+				},
+				mid: 'message-id',
+				rid: 'room-id',
+				triggerId: 'trigger-id'
+			});
+		});
+
+		it('maps view block action and defaults blockId', () => {
+			const interaction = toUserInteraction({
+				type: ActionTypes.ACTION,
+				actionId: 'action-id',
+				container: { type: 'view', id: 'view-id' },
+				value: 'value',
+				triggerId: 'trigger-id'
+			});
+
+			expect(interaction).toEqual({
+				type: 'blockAction',
+				actionId: 'action-id',
+				payload: {
+					blockId: 'default',
+					value: 'value'
+				},
+				container: {
+					type: 'view',
+					id: 'view-id'
+				},
+				triggerId: 'trigger-id'
+			});
+		});
+
+		it('throws when submit interaction has no viewId', () => {
+			expect(() =>
+				toUserInteraction({
+					type: ActionTypes.SUBMIT,
+					payload: { view: { id: 'view-id', state: {} } },
+					triggerId: 'trigger-id'
+				} as any)
+			).toThrow('viewId is required for view interactions');
+		});
+
+		it('throws when close interaction has no viewId', () => {
+			expect(() =>
+				toUserInteraction({
+					type: ActionTypes.CLOSED,
+					view: { id: 'view-id', state: {} as any } as any,
+					triggerId: 'trigger-id'
+				} as any)
+			).toThrow('viewId is required for view interactions');
+		});
+	});
+
+	describe('toServerModalInteractionType', () => {
+		it('returns known modal interaction types', () => {
+			expect(toServerModalInteractionType('modal.open')).toBe('modal.open');
+			expect(toServerModalInteractionType('modal.update')).toBe('modal.update');
+			expect(toServerModalInteractionType('modal.close')).toBe('modal.close');
+			expect(toServerModalInteractionType('errors')).toBe('errors');
+		});
+
+		it('returns null for unknown interaction type', () => {
+			expect(toServerModalInteractionType('some.other.type')).toBeNull();
+		});
+	});
+});
diff --git a/app/containers/UIKit/interactionAdapters.ts b/app/containers/UIKit/interactionAdapters.ts
new file mode 100644
index 00000000000..e19af85bdb2
--- /dev/null
+++ b/app/containers/UIKit/interactionAdapters.ts
@@ -0,0 +1,105 @@
+import type { ServerInteraction, UserInteraction } from '@rocket.chat/ui-kit';
+
+import { ActionTypes, type ITriggerAction, type IView } from './interfaces';
+
+type TServerModalInteraction = Extract<ServerInteraction, { type: 'modal.open' | 'modal.update' | 'modal.close' | 'errors' }>;
+type TServerModalInteractionType = TServerModalInteraction['type'];
+
+const assertViewId = (viewId?: string) => {
+	if (!viewId) {
+		throw new Error('viewId is required for view interactions');
+	}
+
+	return viewId;
+};
+
+/**
+ * Converts a trigger action to a user interaction
+ */
+export const toUserInteraction = ({
+	type,
+	actionId,
+	blockId,
+	value,
+	container,
+	mid,
+	rid,
+	triggerId,
+	viewId,
+	payload,
+	view,
+	isCleared
+}: ITriggerAction & { triggerId: string }): UserInteraction => {
+	if (type === ActionTypes.ACTION) {
+		if (!actionId || !container) {
+			throw new Error('actionId and container are required for blockAction interaction');
+		}
+
+		const blockPayload = {
+			blockId: blockId || 'default',
+			value: payload ?? value
+		};
+
+		if (container.type === 'message') {
+			if (!mid || !rid) {
+				throw new Error('mid and rid are required for message block actions');
+			}
+
+			return {
+				type: 'blockAction',
+				actionId,
+				payload: blockPayload,
+				container: {
+					type: 'message',
+					id: container.id
+				},
+				mid,
+				rid,
+				triggerId
+			};
+		}
+
+		return {
+			type: 'blockAction',
+			actionId,
+			payload: blockPayload,
+			container: {
+				type: 'view',
+				id: container.id
+			},
+			triggerId
+		};
+	}
+
+	if (type === ActionTypes.SUBMIT) {
+		return {
+			type: 'viewSubmit',
+			viewId: assertViewId(viewId),
+			payload: payload as any,
+			triggerId
+		};
+	}
+
+	return {
+		type: 'viewClosed',
+		payload: {
+			viewId: assertViewId(viewId),
+			view: view as IView & { id: string; state: { [blockId: string]: { [key: string]: unknown } } },
+			isCleared
+		},
+		triggerId
+	};
+};
+
+/**
+ * Converts a server modal interaction type to a user interaction type
+ * @param {string} value - The server modal interaction type to convert
+ * @returns {TServerModalInteractionType | null} - The user interaction type
+ */
+export const toServerModalInteractionType = (value: string): TServerModalInteractionType | null => {
+	if (value === 'modal.open' || value === 'modal.update' || value === 'modal.close' || value === 'errors') {
+		return value;
+	}
+
+	return null;
+};
diff --git a/app/containers/UIKit/interfaces.ts b/app/containers/UIKit/interfaces.ts
index 7b8a8017bbe..6c51d056187 100644
--- a/app/containers/UIKit/interfaces.ts
+++ b/app/containers/UIKit/interfaces.ts
@@ -1,147 +1,127 @@
-import { type BlockContext } from '@rocket.chat/ui-kit';
+import type {
+	BlockContext,
+	FrameableIconElement,
+	IconButtonElement,
+	InfoCardBlock,
+	Markdown,
+	ModalView,
+	PlainText,
+	ServerInteraction,
+	ViewBlockActionUserInteraction,
+	ViewClosedUserInteraction,
+	ViewSubmitUserInteraction
+} from '@rocket.chat/ui-kit';
 
 import { type TSupportedThemes } from '../../theme';
 
-export enum ElementTypes {
-	IMAGE = 'image',
-	BUTTON = 'button',
-	STATIC_SELECT = 'static_select',
-	MULTI_STATIC_SELECT = 'multi_static_select',
-	CONVERSATION_SELECT = 'conversations_select',
-	CHANNEL_SELECT = 'channels_select',
-	USER_SELECT = 'users_select',
-	OVERFLOW = 'overflow',
-	DATEPICKER = 'datepicker',
-	PLAIN_TEXT_INPUT = 'plain_text_input',
-	SECTION = 'section',
-	DIVIDER = 'divider',
-	ACTIONS = 'actions',
-	CONTEXT = 'context',
-	FIELDS = 'fields',
-	INPUT = 'input',
-	PLAIN_TEXT = 'plain_text',
-	TEXT = 'text',
-	MARKDOWN = 'mrkdwn'
-}
-
-export enum ActionTypes {
-	ACTION = 'blockAction',
-	SUBMIT = 'viewSubmit',
-	CLOSED = 'viewClosed'
-}
+export const ActionTypes = {
+	ACTION: 'blockAction',
+	SUBMIT: 'viewSubmit',
+	CLOSED: 'viewClosed'
+} as const;
 
-export enum ContainerTypes {
-	VIEW = 'view',
-	MESSAGE = 'message'
-}
+export const ContainerTypes = {
+	VIEW: 'view',
+	MESSAGE: 'message'
+} as const;
 
-export enum ModalActions {
-	MODAL = 'modal',
-	OPEN = 'modal.open',
-	CLOSE = 'modal.close',
-	UPDATE = 'modal.update',
-	ERRORS = 'errors'
-}
+export const ModalActions = {
+	MODAL: 'modal',
+	OPEN: 'modal.open',
+	CLOSE: 'modal.close',
+	UPDATE: 'modal.update',
+	ERRORS: 'errors'
+} as const;
 
-export interface IStateView {
-	[key: string]: { [settings: string]: string | number };
-}
-
-export interface IView {
-	appId: string;
-	type: ModalActions;
-	id: string;
-	title: IText;
-	submit: IButton;
-	close: IButton;
-	blocks: Block[];
-	showIcon: boolean;
-	state?: IStateView;
-}
+export type TActionType = (typeof ActionTypes)[keyof typeof ActionTypes];
+export type TContainerType = (typeof ContainerTypes)[keyof typeof ContainerTypes];
+export type TModalAction = (typeof ModalActions)[keyof typeof ModalActions];
 
+export type IStateView = ViewSubmitUserInteraction['payload']['view']['state'];
+export type IView = ModalView;
 export interface Block {
-	type: ElementTypes;
-	blockId: string;
+	type: string;
+	blockId?: string;
 	element?: IElement;
 	label?: string;
-	appId: string;
+	appId?: string;
 	optional?: boolean;
 	elements?: IElement[];
 }
-
 export interface IElement {
-	type: ElementTypes;
+	type: string;
 	placeholder?: IText;
-	actionId: string;
-	initialValue?: string;
+	actionId?: string;
+	initialValue?: any;
 	options?: Option[];
 	text?: IText;
-	value?: string;
+	value?: any;
 	initialDate?: any;
 	imageUrl?: string;
 	appId?: string;
 	blockId?: string;
 	multiline?: boolean;
-}
-
-export interface IText {
-	type?: ElementTypes;
+	icon?: string;
+	variant?: 'default' | 'danger' | 'secondary' | 'warning';
+	framed?: boolean;
+	label?: string | IText;
+	url?: string;
+	callId?: string;
+}
+export type IText = {
+	type?: 'plain_text' | 'mrkdwn';
 	text: string;
 	emoji?: boolean;
-}
-
+	i18n?: {
+		key: string;
+		args?: {
+			[key: string]: string | number;
+		};
+	};
+};
 export interface Option {
 	text: IText;
 	value: string;
 	imageUrl?: string;
 }
-
-export interface IButton {
-	type: ElementTypes;
+export interface IButton extends IElement {
+	type: 'button';
 	text: IText;
 	actionId: string;
 	blockId: string;
 	appId: string;
-	value?: any;
 	style?: any;
 }
 
 export interface IContainer {
-	type: ContainerTypes;
+	type: TContainerType;
 	id: string;
 }
 
-// methods/actions
-export interface IUserInteraction {
-	triggerId: string;
-	appId?: string;
-	viewId?: string;
-	view: IView;
-}
-
-export interface IEmitUserInteraction extends IUserInteraction {
-	type: ModalActions;
-}
+type TModalServerInteraction = Extract<ServerInteraction, { type: 'modal.open' | 'modal.update' | 'errors' }>;
+export type IUserInteraction = Omit<TModalServerInteraction, 'type'>;
+export type IEmitUserInteraction = TModalServerInteraction | ({ type: 'modal' } & IUserInteraction);
 
 export interface ITriggerAction {
-	type: ActionTypes;
+	type: TActionType;
 	actionId?: string;
 	appId?: string;
 	container?: IContainer;
-	value?: number;
+	value?: unknown;
 	blockId?: string;
 	rid?: string;
 	mid?: string;
 	viewId?: string;
 	payload?: any;
 	view?: IView;
+	isCleared?: boolean;
 }
 
 export interface ITriggerBlockAction {
 	container: IContainer;
 	actionId: string;
 	appId: string;
-	value: number;
+	value: unknown;
 	blockId?: string;
 	mid?: string;
 	rid?: string;
@@ -165,46 +145,73 @@ export interface ITriggerCancel {
 	isCleared: boolean;
 }
 
-// UiKit components
+type TActionElement = IElement;
+type TContextElement = IElement;
+type TInputElement = IElement;
+export type TElementAccessory = IElement & { blockId?: string; appId?: string };
+
 export interface IParser {
-	renderAccessories: (data: TElementAccessory, context: BlockContext, parser: IParser) => JSX.Element;
-	renderActions: (data: Block, context: BlockContext, parser: IParser) => JSX.Element;
-	renderContext: (data: IElement, context: BlockContext, parser: IParser) => JSX.Element;
-	renderInputs: (data: Partial<IElement>, context: BlockContext, parser: IParser) => JSX.Element;
-	text: (data: IText) => JSX.Element;
+	renderAccessories: (
+		data: TElementAccessory | IElement,
+		context: BlockContext,
+		parser?: IParser,
+		index?: number
+	) => JSX.Element | null;
+	renderActions: (data: TActionElement | IElement, context: BlockContext, parser?: IParser, index?: number) => JSX.Element | null;
+	renderContext: (
+		data: TContextElement | IElement,
+		context: BlockContext,
+		parser?: IParser,
+		index?: number
+	) => JSX.Element | null;
+	renderInputs: (data: TInputElement | IElement, context: BlockContext, parser?: IParser, index?: number) => JSX.Element | null;
+	text: (data: IText) => JSX.Element | null;
+	plain_text?: (data: PlainText | IText, context: BlockContext) => JSX.Element | null;
+	mrkdwn?: (data: Markdown | IText, context: BlockContext) => JSX.Element | null;
+	icon?: (data: IIcon, context: BlockContext) => JSX.Element | null;
+	icon_button?: (data: IIconButton, context: BlockContext) => JSX.Element | null;
 }
+
 export interface IActions extends Block {
+	blockId?: string;
+	appId?: string;
+	elements?: IElement[];
 	parser?: IParser;
 }
 
 export interface IContext extends Block {
+	elements?: IElement[];
 	parser: IParser;
+	theme?: TSupportedThemes;
 }
 
-export interface IDatePicker extends Partial<Block> {
+export interface IDatePicker {
+	element: IElement;
 	language: string;
-	action: Function;
-	context: number;
+	action: (params: { value: unknown }) => Promise<void>;
+	context: BlockContext;
 	loading: boolean;
 	value: string;
 	error: string;
 }
 
-export interface IInput extends Partial<Block> {
+export interface IInput {
+	element: IElement;
 	parser: IParser;
-	description: string;
-	error: string;
-	hint: string;
+	label?: string;
+	description?: string;
+	error?: string;
+	hint?: string;
 	theme: TSupportedThemes;
 }
 
 export interface IInputIndex {
 	element: IElement;
-	blockId: string;
-	appId: string;
-	label: IText;
-	description: IText;
-	hint: IText;
+	blockId?: string;
+	appId?: string;
+	label?: IText;
+	description?: IText;
+	hint?: IText;
 }
 
 export interface IThumb {
@@ -216,51 +223,61 @@ export interface IImage {
 	context?: BlockContext;
 }
 
-// UiKit/Overflow
-export interface IOverflow extends Partial<Block> {
-	action: Function;
+export interface IOverflow {
+	element: IElement;
+	action: (params: { value: unknown }) => Promise<void>;
 	loading: boolean;
 	parser: IParser;
-	context: number;
+	context: BlockContext;
 }
 
 interface PropsOption {
-	onOptionPress: Function;
+	onOptionPress: (params: { value: Option['value'] }) => void;
 	parser: IParser;
 	theme: TSupportedThemes;
 }
 export interface IOptions extends PropsOption {
-	options: Option[];
+	options: readonly Option[];
 }
 
 export interface IOption extends PropsOption {
 	option: Option;
 }
 
-// UiKit/Section
-interface IAccessory {
-	type: ElementTypes;
-	actionId: string;
-	value: number;
-	text: IText;
-}
-
-type TElementAccessory = IAccessory & { blockId: string; appId: string };
 export interface IAccessoryComponent {
-	element: TElementAccessory;
+	element: TElementAccessory | IElement;
 	parser: IParser;
 }
-export interface ISection {
+export interface ISection extends Block {
 	blockId: string;
 	appId: string;
 	text?: IText;
-	accessory?: IAccessory;
+	accessory?: IElement;
+	fields?: IText[];
 	parser: IParser;
-	fields?: any[];
 }
 
 export interface IFields {
 	parser: IParser;
 	theme: TSupportedThemes;
-	fields: any[];
+	fields: readonly IText[];
+}
+
+export type IIcon = FrameableIconElement & {
+	variant?: FrameableIconElement['variant'];
+};
+
+export type IIconButton = Omit<IconButtonElement, 'icon'> & {
+	icon: IIcon;
+	label?: string | IText;
+};
+
+export type IInfoCardRow = InfoCardBlock['rows'][number];
+export interface IInfoCard extends Omit<InfoCardBlock, 'rows'> {
+	rows: IInfoCardRow[];
+	appId?: string;
+	blockId?: string;
+	parser: IParser;
 }
+export type IBlockActionForView = ViewBlockActionUserInteraction;
+export type IViewClosedInteraction = ViewClosedUserInteraction;
diff --git a/app/containers/UnreadBadge/getUnreadStyle.test.js b/app/containers/UnreadBadge/getUnreadStyle.test.js
index 7e85c0e4ff6..4a99fd74986 100644
--- a/app/containers/UnreadBadge/getUnreadStyle.test.js
+++ b/app/containers/UnreadBadge/getUnreadStyle.test.js
@@ -2,7 +2,7 @@
 import { themes } from '../../lib/constants/colors';
 import { getUnreadStyle } from './getUnreadStyle';
 
-const testsForTheme = (theme) => {
+const testsForTheme = theme => {
 	const getUnreadStyleUtil = ({ ...props }) => getUnreadStyle({ theme, ...props });
 
 	test('render empty', () => {
diff --git a/app/containers/markdown/Markdown.stories.tsx b/app/containers/markdown/Markdown.stories.tsx
index 16472f10e44..1ff74a4fe0b 100644
--- a/app/containers/markdown/Markdown.stories.tsx
+++ b/app/containers/markdown/Markdown.stories.tsx
@@ -168,3 +168,21 @@ export const Timestamp = () => (
 		<Markdown msg='R: <t:1735732800:R>' />
 	</View>
 );
+
+const textStyle = { fontSize: 10, color: 'red' };
+export const TextStyle = () => (
+	<View style={styles.container}>
+		<Markdown
+			msg='Emphasis: *bold* _italic_ ~strikethrough~ *_bold with italic_* *~bold with strike~* *_~bold with italic and strike~_* _~italic with strike~_'
+			textStyle={textStyle}
+		/>
+		<Markdown msg={msgMentions} mentions={mentions} username='rocket.cat' textStyle={textStyle} />
+		<Markdown msg='#test-channel #unknown' channels={[{ _id: '123', name: 'test-channel' }]} textStyle={textStyle} />
+		<Markdown
+			msg={`> This is block quote
+this is a normal line`}
+			textStyle={textStyle}
+		/>
+		<Markdown msg='[Markdown link](https://rocket.chat)' textStyle={textStyle} />
+	</View>
+);
diff --git a/app/containers/markdown/Markdown.textStyle.test.tsx b/app/containers/markdown/Markdown.textStyle.test.tsx
new file mode 100644
index 00000000000..de15064db86
--- /dev/null
+++ b/app/containers/markdown/Markdown.textStyle.test.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+
+import Markdown from '.';
+
+jest.mock('../../lib/hooks/useAppSelector', () => ({
+	useAppSelector: jest.fn(() => false)
+}));
+
+jest.mock('../../lib/methods/userPreferences', () => ({
+	useUserPreferences: jest.fn(() => [true])
+}));
+
+describe('Markdown textStyle integration', () => {
+	it('propagates textStyle to link, mention, hashtag and plain text while preserving link interaction', () => {
+		const onLinkPress = jest.fn();
+		const textStyle = { fontSize: 17 };
+
+		const { getByLabelText, getByText } = render(
+			<Markdown
+				msg='hello [my link](https://rocket.chat) @rocket.cat #general'
+				textStyle={textStyle}
+				onLinkPress={onLinkPress}
+				mentions={[{ _id: 'u1', username: 'rocket.cat', name: 'Rocket Cat', type: 'user' }]}
+				username='another.user'
+				channels={[{ _id: 'r1', name: 'general' }]}
+			/>
+		);
+
+		const plainTextNode = getByLabelText('hello ');
+		const linkNode = getByText('my link');
+		const mentionNode = getByText('@rocket.cat');
+		const hashtagNode = getByText('#general');
+
+		expect(plainTextNode.props.style).toEqual(expect.arrayContaining([expect.objectContaining({ fontSize: 17 })]));
+		expect(linkNode.props.style).toEqual(expect.arrayContaining([expect.objectContaining({ fontSize: 17 })]));
+		expect(mentionNode.props.style).toEqual(expect.arrayContaining([expect.objectContaining({ fontSize: 17 })]));
+		expect(hashtagNode.props.style).toEqual(expect.arrayContaining([expect.objectContaining({ fontSize: 17 })]));
+
+		fireEvent.press(linkNode);
+
+		expect(onLinkPress).toHaveBeenCalledWith('https://rocket.chat');
+	});
+});
diff --git a/app/containers/markdown/__snapshots__/Markdown.test.tsx.snap b/app/containers/markdown/__snapshots__/Markdown.test.tsx.snap
index 0ff288d776a..066260baceb 100644
--- a/app/containers/markdown/__snapshots__/Markdown.test.tsx.snap
+++ b/app/containers/markdown/__snapshots__/Markdown.test.tsx.snap
@@ -711,15 +711,13 @@ exports[`Story Snapshots: Emoji should match snapshot 1`] = `
         </Text>
         <View
           style={
-            [
-              {
-                "transform": [
-                  {
-                    "translateY": 3,
-                  },
-                ],
-              },
-            ]
+            {
+              "transform": [
+                {
+                  "translateY": 3,
+                },
+              ],
+            }
           }
         >
           <ViewManagerAdapter_ExpoImage
@@ -774,15 +772,13 @@ exports[`Story Snapshots: Emoji should match snapshot 1`] = `
         </Text>
         <View
           style={
-            [
-              {
-                "transform": [
-                  {
-                    "translateY": 3,
-                  },
-                ],
-              },
-            ]
+            {
+              "transform": [
+                {
+                  "translateY": 3,
+                },
+              ],
+            }
           }
         >
           <ViewManagerAdapter_ExpoImage
@@ -837,15 +833,13 @@ exports[`Story Snapshots: Emoji should match snapshot 1`] = `
         </Text>
         <View
           style={
-            [
-              {
-                "transform": [
-                  {
-                    "translateY": 3,
-                  },
-                ],
-              },
-            ]
+            {
+              "transform": [
+                {
+                  "translateY": 3,
+                },
+              ],
+            }
           }
         >
           <ViewManagerAdapter_ExpoImage
@@ -940,15 +934,13 @@ exports[`Story Snapshots: Emoji should match snapshot 1`] = `
       </Text>
       <View
         style={
-          [
-            {
-              "transform": [
-                {
-                  "translateY": 0,
-                },
-              ],
-            },
-          ]
+          {
+            "transform": [
+              {
+                "translateY": 0,
+              },
+            ],
+          }
         }
       >
         <ViewManagerAdapter_ExpoImage
@@ -4328,6 +4320,1045 @@ exports[`Story Snapshots: Text should match snapshot 1`] = `
 </View>
 `;
 
+exports[`Story Snapshots: TextStyle should match snapshot 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "marginHorizontal": 15,
+      "marginVertical": 50,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "fontFamily": "Inter",
+            "fontSize": 16,
+            "fontWeight": "400",
+            "lineHeight": 22,
+            "textAlign": "left",
+          },
+          {
+            "color": "#2F343D",
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "backgroundColor": "transparent",
+            "flexShrink": 1,
+            "fontFamily": "Inter",
+            "fontWeight": "400",
+            "textAlign": "left",
+          }
+        }
+      >
+        <Text
+          accessibilityLabel="Emphasis: "
+          style={
+            [
+              {
+                "flexShrink": 1,
+                "fontSize": 16,
+                "lineHeight": 22,
+              },
+              {
+                "color": "#2F343D",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+            ]
+          }
+        >
+          Emphasis: 
+        </Text>
+        <Text
+          style={
+            {
+              "backgroundColor": "transparent",
+              "fontFamily": "Inter",
+              "fontWeight": "700",
+              "textAlign": "left",
+            }
+          }
+        >
+          <Text
+            accessibilityLabel="bold"
+            style={
+              [
+                {
+                  "flexShrink": 1,
+                  "fontSize": 16,
+                  "lineHeight": 22,
+                },
+                {
+                  "color": "#2F343D",
+                },
+                {
+                  "color": "red",
+                  "fontSize": 10,
+                },
+              ]
+            }
+          >
+            bold
+          </Text>
+        </Text>
+        <Text
+          accessibilityLabel=" "
+          style={
+            [
+              {
+                "flexShrink": 1,
+                "fontSize": 16,
+                "lineHeight": 22,
+              },
+              {
+                "color": "#2F343D",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+            ]
+          }
+        >
+           
+        </Text>
+        <Text
+          style={
+            {
+              "fontStyle": "italic",
+            }
+          }
+        >
+          <Text
+            accessibilityLabel="italic"
+            style={
+              [
+                {
+                  "flexShrink": 1,
+                  "fontSize": 16,
+                  "lineHeight": 22,
+                },
+                {
+                  "color": "#2F343D",
+                },
+                {
+                  "color": "red",
+                  "fontSize": 10,
+                },
+              ]
+            }
+          >
+            italic
+          </Text>
+        </Text>
+        <Text
+          accessibilityLabel=" "
+          style={
+            [
+              {
+                "flexShrink": 1,
+                "fontSize": 16,
+                "lineHeight": 22,
+              },
+              {
+                "color": "#2F343D",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+            ]
+          }
+        >
+           
+        </Text>
+        <Text
+          style={
+            {
+              "textDecorationLine": "line-through",
+            }
+          }
+        >
+          <Text
+            accessibilityLabel="strikethrough"
+            style={
+              [
+                {
+                  "flexShrink": 1,
+                  "fontSize": 16,
+                  "lineHeight": 22,
+                },
+                {
+                  "color": "#2F343D",
+                },
+                {
+                  "color": "red",
+                  "fontSize": 10,
+                },
+              ]
+            }
+          >
+            strikethrough
+          </Text>
+        </Text>
+        <Text
+          accessibilityLabel=" "
+          style={
+            [
+              {
+                "flexShrink": 1,
+                "fontSize": 16,
+                "lineHeight": 22,
+              },
+              {
+                "color": "#2F343D",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+            ]
+          }
+        >
+           
+        </Text>
+        <Text
+          style={
+            {
+              "backgroundColor": "transparent",
+              "fontFamily": "Inter",
+              "fontWeight": "700",
+              "textAlign": "left",
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontStyle": "italic",
+              }
+            }
+          >
+            <Text
+              accessibilityLabel="bold with italic"
+              style={
+                [
+                  {
+                    "flexShrink": 1,
+                    "fontSize": 16,
+                    "lineHeight": 22,
+                  },
+                  {
+                    "color": "#2F343D",
+                  },
+                  {
+                    "color": "red",
+                    "fontSize": 10,
+                  },
+                ]
+              }
+            >
+              bold with italic
+            </Text>
+          </Text>
+        </Text>
+        <Text
+          accessibilityLabel=" "
+          style={
+            [
+              {
+                "flexShrink": 1,
+                "fontSize": 16,
+                "lineHeight": 22,
+              },
+              {
+                "color": "#2F343D",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+            ]
+          }
+        >
+           
+        </Text>
+        <Text
+          style={
+            {
+              "backgroundColor": "transparent",
+              "fontFamily": "Inter",
+              "fontWeight": "700",
+              "textAlign": "left",
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "textDecorationLine": "line-through",
+              }
+            }
+          >
+            <Text
+              accessibilityLabel="bold with strike"
+              style={
+                [
+                  {
+                    "flexShrink": 1,
+                    "fontSize": 16,
+                    "lineHeight": 22,
+                  },
+                  {
+                    "color": "#2F343D",
+                  },
+                  {
+                    "color": "red",
+                    "fontSize": 10,
+                  },
+                ]
+              }
+            >
+              bold with strike
+            </Text>
+          </Text>
+        </Text>
+        <Text
+          accessibilityLabel=" "
+          style={
+            [
+              {
+                "flexShrink": 1,
+                "fontSize": 16,
+                "lineHeight": 22,
+              },
+              {
+                "color": "#2F343D",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+            ]
+          }
+        >
+           
+        </Text>
+        <Text
+          style={
+            {
+              "backgroundColor": "transparent",
+              "fontFamily": "Inter",
+              "fontWeight": "700",
+              "textAlign": "left",
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontStyle": "italic",
+              }
+            }
+          >
+            <Text
+              style={
+                {
+                  "textDecorationLine": "line-through",
+                }
+              }
+            >
+              <Text
+                accessibilityLabel="bold with italic and strike"
+                style={
+                  [
+                    {
+                      "flexShrink": 1,
+                      "fontSize": 16,
+                      "lineHeight": 22,
+                    },
+                    {
+                      "color": "#2F343D",
+                    },
+                    {
+                      "color": "red",
+                      "fontSize": 10,
+                    },
+                  ]
+                }
+              >
+                bold with italic and strike
+              </Text>
+            </Text>
+          </Text>
+        </Text>
+        <Text
+          accessibilityLabel=" "
+          style={
+            [
+              {
+                "flexShrink": 1,
+                "fontSize": 16,
+                "lineHeight": 22,
+              },
+              {
+                "color": "#2F343D",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+            ]
+          }
+        >
+           
+        </Text>
+        <Text
+          style={
+            {
+              "fontStyle": "italic",
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "textDecorationLine": "line-through",
+              }
+            }
+          >
+            <Text
+              accessibilityLabel="italic with strike"
+              style={
+                [
+                  {
+                    "flexShrink": 1,
+                    "fontSize": 16,
+                    "lineHeight": 22,
+                  },
+                  {
+                    "color": "#2F343D",
+                  },
+                  {
+                    "color": "red",
+                    "fontSize": 10,
+                  },
+                ]
+              }
+            >
+              italic with strike
+            </Text>
+          </Text>
+        </Text>
+      </Text>
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "fontFamily": "Inter",
+            "fontSize": 16,
+            "fontWeight": "400",
+            "lineHeight": 22,
+            "textAlign": "left",
+          },
+          {
+            "color": "#2F343D",
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "backgroundColor": "transparent",
+            "flexShrink": 1,
+            "fontFamily": "Inter",
+            "fontWeight": "400",
+            "textAlign": "left",
+          }
+        }
+      >
+        <Text
+          onPress={[Function]}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontWeight": "600",
+                "textAlign": "left",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+              {
+                "color": "#9B1325",
+              },
+            ]
+          }
+        >
+          rocket.cat
+        </Text>
+        <Text
+          accessibilityLabel=" "
+          style={
+            [
+              {
+                "flexShrink": 1,
+                "fontSize": 16,
+                "lineHeight": 22,
+              },
+              {
+                "color": "#2F343D",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+            ]
+          }
+        >
+           
+        </Text>
+        <Text
+          onPress={[Function]}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontWeight": "600",
+                "textAlign": "left",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+              {
+                "color": "#8E6300",
+              },
+            ]
+          }
+        >
+          name1
+        </Text>
+        <Text
+          accessibilityLabel=" "
+          style={
+            [
+              {
+                "flexShrink": 1,
+                "fontSize": 16,
+                "lineHeight": 22,
+              },
+              {
+                "color": "#2F343D",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+            ]
+          }
+        >
+           
+        </Text>
+        <Text
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontWeight": "600",
+                "textAlign": "left",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+              {
+                "color": "#974809",
+              },
+            ]
+          }
+        >
+          all
+        </Text>
+        <Text
+          accessibilityLabel=" "
+          style={
+            [
+              {
+                "flexShrink": 1,
+                "fontSize": 16,
+                "lineHeight": 22,
+              },
+              {
+                "color": "#2F343D",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+            ]
+          }
+        >
+           
+        </Text>
+        <Text
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontWeight": "600",
+                "textAlign": "left",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+              {
+                "color": "#974809",
+              },
+            ]
+          }
+        >
+          here
+        </Text>
+        <Text
+          accessibilityLabel=" "
+          style={
+            [
+              {
+                "flexShrink": 1,
+                "fontSize": 16,
+                "lineHeight": 22,
+              },
+              {
+                "color": "#2F343D",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+            ]
+          }
+        >
+           
+        </Text>
+        <Text
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textAlign": "left",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+              {
+                "color": "#2F343D",
+              },
+            ]
+          }
+        >
+          @unknown
+        </Text>
+        <Text
+          accessibilityLabel=" "
+          style={
+            [
+              {
+                "flexShrink": 1,
+                "fontSize": 16,
+                "lineHeight": 22,
+              },
+              {
+                "color": "#2F343D",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+            ]
+          }
+        >
+           
+        </Text>
+        <Text
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontWeight": "600",
+                "textAlign": "left",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+              {
+                "color": "#8E6300",
+              },
+            ]
+          }
+        >
+          team
+        </Text>
+      </Text>
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "fontFamily": "Inter",
+            "fontSize": 16,
+            "fontWeight": "400",
+            "lineHeight": 22,
+            "textAlign": "left",
+          },
+          {
+            "color": "#2F343D",
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "backgroundColor": "transparent",
+            "flexShrink": 1,
+            "fontFamily": "Inter",
+            "fontWeight": "400",
+            "textAlign": "left",
+          }
+        }
+      >
+        <Text
+          onPress={[Function]}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontWeight": "600",
+                "textAlign": "left",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+              {
+                "color": "#095AD2",
+              },
+            ]
+          }
+        >
+          test-channel
+        </Text>
+        <Text
+          accessibilityLabel=" "
+          style={
+            [
+              {
+                "flexShrink": 1,
+                "fontSize": 16,
+                "lineHeight": 22,
+              },
+              {
+                "color": "#2F343D",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+            ]
+          }
+        >
+           
+        </Text>
+        <Text
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textAlign": "left",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+              {
+                "color": "#2F343D",
+              },
+            ]
+          }
+        >
+          #unknown
+        </Text>
+      </Text>
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "flex-start",
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "height": "100%",
+              "marginRight": 5,
+              "width": 2,
+            },
+            {
+              "backgroundColor": "#CBCED1",
+            },
+          ]
+        }
+      />
+      <View
+        style={
+          {
+            "flex": 1,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textAlign": "left",
+              },
+              {
+                "color": "#2F343D",
+              },
+            ]
+          }
+        >
+          <Text
+            style={
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontWeight": "400",
+                "textAlign": "left",
+              }
+            }
+          >
+            <Text
+              accessibilityLabel="This is block quote"
+              style={
+                [
+                  {
+                    "flexShrink": 1,
+                    "fontSize": 16,
+                    "lineHeight": 22,
+                  },
+                  {
+                    "color": "#2F343D",
+                  },
+                  {
+                    "color": "red",
+                    "fontSize": 10,
+                  },
+                ]
+              }
+            >
+              This is block quote
+            </Text>
+          </Text>
+        </Text>
+      </View>
+    </View>
+    <Text
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "fontFamily": "Inter",
+            "fontSize": 16,
+            "fontWeight": "400",
+            "lineHeight": 22,
+            "textAlign": "left",
+          },
+          {
+            "color": "#2F343D",
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "backgroundColor": "transparent",
+            "flexShrink": 1,
+            "fontFamily": "Inter",
+            "fontWeight": "400",
+            "textAlign": "left",
+          }
+        }
+      >
+        <Text
+          accessibilityLabel="this is a normal line"
+          style={
+            [
+              {
+                "flexShrink": 1,
+                "fontSize": 16,
+                "lineHeight": 22,
+              },
+              {
+                "color": "#2F343D",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+            ]
+          }
+        >
+          this is a normal line
+        </Text>
+      </Text>
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "fontFamily": "Inter",
+            "fontSize": 16,
+            "fontWeight": "400",
+            "lineHeight": 22,
+            "textAlign": "left",
+          },
+          {
+            "color": "#2F343D",
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "backgroundColor": "transparent",
+            "flexShrink": 1,
+            "fontFamily": "Inter",
+            "fontWeight": "400",
+            "textAlign": "left",
+          }
+        }
+      >
+        <Text
+          onLongPress={[Function]}
+          onPress={[Function]}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontWeight": "400",
+                "textAlign": "left",
+              },
+              {
+                "color": "red",
+                "fontSize": 10,
+              },
+              {
+                "color": "#095AD2",
+              },
+            ]
+          }
+        >
+          Markdown link
+        </Text>
+      </Text>
+    </Text>
+  </View>
+</View>
+`;
+
 exports[`Story Snapshots: Timestamp should match snapshot 1`] = `
 <View
   style={
diff --git a/app/containers/markdown/components/Plain.tsx b/app/containers/markdown/components/Plain.tsx
index cdc70f9476b..000e6f31776 100644
--- a/app/containers/markdown/components/Plain.tsx
+++ b/app/containers/markdown/components/Plain.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Text } from 'react-native';
 import { type Plain as PlainProps } from '@rocket.chat/message-parser';
 
 import { useTheme } from '../../../theme';
 import styles from '../styles';
+import MarkdownContext from '../contexts/MarkdownContext';
 
 interface IPlainProps {
 	value: PlainProps['value'];
@@ -11,8 +12,9 @@ interface IPlainProps {
 
 const Plain = ({ value }: IPlainProps): React.ReactElement => {
 	const { colors } = useTheme();
+	const { textStyle } = useContext(MarkdownContext);
 	return (
-		<Text accessibilityLabel={value} style={[styles.plainText, { color: colors.fontDefault }]}>
+		<Text accessibilityLabel={value} style={[styles.plainText, { color: colors.fontDefault }, ...(textStyle ? [textStyle] : [])]}>
 			{value}
 		</Text>
 	);
diff --git a/app/containers/markdown/components/Preview.tsx b/app/containers/markdown/components/Preview.tsx
index cc48e6bbbfc..e252eba8bc0 100644
--- a/app/containers/markdown/components/Preview.tsx
+++ b/app/containers/markdown/components/Preview.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, type TextStyle } from 'react-native';
+import { type StyleProp, Text, type TextStyle } from 'react-native';
 
 import { themes } from '../../../lib/constants/colors';
 import { useTheme } from '../../../theme';
@@ -10,7 +10,7 @@ interface IMarkdownPreview {
 	msg?: string;
 	numberOfLines?: number;
 	testID?: string;
-	style?: TextStyle[];
+	style?: StyleProp<TextStyle>;
 }
 
 const MarkdownPreview = ({ msg, numberOfLines = 1, style = [], testID }: IMarkdownPreview) => {
@@ -24,7 +24,11 @@ const MarkdownPreview = ({ msg, numberOfLines = 1, style = [], testID }: IMarkdo
 	return (
 		<Text
 			accessibilityLabel={m}
-			style={[styles.text, { color: themes[theme].fontDefault, lineHeight: undefined }, ...style]}
+			style={[
+				styles.text,
+				{ color: themes[theme].fontDefault, lineHeight: undefined },
+				...(Array.isArray(style) ? style : [style])
+			]}
 			numberOfLines={numberOfLines}
 			testID={testID || `markdown-preview-${m}`}>
 			{m}
diff --git a/app/containers/markdown/components/emoji/Emoji.tsx b/app/containers/markdown/components/emoji/Emoji.tsx
index f1039d7bd1e..270d4adb486 100644
--- a/app/containers/markdown/components/emoji/Emoji.tsx
+++ b/app/containers/markdown/components/emoji/Emoji.tsx
@@ -69,7 +69,7 @@ const Emoji = ({ block, isBigEmoji, style = {}, index, isAvatar = false }: IEmoj
 
 	if (emoji) {
 		return (
-			<View style={[{ transform: [{ translateY: isBigEmoji || isAvatar ? 0 : 3 }] }]}>
+			<View style={{ transform: [{ translateY: isBigEmoji || isAvatar ? 0 : 3 }] }}>
 				<CustomEmoji style={[isBigEmoji ? customEmojiBigSize : customEmojiSize, style]} emoji={emoji} />
 			</View>
 		);
diff --git a/app/containers/markdown/components/inline/Link.tsx b/app/containers/markdown/components/inline/Link.tsx
index 76e8637ad61..be4e8f0b053 100644
--- a/app/containers/markdown/components/inline/Link.tsx
+++ b/app/containers/markdown/components/inline/Link.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Text } from 'react-native';
+import { Alert, Text } from 'react-native';
 import { type Link as LinkProps } from '@rocket.chat/message-parser';
 import Clipboard from '@react-native-clipboard/clipboard';
 
@@ -19,12 +19,16 @@ interface ILinkProps {
 
 const Link = ({ value }: ILinkProps) => {
 	const { theme } = useTheme();
-	const { onLinkPress } = useContext(MarkdownContext);
+	const { onLinkPress, textStyle } = useContext(MarkdownContext);
 	const { src, label } = value;
 	const handlePress = () => {
 		if (!src.value) {
 			return;
 		}
+		if (process.env.RUNNING_E2E_TESTS === 'true') {
+			Alert.alert('Link Pressed', src.value);
+			return;
+		}
 		if (onLinkPress) {
 			return onLinkPress(src.value);
 		}
@@ -32,12 +36,22 @@ const Link = ({ value }: ILinkProps) => {
 	};
 
 	const onLongPress = () => {
+		if (!src.value) {
+			return;
+		}
+		if (process.env.RUNNING_E2E_TESTS === 'true') {
+			Alert.alert('Link Long Pressed', src.value);
+			return;
+		}
 		Clipboard.setString(src.value);
 		EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') });
 	};
 
 	return (
-		<Text onPress={handlePress} onLongPress={onLongPress} style={[styles.link, { color: themes[theme].fontInfo }]}>
+		<Text
+			style={[styles.link, ...(textStyle ? [textStyle] : []), { color: themes[theme].fontInfo }]}
+			onPress={handlePress}
+			onLongPress={onLongPress}>
 			{(block => {
 				const blockArray = Array.isArray(block) ? block : [block];
 				return blockArray.map(blockInArray => {
diff --git a/app/containers/markdown/components/mentions/AtMention.tsx b/app/containers/markdown/components/mentions/AtMention.tsx
index cf0779c0343..a376aa50bdf 100644
--- a/app/containers/markdown/components/mentions/AtMention.tsx
+++ b/app/containers/markdown/components/mentions/AtMention.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { type StyleProp, Text, type TextStyle } from 'react-native';
+import React, { useContext } from 'react';
+import { Text } from 'react-native';
 
 import { useTheme } from '../../../../theme';
 import { themes } from '../../../../lib/constants/colors';
@@ -8,18 +8,19 @@ import styles from '../../styles';
 import { events, logEvent } from '../../../../lib/methods/helpers/log';
 import { type IUserMention } from '../../interfaces';
 import { useUserPreferences } from '../../../../lib/methods/userPreferences';
+import MarkdownContext from '../../contexts/MarkdownContext';
 
 interface IAtMention {
 	mention: string;
 	username?: string;
 	navToRoomInfo?: Function;
-	style?: StyleProp<TextStyle>[];
 	useRealName?: boolean;
 	mentions?: IUserMention[];
 }
 
-const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, style = [], useRealName }: IAtMention) => {
+const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, useRealName }: IAtMention) => {
 	const { theme } = useTheme();
+	const { textStyle } = useContext(MarkdownContext);
 	const [mentionsWithAtSymbol] = useUserPreferences<boolean>(USER_MENTIONS_PREFERENCES_KEY, false);
 	const preffix = mentionsWithAtSymbol ? '@' : '';
 	if (mention === 'all' || mention === 'here') {
@@ -27,10 +28,10 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 			<Text
 				style={[
 					styles.mention,
+					...(textStyle ? [textStyle] : []),
 					{
 						color: themes[theme].statusFontService
-					},
-					...style
+					}
 				]}>
 				{preffix}
 				{mention}
@@ -74,14 +75,18 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 
 		return (
 			// not enough information on mentions to navigate to team info, so we don't handle onPress
-			<Text style={[styles.mention, mentionStyle, ...style]} onPress={atMentioned?.type === 'team' ? undefined : handlePress}>
+			<Text
+				style={[styles.mention, ...(textStyle ? [textStyle] : []), mentionStyle]}
+				onPress={atMentioned?.type === 'team' ? undefined : handlePress}>
 				{preffix}
 				{text}
 			</Text>
 		);
 	}
 
-	return <Text style={[styles.text, { color: themes[theme].fontDefault }, ...style]}>{`@${mention}`}</Text>;
+	return (
+		<Text style={[styles.text, ...(textStyle ? [textStyle] : []), { color: themes[theme].fontDefault }]}>{`@${mention}`}</Text>
+	);
 });
 
 export default AtMention;
diff --git a/app/containers/markdown/components/mentions/Hashtag.tsx b/app/containers/markdown/components/mentions/Hashtag.tsx
index c5d8ffff7ee..047c4a183e2 100644
--- a/app/containers/markdown/components/mentions/Hashtag.tsx
+++ b/app/containers/markdown/components/mentions/Hashtag.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { type StyleProp, Text, type TextStyle } from 'react-native';
+import React, { useContext } from 'react';
+import { Text } from 'react-native';
 
 import i18n from '../../../../i18n';
 import { themes } from '../../../../lib/constants/colors';
@@ -14,16 +14,17 @@ import { useTheme } from '../../../../theme';
 import { sendLoadingEvent } from '../../../Loading';
 import { type IUserChannel } from '../../interfaces';
 import styles from '../../styles';
+import MarkdownContext from '../../contexts/MarkdownContext';
 
 interface IHashtag {
 	hashtag: string;
 	navToRoomInfo?: Function;
-	style?: StyleProp<TextStyle>[];
 	channels?: IUserChannel[];
 }
 
-const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IHashtag) => {
+const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo }: IHashtag) => {
 	const { theme } = useTheme();
+	const { textStyle } = useContext(MarkdownContext);
 	const [roomsWithHashTagSymbol] = useUserPreferences<boolean>(ROOM_MENTIONS_PREFERENCES_KEY, false);
 	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
 	const preffix = roomsWithHashTagSymbol ? '#' : '';
@@ -56,17 +57,19 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
 			<Text
 				style={[
 					styles.mention,
+					...(textStyle ? [textStyle] : []),
 					{
 						color: themes[theme].fontInfo
-					},
-					...style
+					}
 				]}
 				onPress={handlePress}>
 				{`${preffix}${hashtag}`}
 			</Text>
 		);
 	}
-	return <Text style={[styles.text, { color: themes[theme].fontDefault }, ...style]}>{`#${hashtag}`}</Text>;
+	return (
+		<Text style={[styles.text, ...(textStyle ? [textStyle] : []), { color: themes[theme].fontDefault }]}>{`#${hashtag}`}</Text>
+	);
 });
 
 export default Hashtag;
diff --git a/app/containers/markdown/contexts/MarkdownContext.ts b/app/containers/markdown/contexts/MarkdownContext.ts
index 68b327fd02e..d0b07ebc537 100644
--- a/app/containers/markdown/contexts/MarkdownContext.ts
+++ b/app/containers/markdown/contexts/MarkdownContext.ts
@@ -1,4 +1,5 @@
 import React from 'react';
+import { type StyleProp, type TextStyle } from 'react-native';
 
 import { type IUserMention, type IUserChannel } from '../interfaces';
 
@@ -10,6 +11,7 @@ interface IMarkdownContext {
 	navToRoomInfo?: Function;
 	getCustomEmoji?: Function;
 	onLinkPress?: Function;
+	textStyle?: StyleProp<TextStyle>;
 }
 
 const defaultState = {
@@ -17,7 +19,8 @@ const defaultState = {
 	channels: [],
 	useRealName: false,
 	username: '',
-	navToRoomInfo: () => {}
+	navToRoomInfo: () => {},
+	textStyle: undefined
 };
 
 const MarkdownContext = React.createContext<IMarkdownContext>(defaultState);
diff --git a/app/containers/markdown/index.tsx b/app/containers/markdown/index.tsx
index 5140f89890a..c641b3f4cf8 100644
--- a/app/containers/markdown/index.tsx
+++ b/app/containers/markdown/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
+import { type StyleProp, type TextStyle, View } from 'react-native';
 import { parse } from '@rocket.chat/message-parser';
 import type { Root } from '@rocket.chat/message-parser';
 import isEmpty from 'lodash/isEmpty';
@@ -32,6 +32,7 @@ interface IMarkdownProps {
 	navToRoomInfo?: Function;
 	onLinkPress?: TOnLinkPress;
 	isTranslated?: boolean;
+	textStyle?: StyleProp<TextStyle>;
 }
 
 const Markdown: React.FC<IMarkdownProps> = ({
@@ -44,7 +45,8 @@ const Markdown: React.FC<IMarkdownProps> = ({
 	username = '',
 	getCustomEmoji,
 	onLinkPress,
-	isTranslated
+	isTranslated,
+	textStyle
 }: IMarkdownProps) => {
 	if (!msg) return null;
 
@@ -67,7 +69,8 @@ const Markdown: React.FC<IMarkdownProps> = ({
 					username,
 					navToRoomInfo,
 					getCustomEmoji,
-					onLinkPress
+					onLinkPress,
+					textStyle
 				}}>
 				{tokens?.map(block => {
 					switch (block.type) {
diff --git a/app/containers/message/Broadcast.tsx b/app/containers/message/Broadcast.tsx
index c39eb3fa48d..b85c9f66da1 100644
--- a/app/containers/message/Broadcast.tsx
+++ b/app/containers/message/Broadcast.tsx
@@ -24,7 +24,6 @@ const Broadcast = React.memo(({ author, broadcast }: IMessageBroadcast) => {
 			<View style={styles.buttonContainer}>
 				<Touchable
 					onPress={replyBroadcast}
-					background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 					style={[styles.button, { backgroundColor: themes[theme].badgeBackgroundLevel2 }]}
 					hitSlop={BUTTON_HIT_SLOP}
 					testID='message-broadcast-reply'>
diff --git a/app/containers/message/CallButton.tsx b/app/containers/message/CallButton.tsx
index 174a8eafe75..9df1c4b324b 100644
--- a/app/containers/message/CallButton.tsx
+++ b/app/containers/message/CallButton.tsx
@@ -19,7 +19,6 @@ const CallButton = React.memo(({ handleEnterCall }: IMessageCallButton) => {
 		<View style={styles.buttonContainer}>
 			<Touchable
 				onPress={handleEnterCall}
-				background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 				style={[styles.button, { backgroundColor: themes[theme].badgeBackgroundLevel2 }]}
 				hitSlop={BUTTON_HIT_SLOP}>
 				<View style={styles.buttonInnerContainer}>
diff --git a/app/containers/message/Components/Attachments/CollapsibleQuote/index.tsx b/app/containers/message/Components/Attachments/CollapsibleQuote/index.tsx
index 073e5d7660d..68019746eb0 100644
--- a/app/containers/message/Components/Attachments/CollapsibleQuote/index.tsx
+++ b/app/containers/message/Components/Attachments/CollapsibleQuote/index.tsx
@@ -171,7 +171,6 @@ const CollapsibleQuote = React.memo(
 							borderLeftWidth: 2
 						}
 					]}
-					background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 					hitSlop={BUTTON_HIT_SLOP}>
 					<View style={styles.touchableContainer}>
 						<View style={styles.attachmentContainer}>
diff --git a/app/containers/message/Components/Attachments/Image/Button.tsx b/app/containers/message/Components/Attachments/Image/Button.tsx
index 16d301d390c..22a22e7e64a 100644
--- a/app/containers/message/Components/Attachments/Image/Button.tsx
+++ b/app/containers/message/Components/Attachments/Image/Button.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { useTheme } from '../../../../../theme';
 import Touchable from '../../../Touchable';
 import styles from '../../../styles';
 
@@ -13,13 +12,8 @@ interface IMessageButton {
 export const Button = ({ children, onPress, disabled }: IMessageButton) => {
 	'use memo';
 
-	const { colors } = useTheme();
 	return (
-		<Touchable
-			disabled={disabled}
-			onPress={onPress}
-			style={styles.imageContainer}
-			background={Touchable.Ripple(colors.surfaceNeutral)}>
+		<Touchable disabled={disabled} onPress={onPress} style={styles.imageContainer}>
 			{children}
 		</Touchable>
 	);
diff --git a/app/containers/message/Components/Attachments/Reply.tsx b/app/containers/message/Components/Attachments/Reply.tsx
index eec13fe43c0..74d47da3ceb 100644
--- a/app/containers/message/Components/Attachments/Reply.tsx
+++ b/app/containers/message/Components/Attachments/Reply.tsx
@@ -247,7 +247,6 @@ const Reply = React.memo(
 							borderColor: strokeLight
 						}
 					]}
-					background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 					disabled={!!(loading || attachment.message_link)}>
 					<View style={styles.attachmentContainer}>
 						<View style={styles.titleAndDescriptionContainer}>
@@ -261,7 +260,7 @@ const Reply = React.memo(
 							/>
 							<Fields attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} />
 							{loading ? (
-								<View style={[styles.backdrop]}>
+								<View style={styles.backdrop}>
 									<View
 										style={[
 											styles.backdrop,
diff --git a/app/containers/message/Components/Attachments/Video.tsx b/app/containers/message/Components/Attachments/Video.tsx
index c3c36d34f7f..13f38ef9a0e 100644
--- a/app/containers/message/Components/Attachments/Video.tsx
+++ b/app/containers/message/Components/Attachments/Video.tsx
@@ -74,7 +74,6 @@ const Video = ({ file, showAttachment, getCustomEmoji, author, msg }: IMessageVi
 	'use memo';
 
 	const { user } = useContext(MessageContext);
-	const { colors } = useTheme();
 	const { status, onPress, url, isEncrypted, currentFile } = useMediaAutoDownload({ file, author, showAttachment });
 
 	const _onPress = async () => {
@@ -103,7 +102,7 @@ const Video = ({ file, showAttachment, getCustomEmoji, author, msg }: IMessageVi
 	return (
 		<View style={{ gap: 4 }}>
 			{msg ? <Markdown msg={msg} username={user.username} getCustomEmoji={getCustomEmoji} /> : null}
-			<Touchable onPress={_onPress} style={messageStyles.image} background={Touchable.Ripple(colors.surfaceNeutral)}>
+			<Touchable onPress={_onPress} style={messageStyles.image}>
 				<Thumbnail status={status} encrypted={isEncrypted} />
 			</Touchable>
 		</View>
diff --git a/app/containers/message/Discussion.tsx b/app/containers/message/Discussion.tsx
index 30327cdc801..2a26d295dc3 100644
--- a/app/containers/message/Discussion.tsx
+++ b/app/containers/message/Discussion.tsx
@@ -31,7 +31,6 @@ const Discussion = React.memo(
 				<View style={[styles.buttonContainer, { gap: 8 }]}>
 					<Touchable
 						onPress={onDiscussionPress}
-						background={Touchable.Ripple(colors.surfaceNeutral)}
 						style={[styles.button, { backgroundColor: colors.badgeBackgroundLevel2 }]}
 						hitSlop={BUTTON_HIT_SLOP}>
 						<View style={styles.buttonInnerContainer}>
diff --git a/app/containers/message/Message.tsx b/app/containers/message/Message.tsx
index ce32c546e6a..5c6a28168f8 100644
--- a/app/containers/message/Message.tsx
+++ b/app/containers/message/Message.tsx
@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
 import { View, type ViewStyle } from 'react-native';
-import Touchable from 'react-native-platform-touchable';
 import { A11y } from 'react-native-a11y-order';
 
 import MessageContext from './Context';
@@ -27,6 +26,7 @@ import MessageTime from './Time';
 import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 import Quote from './Components/Attachments/Quote';
 import translationLanguages from '../../lib/constants/translationLanguages';
+import Touch from './Touch';
 
 const MessageInner = React.memo((props: IMessageInner) => {
 	const { isLargeFontScale } = useResponsiveLayout();
@@ -237,7 +237,7 @@ const MessageTouchable = React.memo((props: IMessageTouchable & IMessage) => {
 	return (
 		<A11y.Order>
 			<A11y.Index index={1}>
-				<Touchable
+				<Touch
 					onLongPress={onLongPress}
 					onPress={onPress}
 					disabled={
@@ -245,7 +245,7 @@ const MessageTouchable = React.memo((props: IMessageTouchable & IMessage) => {
 					}
 					style={{ backgroundColor }}>
 					<Message {...props} />
-				</Touchable>
+				</Touch>
 			</A11y.Index>
 		</A11y.Order>
 	);
diff --git a/app/containers/message/Reactions.tsx b/app/containers/message/Reactions.tsx
index d0ab1fde4c5..1d571b12065 100644
--- a/app/containers/message/Reactions.tsx
+++ b/app/containers/message/Reactions.tsx
@@ -40,7 +40,6 @@ const AddReaction = React.memo(({ theme }: { theme: TSupportedThemes }) => {
 			key='message-add-reaction'
 			testID='message-add-reaction'
 			style={[styles.reactionButton, { backgroundColor: themes[theme].surfaceRoom }]}
-			background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 			hitSlop={BUTTON_HIT_SLOP}>
 			<View style={[styles.reactionContainer, { borderColor: themes[theme].strokeLight, height }]}>
 				<CustomIcon name='reaction-add' size={20} color={themes[theme].badgeBackgroundLevel2} />
@@ -63,7 +62,6 @@ const Reaction = React.memo(({ reaction, getCustomEmoji, theme }: IMessageReacti
 			key={reaction.emoji}
 			testID={`message-reaction-${reaction.emoji}`}
 			style={[styles.reactionButton, { backgroundColor: reacted ? themes[theme].surfaceNeutral : themes[theme].surfaceRoom }]}
-			background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 			hitSlop={BUTTON_HIT_SLOP}>
 			<View
 				style={[
diff --git a/app/containers/message/Touch.tsx b/app/containers/message/Touch.tsx
new file mode 100644
index 00000000000..cb6d4b9b5d3
--- /dev/null
+++ b/app/containers/message/Touch.tsx
@@ -0,0 +1,108 @@
+import React from 'react';
+import {
+	View,
+	StyleSheet,
+	type ViewStyle,
+	type StyleProp,
+	type AccessibilityActionEvent,
+	type AccessibilityActionInfo,
+	TouchableNativeFeedback,
+	TouchableOpacity,
+	type TouchableWithoutFeedbackProps
+} from 'react-native';
+
+import { useTheme } from '../../theme';
+import { isIOS } from '../../lib/methods/helpers';
+
+export interface ITouchProps extends TouchableWithoutFeedbackProps {
+	children: React.ReactNode;
+	accessible?: boolean;
+	accessibilityLabel?: string;
+	accessibilityHint?: string;
+	accessibilityActions?: AccessibilityActionInfo[];
+	onAccessibilityAction?: (event: AccessibilityActionEvent) => void;
+	testID?: string;
+	rectButtonStyle?: StyleProp<ViewStyle>;
+	enabled?: boolean;
+	android_rippleColor?: string;
+}
+
+const Component = isIOS ? TouchableOpacity : TouchableNativeFeedback;
+
+const Touch = React.forwardRef<View, ITouchProps>(
+	(
+		{
+			children,
+			onPress,
+			android_rippleColor,
+			accessible,
+			accessibilityLabel,
+			accessibilityHint,
+			accessibilityActions,
+			onAccessibilityAction,
+			style,
+			rectButtonStyle,
+			enabled = true,
+			...props
+		},
+		ref
+	) => {
+		const { colors } = useTheme();
+		// The background color must be applied to the RectButton, not the View.
+		// If set on the View, the touch opacity animation won't work properly.
+		const flattenedStyle = StyleSheet.flatten(style) || {};
+		const {
+			borderRadius,
+			backgroundColor,
+			marginBottom,
+			margin,
+			marginLeft,
+			marginVertical,
+			marginHorizontal,
+			marginEnd,
+			marginRight,
+			marginStart,
+			marginTop,
+			...viewStyle
+		} = flattenedStyle;
+		// The margin should be applied to the parent component.
+		// If set on the View, it will create an internal margin inside the RectButton.
+		const marginStyles = {
+			margin,
+			marginBottom,
+			marginLeft,
+			marginVertical,
+			marginHorizontal,
+			marginEnd,
+			marginRight,
+			marginStart,
+			marginTop
+		};
+		const touchableProps = isIOS
+			? {}
+			: { background: TouchableNativeFeedback.Ripple(android_rippleColor ?? colors.surfaceNeutral, false) };
+
+		return (
+			<Component
+				ref={ref}
+				onPress={onPress}
+				style={[rectButtonStyle, marginStyles, { backgroundColor, borderRadius }]}
+				disabled={!enabled}
+				{...touchableProps}
+				{...props}>
+				<View
+					accessible={accessible}
+					accessibilityRole={props.accessibilityRole}
+					accessibilityLabel={accessibilityLabel}
+					accessibilityHint={accessibilityHint}
+					accessibilityActions={accessibilityActions}
+					onAccessibilityAction={onAccessibilityAction}
+					style={viewStyle}>
+					{children}
+				</View>
+			</Component>
+		);
+	}
+);
+
+export default Touch;
diff --git a/app/containers/message/Touchable.tsx b/app/containers/message/Touchable.tsx
index 1eecde9a4e7..f04fdb6b30a 100644
--- a/app/containers/message/Touchable.tsx
+++ b/app/containers/message/Touchable.tsx
@@ -1,22 +1,23 @@
 import React, { useContext } from 'react';
-import Touchable from 'react-native-platform-touchable';
+import { Pressable, type PressableProps } from 'react-native';
 
 import MessageContext from './Context';
 
-const RCTouchable: any = React.memo(({ children, ...props }: any) => {
+interface IProps extends PressableProps {
+	children: React.ReactNode;
+	onLongPress?: () => void;
+}
+
+const RCTouchable: React.FC<IProps> = React.memo(({ children, ...props }) => {
 	'use memo';
 
 	const { onLongPress } = useContext(MessageContext);
 
 	return (
-		<Touchable onLongPress={onLongPress} {...props}>
+		<Pressable onLongPress={onLongPress} {...props}>
 			{children}
-		</Touchable>
+		</Pressable>
 	);
 });
 
-// @ts-ignore
-RCTouchable.Ripple = (...args: any[]) => Touchable.Ripple(...args);
-RCTouchable.SelectableBackgroundBorderless = () => Touchable.SelectableBackgroundBorderless();
-
 export default RCTouchable;
diff --git a/app/containers/message/Urls.tsx b/app/containers/message/Urls.tsx
index 717754f9c3b..455fc8d5326 100644
--- a/app/containers/message/Urls.tsx
+++ b/app/containers/message/Urls.tsx
@@ -177,8 +177,7 @@ const Url = ({ url }: { url: IUrl }) => {
 					borderWidth: 1,
 					overflow: 'hidden'
 				}
-			]}
-			background={Touchable.Ripple(colors.surfaceNeutral)}>
+			]}>
 			<>
 				{imageUrl ? <UrlImage image={imageUrl} hasContent={hasContent} /> : null}
 				{hasContent ? <UrlContent title={url.title} description={url.description} /> : null}
diff --git a/app/containers/message/User.tsx b/app/containers/message/User.tsx
index f24a65d849f..15485df19a0 100644
--- a/app/containers/message/User.tsx
+++ b/app/containers/message/User.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 
 import { type MessageType, type MessageTypesValues, SubscriptionType } from '../../definitions';
 import { useTheme } from '../../theme';
@@ -10,6 +10,7 @@ import MessageContext from './Context';
 import { messageHaveAuthorName } from './utils';
 import MessageTime from './Time';
 import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
+import Touch from '../Touch';
 
 const styles = StyleSheet.create({
 	container: {
@@ -116,12 +117,12 @@ const User = React.memo(
 
 			return (
 				<View style={styles.container}>
-					<TouchableOpacity testID={`username-header-${username}`} style={styles.titleContainer} onPress={onUserPress}>
+					<Touch testID={`username-header-${username}`} style={styles.titleContainer} onPress={onUserPress}>
 						<Text style={[styles.username, { color: colors.fontTitlesLabels }]} numberOfLines={1}>
 							{textContent}
 						</Text>
 						{isLargeFontScale ? null : <MessageTime timeFormat={timeFormat} ts={ts} />}
-					</TouchableOpacity>
+					</Touch>
 					<RightIcons
 						type={type}
 						isEdited={isEdited}
diff --git a/app/containers/message/__snapshots__/Message.test.tsx.snap b/app/containers/message/__snapshots__/Message.test.tsx.snap
index 49522832257..eb164c03554 100644
--- a/app/containers/message/__snapshots__/Message.test.tsx.snap
+++ b/app/containers/message/__snapshots__/Message.test.tsx.snap
@@ -49,324 +49,390 @@ exports[`Story Snapshots: Archived should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This message is inside an archived room.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This message is inside an archived room"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r0:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This message is inside an archived room.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This message is inside an archived room"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r0:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={1}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={2}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-This message is inside an archived room"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This message is inside an archived room"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This message is inside an archived room"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This message is inside an archived room
+                                <Text
+                                  accessibilityLabel="This message is inside an archived room"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This message is inside an archived room
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -424,324 +490,390 @@ exports[`Story Snapshots: ArchivedLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This message is inside an archived room.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This message is inside an archived room"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This message is inside an archived room.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This message is inside an archived room"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={3}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={4}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-This message is inside an archived room"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
+                          <View
+                            collapsable={false}
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-This message is inside an archived room"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This message is inside an archived room"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This message is inside an archived room
+                                <Text
+                                  accessibilityLabel="This message is inside an archived room"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This message is inside an archived room
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -799,260 +931,318 @@ exports[`Story Snapshots: AttachmentWithTextAndLink should match snapshot 1`] =
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r2:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r2:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={5}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={6}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
                       <View
                         style={
                           {
@@ -1068,249 +1258,243 @@ exports[`Story Snapshots: AttachmentWithTextAndLink should match snapshot 1`] =
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#764FA5",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-Rocket.Chat, the best open source chat"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#764FA5",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-Rocket.Chat, the best open source chat"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
-                                    Rocket.Chat
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Rocket.Chat
+                                    </Text>
+                                  </View>
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
-                                        onLongPress={[Function]}
-                                        onPress={[Function]}
                                         style={
-                                          [
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            },
-                                            {
-                                              "color": "#095AD2",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        Rocket.Chat
-                                      </Text>
-                                      <Text
-                                        accessibilityLabel=", the best open source chat"
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
                                         }
                                       >
-                                        , the best open source chat
+                                        <Text
+                                          onLongPress={[Function]}
+                                          onPress={[Function]}
+                                          style={
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#095AD2",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          Rocket.Chat
+                                        </Text>
+                                        <Text
+                                          accessibilityLabel=", the best open source chat"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          , the best open source chat
+                                        </Text>
                                       </Text>
                                     </Text>
-                                  </Text>
+                                  </View>
                                 </View>
                               </View>
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "gap": 4,
-                          }
-                        }
-                      >
                         <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
                           style={
                             {
-                              "borderRadius": 4,
-                              "flexDirection": "column",
-                              "opacity": 1,
+                              "gap": 4,
                             }
                           }
                         >
                           <View
-                            onLayout={[Function]}
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "flex": 1,
+                                "borderRadius": 4,
+                                "flexDirection": "column",
                               }
                             }
                           >
                             <View
+                              onLayout={[Function]}
                               style={
-                                [
-                                  {
-                                    "borderRadius": 4,
-                                    "minHeight": 200,
-                                    "overflow": "hidden",
-                                    "width": "100%",
-                                  },
-                                  {
-                                    "borderColor": "#CBCED1",
-                                    "borderRadius": 4,
-                                    "borderWidth": 1,
-                                    "overflow": "hidden",
-                                  },
-                                ]
+                                {
+                                  "flex": 1,
+                                }
                               }
-                            />
-                            <View
-                              style={
-                                [
+                            >
+                              <View
+                                style={
                                   [
                                     {
                                       "borderRadius": 4,
@@ -1324,92 +1508,112 @@ exports[`Story Snapshots: AttachmentWithTextAndLink should match snapshot 1`] =
                                       "borderWidth": 1,
                                       "overflow": "hidden",
                                     },
-                                  ],
-                                  {
-                                    "borderWidth": 0,
-                                    "bottom": 0,
-                                    "left": 0,
-                                    "position": "absolute",
-                                    "right": 0,
-                                    "top": 0,
-                                  },
-                                  {
-                                    "backgroundColor": "#E4E7EA",
-                                  },
-                                ]
-                              }
-                            />
-                            <View
-                              style={
-                                [
+                                  ]
+                                }
+                              />
+                              <View
+                                style={
                                   [
+                                    [
+                                      {
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderRadius": 4,
+                                        "borderWidth": 1,
+                                        "overflow": "hidden",
+                                      },
+                                    ],
                                     {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
+                                      "borderWidth": 0,
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "position": "absolute",
+                                      "right": 0,
+                                      "top": 0,
                                     },
                                     {
-                                      "borderColor": "#CBCED1",
-                                      "borderRadius": 4,
-                                      "borderWidth": 1,
-                                      "overflow": "hidden",
+                                      "backgroundColor": "#E4E7EA",
                                     },
-                                  ],
-                                  {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                    "position": "absolute",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                                  ]
+                                }
+                              />
+                              <View
                                 style={
                                   [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 54,
-                                    },
                                     [
                                       {
-                                        "lineHeight": 54,
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderRadius": 4,
+                                        "borderWidth": 1,
+                                        "overflow": "hidden",
                                       },
-                                      undefined,
                                     ],
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                      "position": "absolute",
                                     },
-                                    {},
                                   ]
                                 }
                               >
-                                
-                              </Text>
-                            </View>
-                            <View
-                              style={
-                                {
-                                  "bottom": 8,
-                                  "flexDirection": "row",
-                                  "gap": 8,
-                                  "position": "absolute",
-                                  "right": 8,
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 54,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 54,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
+                              <View
+                                style={
+                                  {
+                                    "bottom": 8,
+                                    "flexDirection": "row",
+                                    "gap": 8,
+                                    "position": "absolute",
+                                    "right": 8,
+                                  }
                                 }
-                              }
-                            />
+                              />
+                            </View>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -1467,260 +1671,318 @@ exports[`Story Snapshots: AttachmentWithTextAndLinkLargeFont should match snapsh
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={7}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={8}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -1736,249 +1998,243 @@ exports[`Story Snapshots: AttachmentWithTextAndLinkLargeFont should match snapsh
                           }
                         >
                           <View
-                            accessibilityState={
+                            style={
                               {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#764FA5",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-Rocket.Chat, the best open source chat"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#764FA5",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-Rocket.Chat, the best open source chat"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
-                                    Rocket.Chat
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Rocket.Chat
+                                    </Text>
+                                  </View>
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
-                                        onLongPress={[Function]}
-                                        onPress={[Function]}
-                                        style={
-                                          [
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            },
-                                            {
-                                              "color": "#095AD2",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        Rocket.Chat
-                                      </Text>
-                                      <Text
-                                        accessibilityLabel=", the best open source chat"
                                         style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
                                         }
                                       >
-                                        , the best open source chat
+                                        <Text
+                                          onLongPress={[Function]}
+                                          onPress={[Function]}
+                                          style={
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#095AD2",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          Rocket.Chat
+                                        </Text>
+                                        <Text
+                                          accessibilityLabel=", the best open source chat"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          , the best open source chat
+                                        </Text>
                                       </Text>
                                     </Text>
-                                  </Text>
+                                  </View>
                                 </View>
                               </View>
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "gap": 4,
-                          }
-                        }
-                      >
                         <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
                           style={
                             {
-                              "borderRadius": 4,
-                              "flexDirection": "column",
-                              "opacity": 1,
+                              "gap": 4,
                             }
                           }
                         >
                           <View
-                            onLayout={[Function]}
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "flex": 1,
+                                "borderRadius": 4,
+                                "flexDirection": "column",
                               }
                             }
                           >
                             <View
+                              onLayout={[Function]}
                               style={
-                                [
-                                  {
-                                    "borderRadius": 4,
-                                    "minHeight": 200,
-                                    "overflow": "hidden",
-                                    "width": "100%",
-                                  },
-                                  {
-                                    "borderColor": "#CBCED1",
-                                    "borderRadius": 4,
-                                    "borderWidth": 1,
-                                    "overflow": "hidden",
-                                  },
-                                ]
+                                {
+                                  "flex": 1,
+                                }
                               }
-                            />
-                            <View
-                              style={
-                                [
+                            >
+                              <View
+                                style={
                                   [
                                     {
                                       "borderRadius": 4,
@@ -1992,92 +2248,112 @@ exports[`Story Snapshots: AttachmentWithTextAndLinkLargeFont should match snapsh
                                       "borderWidth": 1,
                                       "overflow": "hidden",
                                     },
-                                  ],
-                                  {
-                                    "borderWidth": 0,
-                                    "bottom": 0,
-                                    "left": 0,
-                                    "position": "absolute",
-                                    "right": 0,
-                                    "top": 0,
-                                  },
-                                  {
-                                    "backgroundColor": "#E4E7EA",
-                                  },
-                                ]
-                              }
-                            />
-                            <View
-                              style={
-                                [
+                                  ]
+                                }
+                              />
+                              <View
+                                style={
                                   [
+                                    [
+                                      {
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderRadius": 4,
+                                        "borderWidth": 1,
+                                        "overflow": "hidden",
+                                      },
+                                    ],
                                     {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
+                                      "borderWidth": 0,
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "position": "absolute",
+                                      "right": 0,
+                                      "top": 0,
                                     },
                                     {
-                                      "borderColor": "#CBCED1",
-                                      "borderRadius": 4,
-                                      "borderWidth": 1,
-                                      "overflow": "hidden",
+                                      "backgroundColor": "#E4E7EA",
                                     },
-                                  ],
-                                  {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                    "position": "absolute",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                                  ]
+                                }
+                              />
+                              <View
                                 style={
                                   [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 70.2,
-                                    },
                                     [
                                       {
-                                        "lineHeight": 70.2,
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderRadius": 4,
+                                        "borderWidth": 1,
+                                        "overflow": "hidden",
                                       },
-                                      undefined,
                                     ],
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                      "position": "absolute",
                                     },
-                                    {},
                                   ]
                                 }
                               >
-                                
-                              </Text>
-                            </View>
-                            <View
-                              style={
-                                {
-                                  "bottom": 8,
-                                  "flexDirection": "row",
-                                  "gap": 8,
-                                  "position": "absolute",
-                                  "right": 8,
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 70.2,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 70.2,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
+                              <View
+                                style={
+                                  {
+                                    "bottom": 8,
+                                    "flexDirection": "row",
+                                    "gap": 8,
+                                    "position": "absolute",
+                                    "right": 8,
+                                  }
                                 }
-                              }
-                            />
+                              />
+                            </View>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -2135,324 +2411,390 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="no.avatar 10:00:00 AM  This message has no avatar..  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This message has no avatar."
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r4:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="no.avatar 10:00:00 AM  This message has no avatar..  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This message has no avatar."
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r4:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="no.avatar's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={9}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/no.avatar?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="no.avatar's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/no.avatar?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-no.avatar"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={10}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-no.avatar"
+                          underlayColor="#E4E7EA"
                         >
-                          no.avatar
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              no.avatar
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-This message has no avatar."
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This message has no avatar."
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This message has no avatar."
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This message has no avatar.
+                                <Text
+                                  accessibilityLabel="This message has no avatar."
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This message has no avatar.
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -2497,324 +2839,390 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This message uses the user's profile picture as the avatar..  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This message uses the user's profile picture as the avatar."
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r5:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This message uses the user's profile picture as the avatar..  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This message uses the user's profile picture as the avatar."
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r5:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={11}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={12}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-This message uses the user's profile picture as the avatar."
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This message uses the user's profile picture as the avatar."
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This message uses the user's profile picture as the avatar."
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This message uses the user's profile picture as the avatar.
-                              </Text>
-                            </Text>
-                          </Text>
+                                <Text
+                                  accessibilityLabel="This message uses the user's profile picture as the avatar."
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This message uses the user's profile picture as the avatar.
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -2859,316 +3267,382 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This message uses a Unicode emoji as the avatar..  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This message uses a Unicode emoji as the avatar."
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r6:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This message uses a Unicode emoji as the avatar..  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This message uses a Unicode emoji as the avatar."
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r6:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <Text
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={13}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
                         style={
                           [
                             {
-                              "color": "#2F343D",
-                            },
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "lineHeight": 22,
-                              "textAlign": "left",
-                            },
-                            {
-                              "borderRadius": 4,
-                              "height": 36,
-                              "width": 36,
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
                             {
-                              "fontSize": 30,
-                              "lineHeight": 30,
-                              "textAlign": "center",
-                              "textAlignVertical": "center",
+                              "cursor": undefined,
                             },
                           ]
                         }
+                        underlayColor="#E4E7EA"
                       >
-                        😄
-                      </Text>
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <Text
+                            style={
+                              [
+                                {
+                                  "color": "#2F343D",
+                                },
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 16,
+                                  "fontWeight": "400",
+                                  "lineHeight": 22,
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "borderRadius": 4,
+                                  "height": 36,
+                                  "width": 36,
+                                },
+                                {
+                                  "fontSize": 30,
+                                  "lineHeight": 30,
+                                  "textAlign": "center",
+                                  "textAlignVertical": "center",
+                                },
+                              ]
+                            }
+                          >
+                            😄
+                          </Text>
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={14}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-This message uses a Unicode emoji as the avatar."
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This message uses a Unicode emoji as the avatar."
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This message uses a Unicode emoji as the avatar."
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This message uses a Unicode emoji as the avatar.
+                                <Text
+                                  accessibilityLabel="This message uses a Unicode emoji as the avatar."
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This message uses a Unicode emoji as the avatar.
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -3213,334 +3687,398 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This message uses a custom animated emoji as the avatar..  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This message uses a custom animated emoji as the avatar."
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r7:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This message uses a custom animated emoji as the avatar..  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This message uses a custom animated emoji as the avatar."
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r7:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <View
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={15}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
                         style={
                           [
                             {
-                              "transform": [
-                                {
-                                  "translateY": 0,
-                                },
-                              ],
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
+                        underlayColor="#E4E7EA"
                       >
-                        <ViewManagerAdapter_ExpoImage
-                          borderRadius={4}
-                          containerViewRef={"[React.ref]"}
-                          contentFit="contain"
-                          contentPosition={
-                            {
-                              "left": "50%",
-                              "top": "50%",
-                            }
-                          }
-                          height={36}
-                          nativeViewRef={"[React.ref]"}
-                          onError={[Function]}
-                          onLoad={[Function]}
-                          onLoadStart={[Function]}
-                          onProgress={[Function]}
-                          placeholder={[]}
-                          source={
-                            [
-                              {
-                                "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
-                              },
-                            ]
-                          }
+                        <View
+                          collapsable={false}
                           style={
                             {
-                              "borderRadius": 4,
-                              "height": 36,
-                              "width": 36,
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
                             }
                           }
-                          transition={null}
-                          width={36}
                         />
-                      </View>
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <View
+                            style={
+                              {
+                                "transform": [
+                                  {
+                                    "translateY": 0,
+                                  },
+                                ],
+                              }
+                            }
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={"[React.ref]"}
+                              contentFit="contain"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={36}
+                              nativeViewRef={"[React.ref]"}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              source={
+                                [
+                                  {
+                                    "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 36,
+                                  "width": 36,
+                                }
+                              }
+                              transition={null}
+                              width={36}
+                            />
+                          </View>
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
+                        style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={16}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-This message uses a custom animated emoji as the avatar."
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This message uses a custom animated emoji as the avatar."
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This message uses a custom animated emoji as the avatar."
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This message uses a custom animated emoji as the avatar.
+                                <Text
+                                  accessibilityLabel="This message uses a custom animated emoji as the avatar."
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This message uses a custom animated emoji as the avatar.
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -3585,335 +4123,399 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This message uses a custom static emoji as the avatar..  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This message uses a custom static emoji as the avatar."
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r8:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This message uses a custom static emoji as the avatar..  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This message uses a custom static emoji as the avatar."
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r8:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <View
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={17}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
                         style={
                           [
                             {
-                              "transform": [
-                                {
-                                  "translateY": 0,
-                                },
-                              ],
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
+                        underlayColor="#E4E7EA"
                       >
-                        <ViewManagerAdapter_ExpoImage
-                          borderRadius={4}
-                          containerViewRef={"[React.ref]"}
-                          contentFit="contain"
-                          contentPosition={
-                            {
-                              "left": "50%",
-                              "top": "50%",
-                            }
-                          }
-                          height={36}
-                          nativeViewRef={"[React.ref]"}
-                          onError={[Function]}
-                          onLoad={[Function]}
-                          onLoadStart={[Function]}
-                          onProgress={[Function]}
-                          placeholder={[]}
-                          source={
-                            [
-                              {
-                                "uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
-                              },
-                            ]
-                          }
+                        <View
+                          collapsable={false}
                           style={
                             {
-                              "borderRadius": 4,
-                              "height": 36,
-                              "width": 36,
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
                             }
                           }
-                          transition={null}
-                          width={36}
                         />
-                      </View>
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <View
+                            style={
+                              {
+                                "transform": [
+                                  {
+                                    "translateY": 0,
+                                  },
+                                ],
+                              }
+                            }
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={"[React.ref]"}
+                              contentFit="contain"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={36}
+                              nativeViewRef={"[React.ref]"}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              source={
+                                [
+                                  {
+                                    "uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 36,
+                                  "width": 36,
+                                }
+                              }
+                              transition={null}
+                              width={36}
+                            />
+                          </View>
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={18}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-This message uses a custom static emoji as the avatar."
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This message uses a custom static emoji as the avatar."
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This message uses a custom static emoji as the avatar."
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This message uses a custom static emoji as the avatar.
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
+                                <Text
+                                  accessibilityLabel="This message uses a custom static emoji as the avatar."
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This message uses a custom static emoji as the avatar.
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
@@ -3970,324 +4572,390 @@ exports[`Story Snapshots: Basic should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={19}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={20}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -4332,324 +5000,390 @@ exports[`Story Snapshots: Basic should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":ra:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":ra:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={21}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={22}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                      >
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "flexDirection": "row",
                             }
                           }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                                <Text
+                                  accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -4707,324 +5441,390 @@ exports[`Story Snapshots: BasicLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rb:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rb:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={23}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={24}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -5069,324 +5869,390 @@ exports[`Story Snapshots: BasicLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rc:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rc:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={25}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={26}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                                <Text
+                                  accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -5444,346 +6310,412 @@ exports[`Story Snapshots: BlockQuote should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  > Testing block quote.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="> Testing block quote"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rd:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  > Testing block quote.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="> Testing block quote"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rd:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={27}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={28}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-> Testing block quote"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-> Testing block quote"
                         >
                           <View
                             style={
                               {
-                                "alignItems": "flex-start",
-                                "flexDirection": "row",
+                                "gap": 2,
                               }
                             }
                           >
-                            <View
-                              style={
-                                [
-                                  {
-                                    "height": "100%",
-                                    "marginRight": 5,
-                                    "width": 2,
-                                  },
-                                  {
-                                    "backgroundColor": "#CBCED1",
-                                  },
-                                ]
-                              }
-                            />
                             <View
                               style={
                                 {
-                                  "flex": 1,
+                                  "alignItems": "flex-start",
+                                  "flexDirection": "row",
                                 }
                               }
                             >
-                              <Text
+                              <View
                                 style={
                                   [
                                     {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
+                                      "height": "100%",
+                                      "marginRight": 5,
+                                      "width": 2,
                                     },
                                     {
-                                      "color": "#2F343D",
+                                      "backgroundColor": "#CBCED1",
                                     },
                                   ]
                                 }
+                              />
+                              <View
+                                style={
+                                  {
+                                    "flex": 1,
+                                  }
+                                }
                               >
                                 <Text
                                   style={
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    }
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
                                   }
                                 >
                                   <Text
-                                    accessibilityLabel="Testing block quote"
                                     style={
-                                      [
-                                        {
-                                          "flexShrink": 1,
-                                          "fontSize": 16,
-                                          "lineHeight": 22,
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      }
                                     }
                                   >
-                                    Testing block quote
+                                    <Text
+                                      accessibilityLabel="Testing block quote"
+                                      style={
+                                        [
+                                          {
+                                            "flexShrink": 1,
+                                            "fontSize": 16,
+                                            "lineHeight": 22,
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Testing block quote
+                                    </Text>
                                   </Text>
                                 </Text>
-                              </Text>
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -5791,8 +6723,8 @@ exports[`Story Snapshots: BlockQuote should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -5837,405 +6769,471 @@ exports[`Story Snapshots: BlockQuote should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  > Testing block quote
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  > Testing block quote
 Testing block quote.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
+                }
               }
-            }
-            testID="message-undefined"
-          >
-            <A11yIndexView
-              accessibilityLabel="> Testing block quote
-Testing block quote"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":re:"
+              testID="message-undefined"
             >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
+              <A11yIndexView
+                accessibilityLabel="> Testing block quote
+Testing block quote"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":re:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={29}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={30}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-> Testing block quote
-Testing block quote"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-> Testing block quote
+Testing block quote"
                         >
                           <View
                             style={
                               {
-                                "alignItems": "flex-start",
-                                "flexDirection": "row",
+                                "gap": 2,
                               }
                             }
                           >
-                            <View
-                              style={
-                                [
-                                  {
-                                    "height": "100%",
-                                    "marginRight": 5,
-                                    "width": 2,
-                                  },
-                                  {
-                                    "backgroundColor": "#CBCED1",
-                                  },
-                                ]
-                              }
-                            />
                             <View
                               style={
                                 {
-                                  "flex": 1,
+                                  "alignItems": "flex-start",
+                                  "flexDirection": "row",
                                 }
                               }
                             >
-                              <Text
+                              <View
                                 style={
                                   [
                                     {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
+                                      "height": "100%",
+                                      "marginRight": 5,
+                                      "width": 2,
                                     },
                                     {
-                                      "color": "#2F343D",
+                                      "backgroundColor": "#CBCED1",
                                     },
                                   ]
                                 }
+                              />
+                              <View
+                                style={
+                                  {
+                                    "flex": 1,
+                                  }
+                                }
                               >
                                 <Text
                                   style={
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    }
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
                                   }
                                 >
                                   <Text
-                                    accessibilityLabel="Testing block quote"
                                     style={
-                                      [
-                                        {
-                                          "flexShrink": 1,
-                                          "fontSize": 16,
-                                          "lineHeight": 22,
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      }
                                     }
                                   >
-                                    Testing block quote
+                                    <Text
+                                      accessibilityLabel="Testing block quote"
+                                      style={
+                                        [
+                                          {
+                                            "flexShrink": 1,
+                                            "fontSize": 16,
+                                            "lineHeight": 22,
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Testing block quote
+                                    </Text>
                                   </Text>
                                 </Text>
-                              </Text>
+                              </View>
                             </View>
-                          </View>
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Testing block quote"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Testing block quote
+                                <Text
+                                  accessibilityLabel="Testing block quote"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Testing block quote
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -6293,346 +7291,412 @@ exports[`Story Snapshots: BlockQuoteLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  > Testing block quote.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="> Testing block quote"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rf:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  > Testing block quote.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="> Testing block quote"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rf:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={31}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={32}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-> Testing block quote"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
+                          />
                           <View
                             style={
                               {
-                                "alignItems": "flex-start",
+                                "alignItems": "center",
                                 "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
                           >
-                            <View
+                            <Text
+                              numberOfLines={1}
                               style={
                                 [
                                   {
-                                    "height": "100%",
-                                    "marginRight": 5,
-                                    "width": 2,
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
                                   },
                                   {
-                                    "backgroundColor": "#CBCED1",
+                                    "color": "#1F2329",
                                   },
                                 ]
                               }
-                            />
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-> Testing block quote"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
                             <View
                               style={
                                 {
-                                  "flex": 1,
+                                  "alignItems": "flex-start",
+                                  "flexDirection": "row",
                                 }
                               }
                             >
-                              <Text
+                              <View
                                 style={
                                   [
                                     {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
+                                      "height": "100%",
+                                      "marginRight": 5,
+                                      "width": 2,
                                     },
                                     {
-                                      "color": "#2F343D",
+                                      "backgroundColor": "#CBCED1",
                                     },
                                   ]
                                 }
+                              />
+                              <View
+                                style={
+                                  {
+                                    "flex": 1,
+                                  }
+                                }
                               >
                                 <Text
                                   style={
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    }
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
                                   }
                                 >
                                   <Text
-                                    accessibilityLabel="Testing block quote"
                                     style={
-                                      [
-                                        {
-                                          "flexShrink": 1,
-                                          "fontSize": 16,
-                                          "lineHeight": 22,
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      }
                                     }
                                   >
-                                    Testing block quote
+                                    <Text
+                                      accessibilityLabel="Testing block quote"
+                                      style={
+                                        [
+                                          {
+                                            "flexShrink": 1,
+                                            "fontSize": 16,
+                                            "lineHeight": 22,
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Testing block quote
+                                    </Text>
                                   </Text>
                                 </Text>
-                              </Text>
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -6640,8 +7704,8 @@ exports[`Story Snapshots: BlockQuoteLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -6686,405 +7750,471 @@ exports[`Story Snapshots: BlockQuoteLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  > Testing block quote
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  > Testing block quote
 Testing block quote.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
+                }
               }
-            }
-            testID="message-undefined"
-          >
-            <A11yIndexView
-              accessibilityLabel="> Testing block quote
-Testing block quote"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rg:"
+              testID="message-undefined"
             >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
+              <A11yIndexView
+                accessibilityLabel="> Testing block quote
+Testing block quote"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rg:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={33}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={34}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-> Testing block quote
-Testing block quote"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
+                          />
                           <View
                             style={
                               {
-                                "alignItems": "flex-start",
+                                "alignItems": "center",
                                 "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
                           >
-                            <View
+                            <Text
+                              numberOfLines={1}
                               style={
                                 [
                                   {
-                                    "height": "100%",
-                                    "marginRight": 5,
-                                    "width": 2,
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
                                   },
                                   {
-                                    "backgroundColor": "#CBCED1",
+                                    "color": "#1F2329",
                                   },
                                 ]
                               }
-                            />
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-> Testing block quote
+Testing block quote"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
                             <View
                               style={
                                 {
-                                  "flex": 1,
+                                  "alignItems": "flex-start",
+                                  "flexDirection": "row",
                                 }
                               }
                             >
-                              <Text
+                              <View
                                 style={
                                   [
                                     {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
+                                      "height": "100%",
+                                      "marginRight": 5,
+                                      "width": 2,
                                     },
                                     {
-                                      "color": "#2F343D",
+                                      "backgroundColor": "#CBCED1",
                                     },
                                   ]
                                 }
-                              >
-                                <Text
-                                  style={
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    }
+                              />
+                              <View
+                                style={
+                                  {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
                                   }
                                 >
                                   <Text
-                                    accessibilityLabel="Testing block quote"
                                     style={
-                                      [
-                                        {
-                                          "flexShrink": 1,
-                                          "fontSize": 16,
-                                          "lineHeight": 22,
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      }
                                     }
                                   >
-                                    Testing block quote
+                                    <Text
+                                      accessibilityLabel="Testing block quote"
+                                      style={
+                                        [
+                                          {
+                                            "flexShrink": 1,
+                                            "fontSize": 16,
+                                            "lineHeight": 22,
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Testing block quote
+                                    </Text>
                                   </Text>
                                 </Text>
-                              </Text>
+                              </View>
                             </View>
-                          </View>
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Testing block quote"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Testing block quote
+                                <Text
+                                  accessibilityLabel="Testing block quote"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Testing block quote
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -7142,439 +8272,510 @@ exports[`Story Snapshots: Broadcast should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Broadcasted message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Broadcasted message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rh:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Broadcasted message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Broadcasted message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rh:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={35}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={36}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Broadcasted message"
                       >
+                        <View
+                          testID="message-content-Broadcasted message"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Broadcasted message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Broadcasted message
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "alignItems": "center",
+                              "flexDirection": "row",
                             }
                           }
                         >
-                          <Text
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "paddingHorizontal": 12,
+                                  "paddingVertical": 8,
                                 },
                                 {
-                                  "color": "#2F343D",
+                                  "backgroundColor": "#1D74F5",
                                 },
                               ]
                             }
+                            testID="message-broadcast-reply"
                           >
-                            <Text
+                            <View
                               style={
                                 {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "gap": 8,
                                 }
                               }
                             >
                               <Text
-                                accessibilityLabel="Broadcasted message"
+                                allowFontScaling={false}
+                                selectable={false}
                                 style={
                                   [
                                     {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
+                                      "color": "#FFFFFF",
+                                      "fontSize": 20,
                                     },
+                                    [
+                                      {
+                                        "lineHeight": 20,
+                                      },
+                                      undefined,
+                                    ],
                                     {
-                                      "color": "#2F343D",
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
                                     },
+                                    {},
                                   ]
                                 }
                               >
-                                Broadcasted message
+                                
                               </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "alignItems": "center",
-                              "backgroundColor": "#1D74F5",
-                              "borderRadius": 4,
-                              "flexDirection": "row",
-                              "justifyContent": "center",
-                              "opacity": 1,
-                              "paddingHorizontal": 12,
-                              "paddingVertical": 8,
-                            }
-                          }
-                          testID="message-broadcast-reply"
-                        >
-                          <View
-                            style={
-                              {
-                                "alignItems": "center",
-                                "flexDirection": "row",
-                                "gap": 8,
-                              }
-                            }
-                          >
-                            <Text
-                              allowFontScaling={false}
-                              selectable={false}
-                              style={
-                                [
-                                  {
-                                    "color": "#FFFFFF",
-                                    "fontSize": 20,
-                                  },
-                                  [
-                                    {
-                                      "lineHeight": 20,
-                                    },
-                                    undefined,
-                                  ],
-                                  {
-                                    "fontFamily": "custom",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "normal",
-                                  },
-                                  {},
-                                ]
-                              }
-                            >
-                              
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 12,
-                                    "fontWeight": "600",
-                                    "lineHeight": 16,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#FFFFFF",
-                                  },
-                                ]
-                              }
-                            >
-                              Reply
-                            </Text>
-                          </View>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 12,
+                                      "fontWeight": "600",
+                                      "lineHeight": 16,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#FFFFFF",
+                                    },
+                                  ]
+                                }
+                              >
+                                Reply
+                              </Text>
+                            </View>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -7632,474 +8833,545 @@ exports[`Story Snapshots: BroadcastLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Broadcasted message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Broadcasted message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":ri:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Broadcasted message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Broadcasted message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":ri:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={37}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={38}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Broadcasted message"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
-                          <Text
+                          />
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
                           >
                             <Text
+                              numberOfLines={1}
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
                               }
                             >
-                              <Text
-                                accessibilityLabel="Broadcasted message"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Broadcasted message
-                              </Text>
+                              diego.mello
                             </Text>
-                          </Text>
-                        </View>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "alignItems": "center",
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
                       >
                         <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "alignItems": "center",
-                              "backgroundColor": "#1D74F5",
-                              "borderRadius": 4,
-                              "flexDirection": "row",
-                              "justifyContent": "center",
-                              "opacity": 1,
-                              "paddingHorizontal": 12,
-                              "paddingVertical": 8,
-                            }
-                          }
-                          testID="message-broadcast-reply"
+                          testID="message-content-Broadcasted message"
                         >
                           <View
                             style={
                               {
-                                "alignItems": "center",
-                                "flexDirection": "row",
-                                "gap": 8,
+                                "gap": 2,
                               }
                             }
                           >
                             <Text
-                              allowFontScaling={false}
-                              selectable={false}
                               style={
                                 [
                                   {
-                                    "color": "#FFFFFF",
-                                    "fontSize": 26,
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
                                   },
-                                  [
-                                    {
-                                      "lineHeight": 26,
-                                    },
-                                    undefined,
-                                  ],
                                   {
-                                    "fontFamily": "custom",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "normal",
+                                    "color": "#2F343D",
                                   },
-                                  {},
                                 ]
                               }
                             >
-                              
-                            </Text>
-                            <Text
-                              style={
-                                [
+                              <Text
+                                style={
                                   {
                                     "backgroundColor": "transparent",
+                                    "flexShrink": 1,
                                     "fontFamily": "Inter",
-                                    "fontSize": 12,
-                                    "fontWeight": "600",
-                                    "lineHeight": 16,
+                                    "fontWeight": "400",
                                     "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#FFFFFF",
-                                  },
-                                ]
-                              }
-                            >
-                              Reply
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Broadcasted message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Broadcasted message
+                                </Text>
+                              </Text>
                             </Text>
                           </View>
                         </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
-    <A11yOrderView
-      orderKey=":rj:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":rj:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+                        <View
+                          style={
+                            {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                            }
+                          }
+                        >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "paddingHorizontal": 12,
+                                  "paddingVertical": 8,
+                                },
+                                {
+                                  "backgroundColor": "#1D74F5",
+                                },
+                              ]
+                            }
+                            testID="message-broadcast-reply"
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "gap": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#FFFFFF",
+                                      "fontSize": 26,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 26,
+                                      },
+                                      undefined,
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 12,
+                                      "fontWeight": "600",
+                                      "lineHeight": 16,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#FFFFFF",
+                                    },
+                                  ]
+                                }
+                              >
+                                Reply
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
+    <A11yOrderView
+      orderKey=":rj:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":rj:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
           }
           accessibilityValue={
             {
@@ -8122,318 +9394,317 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rj:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rj:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={39}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={40}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
-                          <Text
+                          />
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
                           >
                             <Text
+                              numberOfLines={1}
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
                               }
                             >
-                              <Text
-                                accessibilityLabel="Message"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Message
-                              </Text>
+                              diego.mello
                             </Text>
-                          </Text>
-                        </View>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
                       <View
                         style={
@@ -8443,140 +9714,213 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                         }
                       >
                         <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "alignItems": "center",
-                              "backgroundColor": "#F7F8FA",
-                              "borderBottomColor": "#EBECEF",
-                              "borderLeftColor": "#CBCED1",
-                              "borderLeftWidth": 2,
-                              "borderRadius": 4,
-                              "borderRightColor": "#EBECEF",
-                              "borderTopColor": "#EBECEF",
-                              "borderWidth": 1,
-                              "flexDirection": "row",
-                              "minHeight": 40,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="collapsibleQuoteTouchable-Title collapsed"
+                          testID="message-content-Message"
                         >
                           <View
                             style={
                               {
-                                "flexDirection": "row",
+                                "gap": 2,
                               }
                             }
                           >
-                            <View
+                            <Text
                               style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "padding": 8,
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
-                              <View
+                              <Text
                                 style={
                                   {
-                                    "flexDirection": "row",
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
                                   }
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="Message"
                                   style={
                                     [
                                       {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
+                                        "flexShrink": 1,
                                         "fontSize": 16,
-                                        "fontWeight": "500",
-                                        "textAlign": "left",
+                                        "lineHeight": 22,
                                       },
                                       {
-                                        "color": "#6C727A",
+                                        "color": "#2F343D",
                                       },
                                     ]
                                   }
                                 >
-                                  Title collapsed
+                                  Message
                                 </Text>
-                              </View>
-                            </View>
-                            <View
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "height": 20,
-                                  "justifyContent": "center",
-                                  "right": 8,
-                                  "top": 8,
-                                  "width": 20,
-                                }
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
-                                style={
-                                  [
-                                    {
-                                      "color": "#9EA2A8",
-                                      "fontSize": 22,
-                                    },
-                                    [
-                                      {
-                                        "lineHeight": 22,
-                                      },
-                                      undefined,
-                                    ],
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "gap": 4,
+                            }
+                          }
+                        >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "minHeight": 40,
+                                },
+                                undefined,
+                                {
+                                  "backgroundColor": "#F7F8FA",
+                                  "borderBottomColor": "#EBECEF",
+                                  "borderLeftColor": "#CBCED1",
+                                  "borderLeftWidth": 2,
+                                  "borderRightColor": "#EBECEF",
+                                  "borderTopColor": "#EBECEF",
+                                },
+                              ]
+                            }
+                            testID="collapsibleQuoteTouchable-Title collapsed"
+                          >
+                            <View
+                              style={
+                                {
+                                  "flexDirection": "row",
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  {
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "padding": 8,
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
+                                      "flexDirection": "row",
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 16,
+                                          "fontWeight": "500",
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#6C727A",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Title collapsed
+                                  </Text>
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "height": 20,
+                                    "justifyContent": "center",
+                                    "right": 8,
+                                    "top": 8,
+                                    "width": 20,
+                                  }
                                 }
                               >
-                                
-                              </Text>
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#9EA2A8",
+                                        "fontSize": 22,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 22,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -8584,8 +9928,8 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -8630,260 +9974,318 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rk:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rk:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={41}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={42}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
                       <View
                         style={
                           {
@@ -8899,198 +10301,185 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-undefined"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-undefined"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
-                                    Title collapsed
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Title collapsed
+                                    </Text>
+                                  </View>
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
-                                        accessibilityLabel="Title collapsed"
                                         style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
                                         }
                                       >
-                                        Title collapsed
+                                        <Text
+                                          accessibilityLabel="Title collapsed"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          Title collapsed
+                                        </Text>
                                       </Text>
                                     </Text>
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "flexWrap": "wrap",
-                                      "rowGap": 12,
-                                    }
-                                  }
-                                >
+                                  </View>
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "100%",
-                                        },
-                                      ]
+                                      {
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "flexWrap": "wrap",
+                                        "rowGap": 12,
+                                      }
                                     }
                                   >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "100%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 1
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -9098,9 +10487,8 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -9108,75 +10496,76 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 1
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 1"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 1
+                                            <Text
+                                              accessibilityLabel="Value 1"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 1
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "100%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "100%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 2
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -9184,9 +10573,8 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -9194,37 +10582,64 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 2
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 2"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 2
+                                            <Text
+                                              accessibilityLabel="Value 2"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 2
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
@@ -9232,71 +10647,71 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        testID="message-content-Message"
-                      >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -9354,319 +10769,318 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rl:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rl:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={43}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={44}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
-                          <Text
+                          />
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
                           >
                             <Text
+                              numberOfLines={1}
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
                             >
-                              <Text
-                                accessibilityLabel="Message"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Message
-                              </Text>
+                              diego.mello
                             </Text>
-                          </Text>
-                        </View>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -9675,140 +11089,213 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                         }
                       >
                         <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "alignItems": "center",
-                              "backgroundColor": "#F7F8FA",
-                              "borderBottomColor": "#EBECEF",
-                              "borderLeftColor": "#CBCED1",
-                              "borderLeftWidth": 2,
-                              "borderRadius": 4,
-                              "borderRightColor": "#EBECEF",
-                              "borderTopColor": "#EBECEF",
-                              "borderWidth": 1,
-                              "flexDirection": "row",
-                              "minHeight": 40,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="collapsibleQuoteTouchable-Title collapsed"
+                          testID="message-content-Message"
                         >
                           <View
                             style={
                               {
-                                "flexDirection": "row",
+                                "gap": 2,
                               }
                             }
                           >
-                            <View
+                            <Text
                               style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "padding": 8,
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
-                              <View
+                              <Text
                                 style={
                                   {
-                                    "flexDirection": "row",
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
                                   }
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="Message"
                                   style={
                                     [
                                       {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
+                                        "flexShrink": 1,
                                         "fontSize": 16,
-                                        "fontWeight": "500",
-                                        "textAlign": "left",
+                                        "lineHeight": 22,
                                       },
                                       {
-                                        "color": "#6C727A",
+                                        "color": "#2F343D",
                                       },
                                     ]
                                   }
                                 >
-                                  Title collapsed
+                                  Message
                                 </Text>
-                              </View>
-                            </View>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "gap": 4,
+                            }
+                          }
+                        >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "minHeight": 40,
+                                },
+                                undefined,
+                                {
+                                  "backgroundColor": "#F7F8FA",
+                                  "borderBottomColor": "#EBECEF",
+                                  "borderLeftColor": "#CBCED1",
+                                  "borderLeftWidth": 2,
+                                  "borderRightColor": "#EBECEF",
+                                  "borderTopColor": "#EBECEF",
+                                },
+                              ]
+                            }
+                            testID="collapsibleQuoteTouchable-Title collapsed"
+                          >
                             <View
                               style={
                                 {
-                                  "alignItems": "center",
-                                  "height": 20,
-                                  "justifyContent": "center",
-                                  "right": 8,
-                                  "top": 8,
-                                  "width": 20,
+                                  "flexDirection": "row",
                                 }
                               }
                             >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                              <View
                                 style={
-                                  [
+                                  {
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "padding": 8,
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
                                     {
-                                      "color": "#9EA2A8",
-                                      "fontSize": 28.6,
-                                    },
+                                      "flexDirection": "row",
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 16,
+                                          "fontWeight": "500",
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#6C727A",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Title collapsed
+                                  </Text>
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "height": 20,
+                                    "justifyContent": "center",
+                                    "right": 8,
+                                    "top": 8,
+                                    "width": 20,
+                                  }
+                                }
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
                                     [
                                       {
-                                        "lineHeight": 28.6,
+                                        "color": "#9EA2A8",
+                                        "fontSize": 28.6,
                                       },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
-                                }
-                              >
-                                
-                              </Text>
+                                      [
+                                        {
+                                          "lineHeight": 28.6,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -9816,8 +11303,8 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -9862,260 +11349,318 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rm:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rm:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={45}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={46}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -10131,172 +11676,114 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                           }
                         >
                           <View
-                            accessibilityState={
+                            style={
                               {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
+                                "gap": 4,
                               }
                             }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
-                              }
-                            }
-                            testID="reply-undefined-undefined"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-undefined"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    Title collapsed
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
                                     <Text
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
                                       }
                                     >
-                                      <Text
-                                        accessibilityLabel="Title collapsed"
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        Title collapsed
-                                      </Text>
+                                      Title collapsed
                                     </Text>
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "flexWrap": "wrap",
-                                      "rowGap": 12,
-                                    }
-                                  }
-                                >
+                                  </View>
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "100%",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
@@ -10305,8 +11792,9 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                                           {
                                             "backgroundColor": "transparent",
                                             "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
                                             "textAlign": "left",
                                           },
                                           {
@@ -10315,13 +11803,57 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                                         ]
                                       }
                                     >
-                                      Field 1
+                                      <Text
+                                        style={
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          accessibilityLabel="Title collapsed"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          Title collapsed
+                                        </Text>
+                                      </Text>
                                     </Text>
+                                  </View>
+                                  <View
+                                    style={
+                                      {
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "flexWrap": "wrap",
+                                        "rowGap": 12,
+                                      }
+                                    }
+                                  >
                                     <View
                                       style={
-                                        {
-                                          "gap": 2,
-                                        }
+                                        [
+                                          {
+                                            "flexDirection": "column",
+                                          },
+                                          {
+                                            "width": "100%",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
@@ -10330,9 +11862,8 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -10340,75 +11871,76 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 1
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 1"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 1
+                                            <Text
+                                              accessibilityLabel="Value 1"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 1
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "100%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "100%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 2
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -10416,9 +11948,8 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -10426,37 +11957,64 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 2
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 2"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 2
+                                            <Text
+                                              accessibilityLabel="Value 2"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 2
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
@@ -10464,71 +12022,71 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        testID="message-content-Message"
-                      >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -10586,471 +12144,544 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is the main message body..  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is the main message body."
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rn:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is the main message body..  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is the main message body."
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rn:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={47}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
-                          ]
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={48}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-This is the main message body."
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This is the main message body."
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This is the main message body."
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This is the main message body.
+                                <Text
+                                  accessibilityLabel="This is the main message body."
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This is the main message body.
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "gap": 4,
-                          }
-                        }
-                      >
                         <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
                           style={
                             {
-                              "alignItems": "center",
-                              "backgroundColor": "rgba(44, 62, 80, 0.2)",
-                              "borderBottomColor": "#2c3e50",
-                              "borderLeftColor": "#2c3e50",
-                              "borderLeftWidth": 2,
-                              "borderRadius": 4,
-                              "borderRightColor": "#2c3e50",
-                              "borderTopColor": "#2c3e50",
-                              "borderWidth": 1,
-                              "flexDirection": "row",
-                              "marginBottom": 4,
-                              "minHeight": 40,
-                              "opacity": 1,
+                              "gap": 4,
                             }
                           }
-                          testID="collapsibleQuoteTouchable-Collapsed attachment block"
                         >
                           <View
-                            style={
+                            accessibilityState={
                               {
-                                "flexDirection": "row",
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
                               }
                             }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "minHeight": 40,
+                                },
+                                {
+                                  "marginBottom": 4,
+                                },
+                                {
+                                  "backgroundColor": "rgba(44, 62, 80, 0.2)",
+                                  "borderBottomColor": "#2c3e50",
+                                  "borderLeftColor": "#2c3e50",
+                                  "borderLeftWidth": 2,
+                                  "borderRightColor": "#2c3e50",
+                                  "borderTopColor": "#2c3e50",
+                                },
+                              ]
+                            }
+                            testID="collapsibleQuoteTouchable-Collapsed attachment block"
                           >
                             <View
                               style={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "padding": 8,
+                                  "flexDirection": "row",
                                 }
                               }
                             >
                               <View
                                 style={
                                   {
-                                    "flexDirection": "row",
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "padding": 8,
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
+                                    {
+                                      "flexDirection": "row",
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 16,
+                                          "fontWeight": "500",
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#6C727A",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Collapsed attachment block
+                                  </Text>
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "height": 20,
+                                    "justifyContent": "center",
+                                    "right": 8,
+                                    "top": 8,
+                                    "width": 20,
                                   }
                                 }
                               >
                                 <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
                                   style={
                                     [
                                       {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontWeight": "500",
-                                        "textAlign": "left",
+                                        "color": "#2c3e50",
+                                        "fontSize": 22,
                                       },
+                                      [
+                                        {
+                                          "lineHeight": 22,
+                                        },
+                                        undefined,
+                                      ],
                                       {
-                                        "color": "#6C727A",
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
                                       },
+                                      {},
                                     ]
                                   }
                                 >
-                                  Collapsed attachment block
+                                  
                                 </Text>
                               </View>
                             </View>
-                            <View
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "height": 20,
-                                  "justifyContent": "center",
-                                  "right": 8,
-                                  "top": 8,
-                                  "width": 20,
-                                }
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
-                                style={
-                                  [
-                                    {
-                                      "color": "#2c3e50",
-                                      "fontSize": 22,
-                                    },
-                                    [
-                                      {
-                                        "lineHeight": 22,
-                                      },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
-                                }
-                              >
-                                
-                              </Text>
-                            </View>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -11095,260 +12726,318 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is the main message body..  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is the main message body."
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":ro:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is the main message body..  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is the main message body."
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":ro:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={49}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
+                    style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={50}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
                       <View
                         style={
                           {
@@ -11364,172 +13053,114 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#2c3e50",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-This attachment text should NOT appear as plain text above the message or duplicate before the block."
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#2c3e50",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-This attachment text should NOT appear as plain text above the message or duplicate before the block."
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    Collapsed attachment block
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
                                     <Text
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
                                       }
                                     >
-                                      <Text
-                                        accessibilityLabel="This attachment text should NOT appear as plain text above the message or duplicate before the block."
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        This attachment text should NOT appear as plain text above the message or duplicate before the block.
-                                      </Text>
+                                      Collapsed attachment block
                                     </Text>
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "flexWrap": "wrap",
-                                      "rowGap": 12,
-                                    }
-                                  }
-                                >
+                                  </View>
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
@@ -11538,8 +13169,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                                           {
                                             "backgroundColor": "transparent",
                                             "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
                                             "textAlign": "left",
                                           },
                                           {
@@ -11548,13 +13180,57 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                                         ]
                                       }
                                     >
-                                      Field 1
+                                      <Text
+                                        style={
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          accessibilityLabel="This attachment text should NOT appear as plain text above the message or duplicate before the block."
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          This attachment text should NOT appear as plain text above the message or duplicate before the block.
+                                        </Text>
+                                      </Text>
                                     </Text>
+                                  </View>
+                                  <View
+                                    style={
+                                      {
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "flexWrap": "wrap",
+                                        "rowGap": 12,
+                                      }
+                                    }
+                                  >
                                     <View
                                       style={
-                                        {
-                                          "gap": 2,
-                                        }
+                                        [
+                                          {
+                                            "flexDirection": "column",
+                                          },
+                                          {
+                                            "width": "50%",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
@@ -11563,9 +13239,8 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -11573,75 +13248,76 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 1
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 1"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 1
+                                            <Text
+                                              accessibilityLabel="Value 1"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 1
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 2
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -11649,9 +13325,8 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -11659,75 +13334,76 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 2
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 2"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 2
+                                            <Text
+                                              accessibilityLabel="Value 2"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 2
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "100%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "100%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Long field
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -11735,9 +13411,8 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -11745,43 +13420,129 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                                             },
                                           ]
                                         }
+                                      >
+                                        Long field
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
-                                          }
-                                        >
-                                          <Text
-                                            accessibilityLabel="This field value could also contribute to duplicate text when expanded."
-                                            style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            style={
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            This field value could also contribute to duplicate text when expanded.
+                                            <Text
+                                              accessibilityLabel="This field value could also contribute to duplicate text when expanded."
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              This field value could also contribute to duplicate text when expanded.
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
                               </View>
                             </View>
+                            <View
+                              style={
+                                {
+                                  "gap": 2,
+                                }
+                              }
+                            >
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  style={
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    accessibilityLabel="Attachment description that might also leak as duplicate plain text."
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Attachment description that might also leak as duplicate plain text.
+                                  </Text>
+                                </Text>
+                              </Text>
+                            </View>
                           </View>
+                        </View>
+                        <View
+                          testID="message-content-This is the main message body."
+                        >
                           <View
                             style={
                               {
@@ -11818,7 +13579,7 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="Attachment description that might also leak as duplicate plain text."
+                                  accessibilityLabel="This is the main message body."
                                   style={
                                     [
                                       {
@@ -11832,77 +13593,18 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                                     ]
                                   }
                                 >
-                                  Attachment description that might also leak as duplicate plain text.
+                                  This is the main message body.
                                 </Text>
                               </Text>
                             </Text>
                           </View>
                         </View>
                       </View>
-                      <View
-                        testID="message-content-This is the main message body."
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="This is the main message body."
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                This is the main message body.
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -11960,319 +13662,318 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is the main message body..  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is the main message body."
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rp:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is the main message body..  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is the main message body."
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rp:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={51}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={52}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-This is the main message body."
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
-                          <Text
+                          />
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
                           >
                             <Text
+                              numberOfLines={1}
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
                               }
                             >
-                              <Text
-                                accessibilityLabel="This is the main message body."
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                This is the main message body.
-                              </Text>
+                              diego.mello
                             </Text>
-                          </Text>
-                        </View>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -12281,141 +13982,215 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                         }
                       >
                         <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "alignItems": "center",
-                              "backgroundColor": "rgba(44, 62, 80, 0.2)",
-                              "borderBottomColor": "#2c3e50",
-                              "borderLeftColor": "#2c3e50",
-                              "borderLeftWidth": 2,
-                              "borderRadius": 4,
-                              "borderRightColor": "#2c3e50",
-                              "borderTopColor": "#2c3e50",
-                              "borderWidth": 1,
-                              "flexDirection": "row",
-                              "marginBottom": 4,
-                              "minHeight": 40,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="collapsibleQuoteTouchable-Collapsed attachment block"
+                          testID="message-content-This is the main message body."
                         >
                           <View
                             style={
                               {
-                                "flexDirection": "row",
+                                "gap": 2,
                               }
                             }
                           >
-                            <View
+                            <Text
                               style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "padding": 8,
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
-                              <View
+                              <Text
                                 style={
                                   {
-                                    "flexDirection": "row",
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
                                   }
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="This is the main message body."
                                   style={
                                     [
                                       {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
+                                        "flexShrink": 1,
                                         "fontSize": 16,
-                                        "fontWeight": "500",
-                                        "textAlign": "left",
+                                        "lineHeight": 22,
                                       },
                                       {
-                                        "color": "#6C727A",
+                                        "color": "#2F343D",
                                       },
                                     ]
                                   }
                                 >
-                                  Collapsed attachment block
+                                  This is the main message body.
                                 </Text>
-                              </View>
-                            </View>
-                            <View
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "height": 20,
-                                  "justifyContent": "center",
-                                  "right": 8,
-                                  "top": 8,
-                                  "width": 20,
-                                }
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "gap": 4,
+                            }
+                          }
+                        >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "minHeight": 40,
+                                },
+                                {
+                                  "marginBottom": 4,
+                                },
+                                {
+                                  "backgroundColor": "rgba(44, 62, 80, 0.2)",
+                                  "borderBottomColor": "#2c3e50",
+                                  "borderLeftColor": "#2c3e50",
+                                  "borderLeftWidth": 2,
+                                  "borderRightColor": "#2c3e50",
+                                  "borderTopColor": "#2c3e50",
+                                },
+                              ]
+                            }
+                            testID="collapsibleQuoteTouchable-Collapsed attachment block"
+                          >
+                            <View
+                              style={
+                                {
+                                  "flexDirection": "row",
+                                }
                               }
                             >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                              <View
                                 style={
-                                  [
+                                  {
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "padding": 8,
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
                                     {
-                                      "color": "#2c3e50",
-                                      "fontSize": 28.6,
-                                    },
+                                      "flexDirection": "row",
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 16,
+                                          "fontWeight": "500",
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#6C727A",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Collapsed attachment block
+                                  </Text>
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "height": 20,
+                                    "justifyContent": "center",
+                                    "right": 8,
+                                    "top": 8,
+                                    "width": 20,
+                                  }
+                                }
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
                                     [
                                       {
-                                        "lineHeight": 28.6,
+                                        "color": "#2c3e50",
+                                        "fontSize": 28.6,
                                       },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
-                                }
-                              >
-                                
-                              </Text>
+                                      [
+                                        {
+                                          "lineHeight": 28.6,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -12423,8 +14198,8 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -12469,260 +14244,318 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is the main message body..  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is the main message body."
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rq:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is the main message body..  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is the main message body."
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rq:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={53}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={54}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -12738,198 +14571,185 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#2c3e50",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-This attachment text should NOT appear as plain text above the message or duplicate before the block."
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#2c3e50",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-This attachment text should NOT appear as plain text above the message or duplicate before the block."
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
-                                    Collapsed attachment block
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Collapsed attachment block
+                                    </Text>
+                                  </View>
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
-                                        accessibilityLabel="This attachment text should NOT appear as plain text above the message or duplicate before the block."
                                         style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
                                         }
                                       >
-                                        This attachment text should NOT appear as plain text above the message or duplicate before the block.
+                                        <Text
+                                          accessibilityLabel="This attachment text should NOT appear as plain text above the message or duplicate before the block."
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          This attachment text should NOT appear as plain text above the message or duplicate before the block.
+                                        </Text>
                                       </Text>
                                     </Text>
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "flexWrap": "wrap",
-                                      "rowGap": 12,
-                                    }
-                                  }
-                                >
+                                  </View>
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
+                                      {
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "flexWrap": "wrap",
+                                        "rowGap": 12,
+                                      }
                                     }
                                   >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 1
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -12937,9 +14757,8 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -12947,75 +14766,76 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 1
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 1"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 1
+                                            <Text
+                                              accessibilityLabel="Value 1"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 1
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 2
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -13023,9 +14843,8 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -13033,75 +14852,76 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 2
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 2"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 2
+                                            <Text
+                                              accessibilityLabel="Value 2"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 2
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "100%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "100%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Long field
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -13109,9 +14929,8 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -13119,43 +14938,129 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                                             },
                                           ]
                                         }
+                                      >
+                                        Long field
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="This field value could also contribute to duplicate text when expanded."
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            This field value could also contribute to duplicate text when expanded.
+                                            <Text
+                                              accessibilityLabel="This field value could also contribute to duplicate text when expanded."
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              This field value could also contribute to duplicate text when expanded.
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
                               </View>
                             </View>
+                            <View
+                              style={
+                                {
+                                  "gap": 2,
+                                }
+                              }
+                            >
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  style={
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    accessibilityLabel="Attachment description that might also leak as duplicate plain text."
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Attachment description that might also leak as duplicate plain text.
+                                  </Text>
+                                </Text>
+                              </Text>
+                            </View>
                           </View>
+                        </View>
+                        <View
+                          testID="message-content-This is the main message body."
+                        >
                           <View
                             style={
                               {
@@ -13192,7 +15097,7 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="Attachment description that might also leak as duplicate plain text."
+                                  accessibilityLabel="This is the main message body."
                                   style={
                                     [
                                       {
@@ -13206,77 +15111,18 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                                     ]
                                   }
                                 >
-                                  Attachment description that might also leak as duplicate plain text.
+                                  This is the main message body.
                                 </Text>
                               </Text>
                             </Text>
                           </View>
                         </View>
                       </View>
-                      <View
-                        testID="message-content-This is the main message body."
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="This is the main message body."
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                This is the main message body.
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -13334,260 +15180,318 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rr:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rr:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={55}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={56}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
                       <View
                         style={
                           {
@@ -13603,123 +15507,110 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "red",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-undefined"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "red",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-undefined"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
-                                    }
-                                  }
-                                />
-                                <View
-                                  style={
-                                    {
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "flexWrap": "wrap",
-                                      "rowGap": 12,
+                                      "width": 200,
                                     }
                                   }
                                 >
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  />
+                                  <View
+                                    style={
+                                      {
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "flexWrap": "wrap",
+                                        "rowGap": 12,
+                                      }
                                     }
                                   >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 1
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -13727,9 +15618,8 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -13737,75 +15627,76 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 1
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 1"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 1
+                                            <Text
+                                              accessibilityLabel="Value 1"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 1
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 2
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -13813,9 +15704,8 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -13823,169 +15713,175 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 2
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 2"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 2
+                                            <Text
+                                              accessibilityLabel="Value 2"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 2
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
                               </View>
                             </View>
                           </View>
-                        </View>
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
-                        >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "green",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-undefined"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "green",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-undefined"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
-                                    }
-                                  }
-                                />
-                                <View
-                                  style={
-                                    {
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "flexWrap": "wrap",
-                                      "rowGap": 12,
+                                      "width": 200,
                                     }
                                   }
                                 >
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  />
+                                  <View
+                                    style={
+                                      {
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "flexWrap": "wrap",
+                                        "rowGap": 12,
+                                      }
                                     }
                                   >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 1
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -13993,9 +15889,8 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -14003,75 +15898,76 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 1
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
-                                          }
-                                        >
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
                                           <Text
-                                            accessibilityLabel="Value 1"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 1
+                                            <Text
+                                              accessibilityLabel="Value 1"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 1
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 2
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -14079,9 +15975,8 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -14089,169 +15984,175 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 2
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 2"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 2
+                                            <Text
+                                              accessibilityLabel="Value 2"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 2
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
                               </View>
                             </View>
                           </View>
-                        </View>
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
-                        >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "blue",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-undefined"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "blue",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-undefined"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
-                                    }
-                                  }
-                                />
-                                <View
-                                  style={
-                                    {
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "flexWrap": "wrap",
-                                      "rowGap": 12,
+                                      "width": 200,
                                     }
                                   }
                                 >
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  />
+                                  <View
+                                    style={
+                                      {
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "flexWrap": "wrap",
+                                        "rowGap": 12,
+                                      }
                                     }
                                   >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 1
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -14259,9 +16160,8 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -14269,75 +16169,76 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 1
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 1"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 1
+                                            <Text
+                                              accessibilityLabel="Value 1"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 1
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 2
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -14345,9 +16246,8 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -14355,37 +16255,64 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 2
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 2"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 2
+                                            <Text
+                                              accessibilityLabel="Value 2"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 2
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
@@ -14397,8 +16324,8 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -14456,260 +16383,318 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rs:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rs:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={57}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={58}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -14725,123 +16710,110 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "red",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-undefined"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "red",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-undefined"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
-                                    }
-                                  }
-                                />
-                                <View
-                                  style={
-                                    {
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "flexWrap": "wrap",
-                                      "rowGap": 12,
+                                      "width": 200,
                                     }
                                   }
                                 >
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  />
+                                  <View
+                                    style={
+                                      {
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "flexWrap": "wrap",
+                                        "rowGap": 12,
+                                      }
                                     }
                                   >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 1
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -14849,9 +16821,8 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -14859,75 +16830,76 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 1
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 1"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 1
+                                            <Text
+                                              accessibilityLabel="Value 1"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 1
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 2
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -14935,9 +16907,8 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -14945,169 +16916,175 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 2
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 2"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 2
+                                            <Text
+                                              accessibilityLabel="Value 2"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 2
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
                               </View>
                             </View>
                           </View>
-                        </View>
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
-                        >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "green",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-undefined"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "green",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-undefined"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
-                                    }
-                                  }
-                                />
-                                <View
-                                  style={
-                                    {
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "flexWrap": "wrap",
-                                      "rowGap": 12,
+                                      "width": 200,
                                     }
                                   }
                                 >
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  />
+                                  <View
+                                    style={
+                                      {
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "flexWrap": "wrap",
+                                        "rowGap": 12,
+                                      }
                                     }
                                   >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 1
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -15115,9 +17092,8 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -15125,75 +17101,76 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 1
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
-                                          }
-                                        >
-                                          <Text
-                                            accessibilityLabel="Value 1"
-                                            style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            style={
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 1
+                                            <Text
+                                              accessibilityLabel="Value 1"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 1
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 2
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -15201,9 +17178,8 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -15211,169 +17187,175 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 2
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 2"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 2
+                                            <Text
+                                              accessibilityLabel="Value 2"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 2
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
                               </View>
                             </View>
                           </View>
-                        </View>
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
-                        >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "blue",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-undefined"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "blue",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-undefined"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
-                                    }
-                                  }
-                                />
-                                <View
-                                  style={
-                                    {
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "flexWrap": "wrap",
-                                      "rowGap": 12,
+                                      "width": 200,
                                     }
                                   }
                                 >
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  />
+                                  <View
+                                    style={
+                                      {
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "flexWrap": "wrap",
+                                        "rowGap": 12,
+                                      }
                                     }
                                   >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 1
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -15381,9 +17363,8 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -15391,75 +17372,76 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 1
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 1"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 1
+                                            <Text
+                                              accessibilityLabel="Value 1"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 1
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 2
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -15467,9 +17449,8 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -15477,37 +17458,64 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 2
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 2"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 2
+                                            <Text
+                                              accessibilityLabel="Value 2"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 2
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
@@ -15519,8 +17527,8 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -15578,260 +17586,318 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rt:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rt:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={59}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={60}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
                       <View
                         style={
                           {
@@ -15847,173 +17913,115 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-rocket.cat-Custom fields"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-Custom fields"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    rocket.cat
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
                                     <Text
+                                      numberOfLines={1}
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
                                       }
                                     >
-                                      <Text
-                                        accessibilityLabel="Custom fields"
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        Custom fields
-                                      </Text>
+                                      rocket.cat
                                     </Text>
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "flexWrap": "wrap",
-                                      "rowGap": 12,
-                                    }
-                                  }
-                                >
+                                  </View>
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
@@ -16022,8 +18030,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                           {
                                             "backgroundColor": "transparent",
                                             "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
                                             "textAlign": "left",
                                           },
                                           {
@@ -16032,13 +18041,57 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                         ]
                                       }
                                     >
-                                      Field 1
+                                      <Text
+                                        style={
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          accessibilityLabel="Custom fields"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          Custom fields
+                                        </Text>
+                                      </Text>
                                     </Text>
+                                  </View>
+                                  <View
+                                    style={
+                                      {
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "flexWrap": "wrap",
+                                        "rowGap": 12,
+                                      }
+                                    }
+                                  >
                                     <View
                                       style={
-                                        {
-                                          "gap": 2,
-                                        }
+                                        [
+                                          {
+                                            "flexDirection": "column",
+                                          },
+                                          {
+                                            "width": "50%",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
@@ -16047,9 +18100,8 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -16057,75 +18109,76 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 1
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 1"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 1
+                                            <Text
+                                              accessibilityLabel="Value 1"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 1
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 2
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -16133,9 +18186,8 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -16143,37 +18195,64 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 2
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 2"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 2
+                                            <Text
+                                              accessibilityLabel="Value 2"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 2
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
@@ -16181,71 +18260,71 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        testID="message-content-Message"
-                      >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
                               >
-                                Message
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -16290,260 +18369,318 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":ru:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":ru:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={61}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={62}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
                       <View
                         style={
                           {
@@ -16559,173 +18696,115 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-rocket.cat-Custom fields"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-Custom fields"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    rocket.cat
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
                                     <Text
+                                      numberOfLines={1}
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
                                       }
                                     >
-                                      <Text
-                                        accessibilityLabel="Custom fields"
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        Custom fields
-                                      </Text>
+                                      rocket.cat
                                     </Text>
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "flexWrap": "wrap",
-                                      "rowGap": 12,
-                                    }
-                                  }
-                                >
+                                  </View>
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "100%",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
@@ -16734,8 +18813,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                           {
                                             "backgroundColor": "transparent",
                                             "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
                                             "textAlign": "left",
                                           },
                                           {
@@ -16743,101 +18823,59 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 1
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
-                                          [
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
-                                              "textAlign": "left",
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
                                         }
                                       >
                                         <Text
+                                          accessibilityLabel="Custom fields"
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
-                                          <Text
-                                            accessibilityLabel="Value 1"
-                                            style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            Value 1
-                                          </Text>
+                                          Custom fields
                                         </Text>
                                       </Text>
-                                    </View>
+                                    </Text>
                                   </View>
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "100%",
-                                        },
-                                      ]
+                                      {
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "flexWrap": "wrap",
+                                        "rowGap": 12,
+                                      }
                                     }
                                   >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "100%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 2
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -16845,9 +18883,8 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -16855,75 +18892,76 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 1
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 2"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 2
+                                            <Text
+                                              accessibilityLabel="Value 1"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 1
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "100%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "100%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 3
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -16931,9 +18969,8 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -16941,75 +18978,76 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 2
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 3"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 3
+                                            <Text
+                                              accessibilityLabel="Value 2"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 2
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "100%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "100%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 4
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -17017,9 +19055,8 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -17027,75 +19064,76 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 3
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 4"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 4
+                                            <Text
+                                              accessibilityLabel="Value 3"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 3
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "100%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "100%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 5
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -17103,9 +19141,8 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -17113,37 +19150,150 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 4
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            style={
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
+                                            }
+                                          >
+                                            <Text
+                                              accessibilityLabel="Value 4"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 4
+                                            </Text>
+                                          </Text>
+                                        </Text>
+                                      </View>
+                                    </View>
+                                    <View
+                                      style={
+                                        [
+                                          {
+                                            "flexDirection": "column",
+                                          },
+                                          {
+                                            "width": "100%",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      <Text
+                                        style={
+                                          [
                                             {
                                               "backgroundColor": "transparent",
-                                              "flexShrink": 1,
                                               "fontFamily": "Inter",
-                                              "fontWeight": "400",
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
-                                            }
+                                            },
+                                            {
+                                              "color": "#2F343D",
+                                            },
+                                          ]
+                                        }
+                                      >
+                                        Field 5
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          style={
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 5"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 5
+                                            <Text
+                                              accessibilityLabel="Value 5"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 5
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
@@ -17151,71 +19301,71 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        testID="message-content-Message"
-                      >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -17273,260 +19423,318 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rv:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rv:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={63}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={64}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -17542,173 +19750,115 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-rocket.cat-Custom fields"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-Custom fields"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    rocket.cat
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
                                     <Text
+                                      numberOfLines={1}
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
                                       }
                                     >
-                                      <Text
-                                        accessibilityLabel="Custom fields"
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        Custom fields
-                                      </Text>
+                                      rocket.cat
                                     </Text>
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "flexWrap": "wrap",
-                                      "rowGap": 12,
-                                    }
-                                  }
-                                >
+                                  </View>
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
@@ -17717,8 +19867,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                           {
                                             "backgroundColor": "transparent",
                                             "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
                                             "textAlign": "left",
                                           },
                                           {
@@ -17727,13 +19878,57 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                         ]
                                       }
                                     >
-                                      Field 1
+                                      <Text
+                                        style={
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          accessibilityLabel="Custom fields"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          Custom fields
+                                        </Text>
+                                      </Text>
                                     </Text>
+                                  </View>
+                                  <View
+                                    style={
+                                      {
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "flexWrap": "wrap",
+                                        "rowGap": 12,
+                                      }
+                                    }
+                                  >
                                     <View
                                       style={
-                                        {
-                                          "gap": 2,
-                                        }
+                                        [
+                                          {
+                                            "flexDirection": "column",
+                                          },
+                                          {
+                                            "width": "50%",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
@@ -17742,9 +19937,8 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -17752,75 +19946,76 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 1
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 1"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 1
+                                            <Text
+                                              accessibilityLabel="Value 1"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 1
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 2
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -17828,9 +20023,8 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -17838,37 +20032,64 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 2
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 2"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 2
+                                            <Text
+                                              accessibilityLabel="Value 2"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 2
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
@@ -17876,71 +20097,71 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        testID="message-content-Message"
-                      >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -17985,260 +20206,318 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r10:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r10:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={65}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={66}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -18254,173 +20533,115 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-rocket.cat-Custom fields"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-Custom fields"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    rocket.cat
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
                                     <Text
+                                      numberOfLines={1}
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
                                       }
                                     >
-                                      <Text
-                                        accessibilityLabel="Custom fields"
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        Custom fields
-                                      </Text>
+                                      rocket.cat
                                     </Text>
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "flexWrap": "wrap",
-                                      "rowGap": 12,
-                                    }
-                                  }
-                                >
+                                  </View>
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "100%",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
@@ -18429,8 +20650,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                           {
                                             "backgroundColor": "transparent",
                                             "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
                                             "textAlign": "left",
                                           },
                                           {
@@ -18438,101 +20660,59 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 1
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
-                                          [
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
-                                              "textAlign": "left",
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
                                         }
                                       >
                                         <Text
+                                          accessibilityLabel="Custom fields"
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
-                                          <Text
-                                            accessibilityLabel="Value 1"
-                                            style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            Value 1
-                                          </Text>
+                                          Custom fields
                                         </Text>
                                       </Text>
-                                    </View>
+                                    </Text>
                                   </View>
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "100%",
-                                        },
-                                      ]
+                                      {
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "flexWrap": "wrap",
+                                        "rowGap": 12,
+                                      }
                                     }
                                   >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "100%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 2
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -18540,9 +20720,8 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -18550,75 +20729,76 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 1
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 2"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 2
+                                            <Text
+                                              accessibilityLabel="Value 1"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 1
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "100%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "100%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 3
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -18626,9 +20806,8 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -18636,75 +20815,76 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 2
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 3"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 3
+                                            <Text
+                                              accessibilityLabel="Value 2"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 2
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "100%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "100%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 4
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -18712,9 +20892,8 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -18722,75 +20901,76 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 3
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 4"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 4
+                                            <Text
+                                              accessibilityLabel="Value 3"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 3
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "100%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "100%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 5
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -18798,9 +20978,8 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -18808,37 +20987,150 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 4
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            style={
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
+                                            }
+                                          >
+                                            <Text
+                                              accessibilityLabel="Value 4"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 4
+                                            </Text>
+                                          </Text>
+                                        </Text>
+                                      </View>
+                                    </View>
+                                    <View
+                                      style={
+                                        [
+                                          {
+                                            "flexDirection": "column",
+                                          },
+                                          {
+                                            "width": "100%",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      <Text
+                                        style={
+                                          [
                                             {
                                               "backgroundColor": "transparent",
-                                              "flexShrink": 1,
                                               "fontFamily": "Inter",
-                                              "fontWeight": "400",
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
-                                            }
+                                            },
+                                            {
+                                              "color": "#2F343D",
+                                            },
+                                          ]
+                                        }
+                                      >
+                                        Field 5
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          style={
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 5"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 5
+                                            <Text
+                                              accessibilityLabel="Value 5"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 5
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
@@ -18846,71 +21138,71 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        testID="message-content-Message"
-                      >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -18968,324 +21260,390 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="rocket.cat 10:00:00 AM  Fourth message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Fourth message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r11:"
+            <View
+              accessibilityLabel="rocket.cat 10:00:00 AM  Fourth message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
+                }
+              }
+              testID="message-undefined"
             >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
+              <A11yIndexView
+                accessibilityLabel="Fourth message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r11:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="rocket.cat's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={67}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="rocket.cat's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-rocket.cat"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={68}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-rocket.cat"
+                          underlayColor="#E4E7EA"
                         >
-                          rocket.cat
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              rocket.cat
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Fourth message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Fourth message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Fourth message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Fourth message
+                                <Text
+                                  accessibilityLabel="Fourth message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Fourth message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -19392,324 +21750,390 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Third message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Third message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r12:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Third message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Third message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r12:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={69}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={70}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Third message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Third message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Third message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Third message
+                                <Text
+                                  accessibilityLabel="Third message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Third message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -19798,141 +22222,155 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="rocket.cat 10:00:00 AM  Second message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Second message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r13:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="rocket.cat 10:00:00 AM  Second message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Second message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r13:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-Second message"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Second message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Second message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Second message
+                                <Text
+                                  accessibilityLabel="Second message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Second message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -19977,324 +22415,390 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="rocket.cat 10:00:00 AM  Second message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Second message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r14:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="rocket.cat 10:00:00 AM  Second message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Second message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r14:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="rocket.cat's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={71}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="rocket.cat's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-rocket.cat"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={72}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-rocket.cat"
+                          underlayColor="#E4E7EA"
                         >
-                          rocket.cat
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              rocket.cat
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Second message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Second message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Second message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Second message
-                              </Text>
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Second message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Second message
+                                </Text>
+                              </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -20396,324 +22900,390 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  First message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="First message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r15:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  First message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="First message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r15:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={73}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={74}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-First message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-First message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="First message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                First message
+                                <Text
+                                  accessibilityLabel="First message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  First message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -20771,324 +23341,390 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="rocket.cat 10:00:00 AM  Fourth message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Fourth message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r16:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="rocket.cat 10:00:00 AM  Fourth message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Fourth message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r16:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="rocket.cat's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={75}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="rocket.cat's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-rocket.cat"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={76}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-rocket.cat"
+                          underlayColor="#E4E7EA"
                         >
-                          rocket.cat
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Fourth message"
-                      >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              rocket.cat
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "flexDirection": "row",
                             }
                           }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Fourth message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Fourth message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Fourth message
+                                <Text
+                                  accessibilityLabel="Fourth message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Fourth message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -21195,324 +23831,390 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Third message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Third message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r17:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Third message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Third message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r17:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={77}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={78}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Third message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Third message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Third message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Third message
+                                <Text
+                                  accessibilityLabel="Third message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Third message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -21601,141 +24303,155 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="rocket.cat 10:00:00 AM  Second message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Second message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r18:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="rocket.cat 10:00:00 AM  Second message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Second message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r18:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-Second message"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Second message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Second message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Second message
+                                <Text
+                                  accessibilityLabel="Second message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Second message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -21780,324 +24496,390 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="rocket.cat 10:00:00 AM  Second message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Second message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r19:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="rocket.cat 10:00:00 AM  Second message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Second message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r19:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="rocket.cat's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={79}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="rocket.cat's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-rocket.cat"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={80}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-rocket.cat"
+                          underlayColor="#E4E7EA"
                         >
-                          rocket.cat
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              rocket.cat
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Second message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Second message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Second message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Second message
+                                <Text
+                                  accessibilityLabel="Second message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Second message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -22199,324 +24981,390 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  First message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="First message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1a:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  First message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="First message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1a:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={81}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={82}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-First message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-First message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="First message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                First message
+                                <Text
+                                  accessibilityLabel="First message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  First message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -22574,395 +25422,288 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is a discussion.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is a discussion"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1b:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is a discussion.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is a discussion"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1b:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={83}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={84}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontStyle": "italic",
-                              "fontWeight": "400",
-                              "lineHeight": 20,
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#6C727A",
-                            },
-                          ]
-                        }
-                      >
-                        Started a discussion:
-                      </Text>
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "lineHeight": 20,
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#2F343D",
-                            },
-                          ]
-                        }
-                      >
-                        This is a discussion
-                      </Text>
-                      <View
-                        style={
-                          [
-                            {
-                              "alignItems": "center",
-                              "flexDirection": "row",
-                            },
-                            {
-                              "gap": 8,
-                            },
-                          ]
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "alignItems": "center",
-                              "backgroundColor": "#1D74F5",
-                              "borderRadius": 4,
-                              "flexDirection": "row",
-                              "justifyContent": "center",
-                              "opacity": 1,
-                              "paddingHorizontal": 12,
-                              "paddingVertical": 8,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
+                          />
                           <View
                             style={
                               {
                                 "alignItems": "center",
                                 "flexDirection": "row",
-                                "gap": 8,
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
                           >
                             <Text
-                              allowFontScaling={false}
-                              selectable={false}
+                              numberOfLines={1}
                               style={
                                 [
                                   {
-                                    "color": "#FFFFFF",
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
                                     "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
                                   },
-                                  [
-                                    {
-                                      "lineHeight": 16,
-                                    },
-                                    undefined,
-                                  ],
                                   {
-                                    "fontFamily": "custom",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "normal",
+                                    "color": "#1F2329",
                                   },
-                                  {},
                                 ]
                               }
                             >
-                              
+                              diego.mello
                             </Text>
                             <Text
                               style={
@@ -22970,30 +25711,46 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                                   {
                                     "backgroundColor": "transparent",
                                     "fontFamily": "Inter",
-                                    "fontSize": 12,
-                                    "fontWeight": "600",
-                                    "lineHeight": 16,
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
                                     "textAlign": "left",
                                   },
                                   {
-                                    "color": "#FFFFFF",
+                                    "color": "#6C727A",
                                   },
                                 ]
                               }
                             >
-                              No messages yet
+                              10:00 AM
                             </Text>
                           </View>
-                        </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
                         <Text
                           style={
                             [
                               {
                                 "backgroundColor": "transparent",
                                 "fontFamily": "Inter",
-                                "fontSize": 13,
+                                "fontSize": 16,
+                                "fontStyle": "italic",
                                 "fontWeight": "400",
-                                "lineHeight": 18,
+                                "lineHeight": 20,
                                 "textAlign": "left",
                               },
                               {
@@ -23001,23 +25758,185 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                               },
                             ]
                           }
-                        />
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r1c:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
+                        >
+                          Started a discussion:
+                        </Text>
+                        <Text
+                          style={
+                            [
+                              {
+                                "backgroundColor": "transparent",
+                                "fontFamily": "Inter",
+                                "fontSize": 16,
+                                "fontWeight": "400",
+                                "lineHeight": 20,
+                                "textAlign": "left",
+                              },
+                              {
+                                "color": "#2F343D",
+                              },
+                            ]
+                          }
+                        >
+                          This is a discussion
+                        </Text>
+                        <View
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              },
+                              {
+                                "gap": 8,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "paddingHorizontal": 12,
+                                  "paddingVertical": 8,
+                                },
+                                {
+                                  "backgroundColor": "#1D74F5",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "gap": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#FFFFFF",
+                                      "fontSize": 16,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 16,
+                                      },
+                                      undefined,
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 12,
+                                      "fontWeight": "600",
+                                      "lineHeight": 16,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#FFFFFF",
+                                    },
+                                  ]
+                                }
+                              >
+                                No messages yet
+                              </Text>
+                            </View>
+                          </View>
+                          <Text
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 13,
+                                  "fontWeight": "400",
+                                  "lineHeight": 18,
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#6C727A",
+                                },
+                              ]
+                            }
+                          />
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r1c:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
         orderIndex={1}
         orderKey=":r1c:"
       >
@@ -23052,395 +25971,288 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is a discussion.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is a discussion"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1c:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is a discussion.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is a discussion"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1c:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={85}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={86}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontStyle": "italic",
-                              "fontWeight": "400",
-                              "lineHeight": 20,
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#6C727A",
-                            },
-                          ]
-                        }
-                      >
-                        Started a discussion:
-                      </Text>
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "lineHeight": 20,
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#2F343D",
-                            },
-                          ]
-                        }
-                      >
-                        This is a discussion
-                      </Text>
-                      <View
-                        style={
-                          [
-                            {
-                              "alignItems": "center",
-                              "flexDirection": "row",
-                            },
-                            {
-                              "gap": 8,
-                            },
-                          ]
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "alignItems": "center",
-                              "backgroundColor": "#1D74F5",
-                              "borderRadius": 4,
-                              "flexDirection": "row",
-                              "justifyContent": "center",
-                              "opacity": 1,
-                              "paddingHorizontal": 12,
-                              "paddingVertical": 8,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
+                          />
                           <View
                             style={
                               {
                                 "alignItems": "center",
                                 "flexDirection": "row",
-                                "gap": 8,
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
                           >
                             <Text
-                              allowFontScaling={false}
-                              selectable={false}
+                              numberOfLines={1}
                               style={
                                 [
                                   {
-                                    "color": "#FFFFFF",
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
                                     "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
                                   },
-                                  [
-                                    {
-                                      "lineHeight": 16,
-                                    },
-                                    undefined,
-                                  ],
                                   {
-                                    "fontFamily": "custom",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "normal",
+                                    "color": "#1F2329",
                                   },
-                                  {},
                                 ]
                               }
                             >
-                              
+                              diego.mello
                             </Text>
                             <Text
                               style={
@@ -23448,30 +26260,46 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                                   {
                                     "backgroundColor": "transparent",
                                     "fontFamily": "Inter",
-                                    "fontSize": 12,
-                                    "fontWeight": "600",
-                                    "lineHeight": 16,
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
                                     "textAlign": "left",
                                   },
                                   {
-                                    "color": "#FFFFFF",
+                                    "color": "#6C727A",
                                   },
                                 ]
                               }
                             >
-                              1 message
+                              10:00 AM
                             </Text>
                           </View>
-                        </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
                         <Text
                           style={
                             [
                               {
                                 "backgroundColor": "transparent",
                                 "fontFamily": "Inter",
-                                "fontSize": 13,
+                                "fontSize": 16,
+                                "fontStyle": "italic",
                                 "fontWeight": "400",
-                                "lineHeight": 18,
+                                "lineHeight": 20,
                                 "textAlign": "left",
                               },
                               {
@@ -23480,48 +26308,210 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                             ]
                           }
                         >
-                          November 10, 2017
+                          Started a discussion:
                         </Text>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r1d:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r1d:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
+                        <Text
+                          style={
+                            [
+                              {
+                                "backgroundColor": "transparent",
+                                "fontFamily": "Inter",
+                                "fontSize": 16,
+                                "fontWeight": "400",
+                                "lineHeight": 20,
+                                "textAlign": "left",
+                              },
+                              {
+                                "color": "#2F343D",
+                              },
+                            ]
+                          }
+                        >
+                          This is a discussion
+                        </Text>
+                        <View
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              },
+                              {
+                                "gap": 8,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "paddingHorizontal": 12,
+                                  "paddingVertical": 8,
+                                },
+                                {
+                                  "backgroundColor": "#1D74F5",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "gap": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#FFFFFF",
+                                      "fontSize": 16,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 16,
+                                      },
+                                      undefined,
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 12,
+                                      "fontWeight": "600",
+                                      "lineHeight": 16,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#FFFFFF",
+                                    },
+                                  ]
+                                }
+                              >
+                                1 message
+                              </Text>
+                            </View>
+                          </View>
+                          <Text
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 13,
+                                  "fontWeight": "400",
+                                  "lineHeight": 18,
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#6C727A",
+                                },
+                              ]
+                            }
+                          >
+                            November 10, 2017
+                          </Text>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r1d:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r1d:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
           onClick={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
@@ -23532,395 +26522,288 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1d:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1d:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={87}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={88}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontStyle": "italic",
-                              "fontWeight": "400",
-                              "lineHeight": 20,
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#6C727A",
-                            },
-                          ]
-                        }
-                      >
-                        Started a discussion:
-                      </Text>
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "lineHeight": 20,
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#2F343D",
-                            },
-                          ]
-                        }
-                      >
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                      </Text>
-                      <View
-                        style={
-                          [
-                            {
-                              "alignItems": "center",
-                              "flexDirection": "row",
-                            },
-                            {
-                              "gap": 8,
-                            },
-                          ]
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "alignItems": "center",
-                              "backgroundColor": "#1D74F5",
-                              "borderRadius": 4,
-                              "flexDirection": "row",
-                              "justifyContent": "center",
-                              "opacity": 1,
-                              "paddingHorizontal": 12,
-                              "paddingVertical": 8,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
+                          />
                           <View
                             style={
                               {
                                 "alignItems": "center",
                                 "flexDirection": "row",
-                                "gap": 8,
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
                           >
                             <Text
-                              allowFontScaling={false}
-                              selectable={false}
+                              numberOfLines={1}
                               style={
                                 [
                                   {
-                                    "color": "#FFFFFF",
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
                                     "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
                                   },
-                                  [
-                                    {
-                                      "lineHeight": 16,
-                                    },
-                                    undefined,
-                                  ],
                                   {
-                                    "fontFamily": "custom",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "normal",
+                                    "color": "#1F2329",
                                   },
-                                  {},
                                 ]
                               }
                             >
-                              
+                              diego.mello
                             </Text>
                             <Text
                               style={
@@ -23928,30 +26811,46 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                                   {
                                     "backgroundColor": "transparent",
                                     "fontFamily": "Inter",
-                                    "fontSize": 12,
-                                    "fontWeight": "600",
-                                    "lineHeight": 16,
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
                                     "textAlign": "left",
                                   },
                                   {
-                                    "color": "#FFFFFF",
+                                    "color": "#6C727A",
                                   },
                                 ]
                               }
                             >
-                              10 messages
+                              10:00 AM
                             </Text>
                           </View>
-                        </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
                         <Text
                           style={
                             [
                               {
                                 "backgroundColor": "transparent",
                                 "fontFamily": "Inter",
-                                "fontSize": 13,
+                                "fontSize": 16,
+                                "fontStyle": "italic",
                                 "fontWeight": "400",
-                                "lineHeight": 18,
+                                "lineHeight": 20,
                                 "textAlign": "left",
                               },
                               {
@@ -23960,23 +26859,185 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                             ]
                           }
                         >
-                          November 10, 2017
+                          Started a discussion:
                         </Text>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r1e:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
+                        <Text
+                          style={
+                            [
+                              {
+                                "backgroundColor": "transparent",
+                                "fontFamily": "Inter",
+                                "fontSize": 16,
+                                "fontWeight": "400",
+                                "lineHeight": 20,
+                                "textAlign": "left",
+                              },
+                              {
+                                "color": "#2F343D",
+                              },
+                            ]
+                          }
+                        >
+                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        </Text>
+                        <View
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              },
+                              {
+                                "gap": 8,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "paddingHorizontal": 12,
+                                  "paddingVertical": 8,
+                                },
+                                {
+                                  "backgroundColor": "#1D74F5",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "gap": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#FFFFFF",
+                                      "fontSize": 16,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 16,
+                                      },
+                                      undefined,
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 12,
+                                      "fontWeight": "600",
+                                      "lineHeight": 16,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#FFFFFF",
+                                    },
+                                  ]
+                                }
+                              >
+                                10 messages
+                              </Text>
+                            </View>
+                          </View>
+                          <Text
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 13,
+                                  "fontWeight": "400",
+                                  "lineHeight": 18,
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#6C727A",
+                                },
+                              ]
+                            }
+                          >
+                            November 10, 2017
+                          </Text>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r1e:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
         orderKey=":r1e:"
@@ -24012,395 +27073,288 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is a discussion.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is a discussion"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1e:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is a discussion.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is a discussion"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1e:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={89}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={90}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontStyle": "italic",
-                              "fontWeight": "400",
-                              "lineHeight": 20,
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#6C727A",
-                            },
-                          ]
-                        }
-                      >
-                        Started a discussion:
-                      </Text>
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "lineHeight": 20,
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#2F343D",
-                            },
-                          ]
-                        }
-                      >
-                        This is a discussion
-                      </Text>
-                      <View
-                        style={
-                          [
-                            {
-                              "alignItems": "center",
-                              "flexDirection": "row",
-                            },
-                            {
-                              "gap": 8,
-                            },
-                          ]
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "alignItems": "center",
-                              "backgroundColor": "#1D74F5",
-                              "borderRadius": 4,
-                              "flexDirection": "row",
-                              "justifyContent": "center",
-                              "opacity": 1,
-                              "paddingHorizontal": 12,
-                              "paddingVertical": 8,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
+                          />
                           <View
                             style={
                               {
                                 "alignItems": "center",
                                 "flexDirection": "row",
-                                "gap": 8,
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
                           >
                             <Text
-                              allowFontScaling={false}
-                              selectable={false}
+                              numberOfLines={1}
                               style={
                                 [
                                   {
-                                    "color": "#FFFFFF",
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
                                     "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
                                   },
-                                  [
-                                    {
-                                      "lineHeight": 16,
-                                    },
-                                    undefined,
-                                  ],
                                   {
-                                    "fontFamily": "custom",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "normal",
+                                    "color": "#1F2329",
                                   },
-                                  {},
                                 ]
                               }
                             >
-                              
+                              diego.mello
                             </Text>
                             <Text
                               style={
@@ -24408,30 +27362,46 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                                   {
                                     "backgroundColor": "transparent",
                                     "fontFamily": "Inter",
-                                    "fontSize": 12,
-                                    "fontWeight": "600",
-                                    "lineHeight": 16,
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
                                     "textAlign": "left",
                                   },
                                   {
-                                    "color": "#FFFFFF",
+                                    "color": "#6C727A",
                                   },
                                 ]
                               }
                             >
-                              +999 messages
+                              10:00 AM
                             </Text>
                           </View>
-                        </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
                         <Text
                           style={
                             [
                               {
                                 "backgroundColor": "transparent",
                                 "fontFamily": "Inter",
-                                "fontSize": 13,
+                                "fontSize": 16,
+                                "fontStyle": "italic",
                                 "fontWeight": "400",
-                                "lineHeight": 18,
+                                "lineHeight": 20,
                                 "textAlign": "left",
                               },
                               {
@@ -24440,49 +27410,211 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                             ]
                           }
                         >
-                          November 10, 2017
+                          Started a discussion:
                         </Text>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
-    <A11yOrderView
-      orderKey=":r1f:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r1f:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+                        <Text
+                          style={
+                            [
+                              {
+                                "backgroundColor": "transparent",
+                                "fontFamily": "Inter",
+                                "fontSize": 16,
+                                "fontWeight": "400",
+                                "lineHeight": 20,
+                                "textAlign": "left",
+                              },
+                              {
+                                "color": "#2F343D",
+                              },
+                            ]
+                          }
+                        >
+                          This is a discussion
+                        </Text>
+                        <View
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              },
+                              {
+                                "gap": 8,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "paddingHorizontal": 12,
+                                  "paddingVertical": 8,
+                                },
+                                {
+                                  "backgroundColor": "#1D74F5",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "gap": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#FFFFFF",
+                                      "fontSize": 16,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 16,
+                                      },
+                                      undefined,
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 12,
+                                      "fontWeight": "600",
+                                      "lineHeight": 16,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#FFFFFF",
+                                    },
+                                  ]
+                                }
+                              >
+                                +999 messages
+                              </Text>
+                            </View>
+                          </View>
+                          <Text
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 13,
+                                  "fontWeight": "400",
+                                  "lineHeight": 18,
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#6C727A",
+                                },
+                              ]
+                            }
+                          >
+                            November 10, 2017
+                          </Text>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
+    <A11yOrderView
+      orderKey=":r1f:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r1f:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
           }
           accessibilityValue={
             {
@@ -24505,448 +27637,519 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is a discussion.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is a discussion"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1f:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is a discussion.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is a discussion"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1f:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={91}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={92}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontStyle": "italic",
-                              "fontWeight": "400",
-                              "lineHeight": 20,
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#6C727A",
-                            },
-                          ]
-                        }
-                      >
-                        Started a discussion:
-                      </Text>
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "lineHeight": 20,
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#2F343D",
-                            },
-                          ]
-                        }
-                      >
-                        This is a discussion
-                      </Text>
-                      <View
-                        style={
-                          [
-                            {
-                              "alignItems": "center",
-                              "flexDirection": "row",
-                            },
-                            {
-                              "gap": 8,
-                            },
-                          ]
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "alignItems": "center",
-                              "backgroundColor": "#1D74F5",
-                              "borderRadius": 4,
-                              "flexDirection": "row",
-                              "justifyContent": "center",
-                              "opacity": 1,
-                              "paddingHorizontal": 12,
-                              "paddingVertical": 8,
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
+                          />
                           <View
                             style={
                               {
                                 "alignItems": "center",
                                 "flexDirection": "row",
-                                "gap": 8,
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
                           >
                             <Text
-                              allowFontScaling={false}
-                              selectable={false}
-                              style={
-                                [
-                                  {
-                                    "color": "#FFFFFF",
-                                    "fontSize": 20.8,
-                                  },
-                                  [
-                                    {
-                                      "lineHeight": 20.8,
-                                    },
-                                    undefined,
-                                  ],
-                                  {
-                                    "fontFamily": "custom",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "normal",
-                                  },
-                                  {},
-                                ]
-                              }
-                            >
-                              
-                            </Text>
-                            <Text
+                              numberOfLines={1}
                               style={
                                 [
                                   {
                                     "backgroundColor": "transparent",
+                                    "flexShrink": 1,
                                     "fontFamily": "Inter",
-                                    "fontSize": 12,
+                                    "fontSize": 16,
                                     "fontWeight": "600",
-                                    "lineHeight": 16,
+                                    "lineHeight": 22,
                                     "textAlign": "left",
                                   },
                                   {
-                                    "color": "#FFFFFF",
+                                    "color": "#1F2329",
                                   },
                                 ]
                               }
                             >
-                              No messages yet
+                              diego.mello
                             </Text>
                           </View>
-                        </View>
-                        <Text
+                        </RNGestureHandlerButton>
+                        <View
                           style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#6C727A",
-                              },
-                            ]
+                            {
+                              "flexDirection": "row",
+                            }
                           }
                         />
                       </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r1g:"
-    >
-      <A11yIndexView
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <Text
+                          style={
+                            [
+                              {
+                                "backgroundColor": "transparent",
+                                "fontFamily": "Inter",
+                                "fontSize": 16,
+                                "fontStyle": "italic",
+                                "fontWeight": "400",
+                                "lineHeight": 20,
+                                "textAlign": "left",
+                              },
+                              {
+                                "color": "#6C727A",
+                              },
+                            ]
+                          }
+                        >
+                          Started a discussion:
+                        </Text>
+                        <Text
+                          style={
+                            [
+                              {
+                                "backgroundColor": "transparent",
+                                "fontFamily": "Inter",
+                                "fontSize": 16,
+                                "fontWeight": "400",
+                                "lineHeight": 20,
+                                "textAlign": "left",
+                              },
+                              {
+                                "color": "#2F343D",
+                              },
+                            ]
+                          }
+                        >
+                          This is a discussion
+                        </Text>
+                        <View
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              },
+                              {
+                                "gap": 8,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "paddingHorizontal": 12,
+                                  "paddingVertical": 8,
+                                },
+                                {
+                                  "backgroundColor": "#1D74F5",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "gap": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#FFFFFF",
+                                      "fontSize": 20.8,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 20.8,
+                                      },
+                                      undefined,
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 12,
+                                      "fontWeight": "600",
+                                      "lineHeight": 16,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#FFFFFF",
+                                    },
+                                  ]
+                                }
+                              >
+                                No messages yet
+                              </Text>
+                            </View>
+                          </View>
+                          <Text
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 13,
+                                  "fontWeight": "400",
+                                  "lineHeight": 18,
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#6C727A",
+                                },
+                              ]
+                            }
+                          />
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r1g:"
+    >
+      <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
@@ -24983,270 +28186,308 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is a discussion.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is a discussion"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1g:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is a discussion.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is a discussion"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1g:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={93}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={94}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
+                        />
+                      </View>
                       <Text
                         style={
                           [
                             {
                               "backgroundColor": "transparent",
                               "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontStyle": "italic",
+                              "fontSize": 13,
                               "fontWeight": "400",
-                              "lineHeight": 20,
+                              "lineHeight": 18,
                               "textAlign": "left",
                             },
                             {
@@ -25255,170 +28496,203 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                           ]
                         }
                       >
-                        Started a discussion:
-                      </Text>
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "lineHeight": 20,
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#2F343D",
-                            },
-                          ]
-                        }
-                      >
-                        This is a discussion
+                        10:00 AM
                       </Text>
                       <View
                         style={
-                          [
-                            {
-                              "alignItems": "center",
-                              "flexDirection": "row",
-                            },
-                            {
-                              "gap": 8,
-                            },
-                          ]
+                          {
+                            "gap": 4,
+                          }
                         }
                       >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
+                        <Text
+                          style={
+                            [
+                              {
+                                "backgroundColor": "transparent",
+                                "fontFamily": "Inter",
+                                "fontSize": 16,
+                                "fontStyle": "italic",
+                                "fontWeight": "400",
+                                "lineHeight": 20,
+                                "textAlign": "left",
+                              },
+                              {
+                                "color": "#6C727A",
+                              },
+                            ]
                           }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
+                        >
+                          Started a discussion:
+                        </Text>
+                        <Text
                           style={
-                            {
-                              "alignItems": "center",
-                              "backgroundColor": "#1D74F5",
-                              "borderRadius": 4,
-                              "flexDirection": "row",
-                              "justifyContent": "center",
-                              "opacity": 1,
-                              "paddingHorizontal": 12,
-                              "paddingVertical": 8,
-                            }
+                            [
+                              {
+                                "backgroundColor": "transparent",
+                                "fontFamily": "Inter",
+                                "fontSize": 16,
+                                "fontWeight": "400",
+                                "lineHeight": 20,
+                                "textAlign": "left",
+                              },
+                              {
+                                "color": "#2F343D",
+                              },
+                            ]
                           }
                         >
-                          <View
-                            style={
+                          This is a discussion
+                        </Text>
+                        <View
+                          style={
+                            [
                               {
                                 "alignItems": "center",
                                 "flexDirection": "row",
-                                "gap": 8,
+                              },
+                              {
+                                "gap": 8,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
                               }
                             }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "paddingHorizontal": 12,
+                                  "paddingVertical": 8,
+                                },
+                                {
+                                  "backgroundColor": "#1D74F5",
+                                },
+                              ]
+                            }
                           >
-                            <Text
-                              allowFontScaling={false}
-                              selectable={false}
+                            <View
                               style={
-                                [
-                                  {
-                                    "color": "#FFFFFF",
-                                    "fontSize": 20.8,
-                                  },
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "gap": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
                                   [
                                     {
-                                      "lineHeight": 20.8,
+                                      "color": "#FFFFFF",
+                                      "fontSize": 20.8,
                                     },
-                                    undefined,
-                                  ],
-                                  {
-                                    "fontFamily": "custom",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "normal",
-                                  },
-                                  {},
-                                ]
-                              }
-                            >
-                              
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 12,
-                                    "fontWeight": "600",
-                                    "lineHeight": 16,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#FFFFFF",
-                                  },
-                                ]
-                              }
-                            >
-                              1 message
-                            </Text>
+                                    [
+                                      {
+                                        "lineHeight": 20.8,
+                                      },
+                                      undefined,
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 12,
+                                      "fontWeight": "600",
+                                      "lineHeight": 16,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#FFFFFF",
+                                    },
+                                  ]
+                                }
+                              >
+                                1 message
+                              </Text>
+                            </View>
                           </View>
+                          <Text
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 13,
+                                  "fontWeight": "400",
+                                  "lineHeight": 18,
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#6C727A",
+                                },
+                              ]
+                            }
+                          >
+                            November 10, 2017
+                          </Text>
                         </View>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          November 10, 2017
-                        </Text>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -25463,426 +28737,335 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1h:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1h:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={95}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={96}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontStyle": "italic",
-                              "fontWeight": "400",
-                              "lineHeight": 20,
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#6C727A",
-                            },
-                          ]
-                        }
-                      >
-                        Started a discussion:
-                      </Text>
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "lineHeight": 20,
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#2F343D",
-                            },
-                          ]
-                        }
-                      >
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                      </Text>
-                      <View
-                        style={
-                          [
-                            {
-                              "alignItems": "center",
-                              "flexDirection": "row",
-                            },
-                            {
-                              "gap": 8,
-                            },
-                          ]
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "alignItems": "center",
-                              "backgroundColor": "#1D74F5",
-                              "borderRadius": 4,
-                              "flexDirection": "row",
-                              "justifyContent": "center",
-                              "opacity": 1,
-                              "paddingHorizontal": 12,
-                              "paddingVertical": 8,
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
+                          />
                           <View
                             style={
                               {
                                 "alignItems": "center",
                                 "flexDirection": "row",
-                                "gap": 8,
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
                           >
                             <Text
-                              allowFontScaling={false}
-                              selectable={false}
-                              style={
-                                [
-                                  {
-                                    "color": "#FFFFFF",
-                                    "fontSize": 20.8,
-                                  },
-                                  [
-                                    {
-                                      "lineHeight": 20.8,
-                                    },
-                                    undefined,
-                                  ],
-                                  {
-                                    "fontFamily": "custom",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "normal",
-                                  },
-                                  {},
-                                ]
-                              }
-                            >
-                              
-                            </Text>
-                            <Text
+                              numberOfLines={1}
                               style={
                                 [
                                   {
                                     "backgroundColor": "transparent",
+                                    "flexShrink": 1,
                                     "fontFamily": "Inter",
-                                    "fontSize": 12,
+                                    "fontSize": 16,
                                     "fontWeight": "600",
-                                    "lineHeight": 16,
+                                    "lineHeight": 22,
                                     "textAlign": "left",
                                   },
                                   {
-                                    "color": "#FFFFFF",
+                                    "color": "#1F2329",
                                   },
                                 ]
                               }
                             >
-                              10 messages
+                              diego.mello
                             </Text>
                           </View>
-                        </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
                         <Text
                           style={
                             [
                               {
                                 "backgroundColor": "transparent",
                                 "fontFamily": "Inter",
-                                "fontSize": 13,
+                                "fontSize": 16,
+                                "fontStyle": "italic",
                                 "fontWeight": "400",
-                                "lineHeight": 18,
+                                "lineHeight": 20,
                                 "textAlign": "left",
                               },
                               {
@@ -25891,19 +29074,181 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                             ]
                           }
                         >
-                          November 10, 2017
+                          Started a discussion:
                         </Text>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
+                        <Text
+                          style={
+                            [
+                              {
+                                "backgroundColor": "transparent",
+                                "fontFamily": "Inter",
+                                "fontSize": 16,
+                                "fontWeight": "400",
+                                "lineHeight": 20,
+                                "textAlign": "left",
+                              },
+                              {
+                                "color": "#2F343D",
+                              },
+                            ]
+                          }
+                        >
+                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        </Text>
+                        <View
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              },
+                              {
+                                "gap": 8,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "paddingHorizontal": 12,
+                                  "paddingVertical": 8,
+                                },
+                                {
+                                  "backgroundColor": "#1D74F5",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "gap": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#FFFFFF",
+                                      "fontSize": 20.8,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 20.8,
+                                      },
+                                      undefined,
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 12,
+                                      "fontWeight": "600",
+                                      "lineHeight": 16,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#FFFFFF",
+                                    },
+                                  ]
+                                }
+                              >
+                                10 messages
+                              </Text>
+                            </View>
+                          </View>
+                          <Text
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 13,
+                                  "fontWeight": "400",
+                                  "lineHeight": 18,
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#6C727A",
+                                },
+                              ]
+                            }
+                          >
+                            November 10, 2017
+                          </Text>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
       orderKey=":r1i:"
     >
       <A11yIndexView
@@ -25943,426 +29288,335 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is a discussion.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is a discussion"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1i:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is a discussion.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is a discussion"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1i:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={97}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={98}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontStyle": "italic",
-                              "fontWeight": "400",
-                              "lineHeight": 20,
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#6C727A",
-                            },
-                          ]
-                        }
-                      >
-                        Started a discussion:
-                      </Text>
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "lineHeight": 20,
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#2F343D",
-                            },
-                          ]
-                        }
-                      >
-                        This is a discussion
-                      </Text>
-                      <View
-                        style={
-                          [
-                            {
-                              "alignItems": "center",
-                              "flexDirection": "row",
-                            },
-                            {
-                              "gap": 8,
-                            },
-                          ]
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "alignItems": "center",
-                              "backgroundColor": "#1D74F5",
-                              "borderRadius": 4,
-                              "flexDirection": "row",
-                              "justifyContent": "center",
-                              "opacity": 1,
-                              "paddingHorizontal": 12,
-                              "paddingVertical": 8,
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
+                          />
                           <View
                             style={
                               {
                                 "alignItems": "center",
                                 "flexDirection": "row",
-                                "gap": 8,
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
                           >
                             <Text
-                              allowFontScaling={false}
-                              selectable={false}
-                              style={
-                                [
-                                  {
-                                    "color": "#FFFFFF",
-                                    "fontSize": 20.8,
-                                  },
-                                  [
-                                    {
-                                      "lineHeight": 20.8,
-                                    },
-                                    undefined,
-                                  ],
-                                  {
-                                    "fontFamily": "custom",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "normal",
-                                  },
-                                  {},
-                                ]
-                              }
-                            >
-                              
-                            </Text>
-                            <Text
+                              numberOfLines={1}
                               style={
                                 [
                                   {
                                     "backgroundColor": "transparent",
+                                    "flexShrink": 1,
                                     "fontFamily": "Inter",
-                                    "fontSize": 12,
+                                    "fontSize": 16,
                                     "fontWeight": "600",
-                                    "lineHeight": 16,
+                                    "lineHeight": 22,
                                     "textAlign": "left",
                                   },
                                   {
-                                    "color": "#FFFFFF",
+                                    "color": "#1F2329",
                                   },
                                 ]
                               }
                             >
-                              +999 messages
+                              diego.mello
                             </Text>
                           </View>
-                        </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
                         <Text
                           style={
                             [
                               {
                                 "backgroundColor": "transparent",
                                 "fontFamily": "Inter",
-                                "fontSize": 13,
+                                "fontSize": 16,
+                                "fontStyle": "italic",
                                 "fontWeight": "400",
-                                "lineHeight": 18,
+                                "lineHeight": 20,
                                 "textAlign": "left",
                               },
                               {
@@ -26371,437 +29625,201 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                             ]
                           }
                         >
-                          November 10, 2017
+                          Started a discussion:
                         </Text>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: Edited should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
-    <A11yOrderView
-      orderKey=":r1j:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r1j:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
-        >
-          <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message header.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
-          >
-            <A11yIndexView
-              accessibilityLabel="Message header"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1j:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                >
-                  <View
-                    accessible={true}
-                    style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
-                      }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
-                      >
                         <Text
-                          numberOfLines={1}
                           style={
                             [
                               {
                                 "backgroundColor": "transparent",
-                                "flexShrink": 1,
                                 "fontFamily": "Inter",
                                 "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
+                                "fontWeight": "400",
+                                "lineHeight": 20,
                                 "textAlign": "left",
                               },
                               {
-                                "color": "#1F2329",
+                                "color": "#2F343D",
                               },
                             ]
                           }
                         >
-                          diego.mello
+                          This is a discussion
                         </Text>
-                        <Text
+                        <View
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
+                                "alignItems": "center",
+                                "flexDirection": "row",
                               },
                               {
-                                "color": "#6C727A",
+                                "gap": 8,
                               },
                             ]
                           }
                         >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <View
-                          style={
-                            {
-                              "paddingLeft": 5,
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
                             }
-                          }
-                          testID="undefined-edited"
-                        >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
-                            style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                  "fontSize": 16,
-                                },
-                                [
-                                  {
-                                    "lineHeight": 16,
-                                  },
-                                  undefined,
-                                ],
-                                {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
-                                },
-                                {},
-                              ]
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
                             }
-                          >
-                            
-                          </Text>
-                        </View>
-                      </View>
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message header"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
                             }
-                          }
-                        >
-                          <Text
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "paddingHorizontal": 12,
+                                  "paddingVertical": 8,
                                 },
                                 {
-                                  "color": "#2F343D",
+                                  "backgroundColor": "#1D74F5",
                                 },
                               ]
                             }
                           >
-                            <Text
+                            <View
                               style={
                                 {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "gap": 8,
                                 }
                               }
                             >
                               <Text
-                                accessibilityLabel="Message header"
+                                allowFontScaling={false}
+                                selectable={false}
                                 style={
                                   [
                                     {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
+                                      "color": "#FFFFFF",
+                                      "fontSize": 20.8,
                                     },
+                                    [
+                                      {
+                                        "lineHeight": 20.8,
+                                      },
+                                      undefined,
+                                    ],
                                     {
-                                      "color": "#2F343D",
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
                                     },
+                                    {},
                                   ]
                                 }
                               >
-                                Message header
+                                
                               </Text>
-                            </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 12,
+                                      "fontWeight": "600",
+                                      "lineHeight": 16,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#FFFFFF",
+                                    },
+                                  ]
+                                }
+                              >
+                                +999 messages
+                              </Text>
+                            </View>
+                          </View>
+                          <Text
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 13,
+                                  "fontWeight": "400",
+                                  "lineHeight": 18,
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#6C727A",
+                                },
+                              ]
+                            }
+                          >
+                            November 10, 2017
                           </Text>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: Edited should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r1k:"
+      orderKey=":r1j:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r1k:"
+        orderKey=":r1j:"
       >
         <View
           accessibilityState={
@@ -26834,600 +29852,438 @@ exports[`Story Snapshots: Edited should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message without header.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message without header"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1k:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message header.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message header"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1j:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
-                        "flex": 1,
+                        "alignItems": "flex-end",
+                        "width": 36,
                       }
                     }
                   >
                     <View
+                      accessible={true}
                       style={
-                        {
-                          "gap": 4,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <View
-                        testID="message-content-Message without header"
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={99}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
                       >
                         <View
+                          collapsable={false}
                           style={
                             {
-                              "gap": 2,
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
                             }
                           }
-                        >
-                          <Text
-                            style={
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
                                 },
                               ]
                             }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
                               }
-                            >
-                              <Text
-                                accessibilityLabel="Message without header"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Message without header
-                              </Text>
-                            </Text>
-                          </Text>
+                            }
+                            transition={null}
+                            width={36}
+                          />
                         </View>
-                      </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                >
                   <View
                     style={
                       {
-                        "paddingLeft": 5,
+                        "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
-                    testID="Message without header-edited"
                   >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
+                    <View
+                      onLayout={[Function]}
                       style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 16,
-                          },
-                          [
-                            {
-                              "lineHeight": 16,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: EditedLargeFont should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
-    <A11yOrderView
-      orderKey=":r1l:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r1l:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
-        >
-          <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message header.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
-          >
-            <A11yIndexView
-              accessibilityLabel="Message header"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1l:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                >
-                  <View
-                    accessible={true}
-                    style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
-                      }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
-                          }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
+                        {
+                          "flex": 1,
+                        }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={100}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
                         <View
                           style={
                             {
-                              "paddingLeft": 5,
+                              "flexDirection": "row",
                             }
                           }
-                          testID="undefined-edited"
                         >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
+                          <View
                             style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                  "fontSize": 20.8,
-                                },
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                            testID="undefined-edited"
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
                                 [
                                   {
-                                    "lineHeight": 20.8,
+                                    "color": "#2F343D",
+                                    "fontSize": 16,
                                   },
-                                  undefined,
-                                ],
-                                {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            
-                          </Text>
+                                  [
+                                    {
+                                      "lineHeight": 16,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
                         </View>
                       </View>
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
+                      <View
+                        style={
                           {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                            "gap": 4,
+                          }
                         }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message header"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message header"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message header"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message header
+                                <Text
+                                  accessibilityLabel="Message header"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message header
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r1m:"
+      orderKey=":r1k:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r1m:"
+        orderKey=":r1k:"
       >
         <View
           accessibilityState={
@@ -27460,177 +30316,191 @@ exports[`Story Snapshots: EditedLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message without header.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message without header"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1m:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message without header.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message without header"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1k:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-Message without header"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message without header"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message without header"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message without header
+                                <Text
+                                  accessibilityLabel="Message without header"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message without header
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                >
                   <View
                     style={
                       {
-                        "paddingLeft": 5,
+                        "flexDirection": "row",
                       }
                     }
-                    testID="Message without header-edited"
                   >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
+                    <View
                       style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 20.8,
-                          },
+                        {
+                          "paddingLeft": 5,
+                        }
+                      }
+                      testID="Message without header-edited"
+                    >
+                      <Text
+                        allowFontScaling={false}
+                        selectable={false}
+                        style={
                           [
                             {
-                              "lineHeight": 20.8,
+                              "color": "#2F343D",
+                              "fontSize": 16,
                             },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
+                            [
+                              {
+                                "lineHeight": 16,
+                              },
+                              undefined,
+                            ],
+                            {
+                              "fontFamily": "custom",
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
+                            },
+                            {},
+                          ]
+                        }
+                      >
+                        
+                      </Text>
+                    </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -27639,7 +30509,7 @@ exports[`Story Snapshots: EditedLargeFont should match snapshot 1`] = `
 </RCTScrollView>
 `;
 
-exports[`Story Snapshots: Editing should match snapshot 1`] = `
+exports[`Story Snapshots: EditedLargeFont should match snapshot 1`] = `
 <RCTScrollView
   style={
     {
@@ -27649,13 +30519,13 @@ exports[`Story Snapshots: Editing should match snapshot 1`] = `
 >
   <View>
     <A11yOrderView
-      orderKey=":r1n:"
+      orderKey=":r1l:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r1n:"
+        orderKey=":r1l:"
       >
         <View
           accessibilityState={
@@ -27687,350 +30557,439 @@ exports[`Story Snapshots: Editing should match snapshot 1`] = `
           onStartShouldSetResponder={[Function]}
           style={
             {
-              "backgroundColor": "#FFF6D6",
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message being edited.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message being edited"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1n:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message header.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message header"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1l:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={101}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={102}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
                         >
-                          10:00 AM
-                        </Text>
+                          <View
+                            style={
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                            testID="undefined-edited"
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 20.8,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 20.8,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message being edited"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message header"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message being edited"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message being edited
+                                <Text
+                                  accessibilityLabel="Message header"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message header
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: EditingLargeFont should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r1o:"
+      orderKey=":r1m:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r1o:"
+        orderKey=":r1m:"
       >
         <View
           accessibilityState={
@@ -28062,325 +31021,192 @@ exports[`Story Snapshots: EditingLargeFont should match snapshot 1`] = `
           onStartShouldSetResponder={[Function]}
           style={
             {
-              "backgroundColor": "#FFF6D6",
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message being edited.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message being edited"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1o:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message without header.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message without header"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1m:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
+                  />
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
+                      onLayout={[Function]}
+                      style={
                         {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
-                      }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
-                          }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
                             "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message being edited"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message without header"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message being edited"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message being edited
+                                <Text
+                                  accessibilityLabel="Message without header"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message without header
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        {
+                          "paddingLeft": 5,
+                        }
+                      }
+                      testID="Message without header-edited"
+                    >
+                      <Text
+                        allowFontScaling={false}
+                        selectable={false}
+                        style={
+                          [
+                            {
+                              "color": "#2F343D",
+                              "fontSize": 20.8,
+                            },
+                            [
+                              {
+                                "lineHeight": 20.8,
+                              },
+                              undefined,
+                            ],
+                            {
+                              "fontFamily": "custom",
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
+                            },
+                            {},
+                          ]
+                        }
+                      >
+                        
+                      </Text>
+                    </View>
+                  </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -28389,7 +31215,7 @@ exports[`Story Snapshots: EditingLargeFont should match snapshot 1`] = `
 </RCTScrollView>
 `;
 
-exports[`Story Snapshots: Emojis should match snapshot 1`] = `
+exports[`Story Snapshots: Editing should match snapshot 1`] = `
 <RCTScrollView
   style={
     {
@@ -28399,13 +31225,13 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
 >
   <View>
     <A11yOrderView
-      orderKey=":r1p:"
+      orderKey=":r1n:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r1p:"
+        orderKey=":r1n:"
       >
         <View
           accessibilityState={
@@ -28437,657 +31263,823 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
           onStartShouldSetResponder={[Function]}
           style={
             {
-              "backgroundColor": undefined,
+              "backgroundColor": "#FFF6D6",
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  👊🤙👏.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="👊🤙👏"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1p:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message being edited.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message being edited"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1n:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={103}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={104}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-👊🤙👏"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
+                          />
                           <View
                             style={
                               {
+                                "alignItems": "center",
                                 "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
                           >
                             <Text
+                              numberOfLines={1}
                               style={
                                 [
-                                  {
-                                    "color": "#2F343D",
-                                  },
                                   {
                                     "backgroundColor": "transparent",
+                                    "flexShrink": 1,
                                     "fontFamily": "Inter",
-                                    "fontSize": 30,
-                                    "fontWeight": "400",
-                                    "lineHeight": 43,
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
                                     "textAlign": "left",
                                   },
+                                  {
+                                    "color": "#1F2329",
+                                  },
                                 ]
                               }
                             >
-                              👊
+                              diego.mello
                             </Text>
                             <Text
                               style={
                                 [
-                                  {
-                                    "color": "#2F343D",
-                                  },
                                   {
                                     "backgroundColor": "transparent",
                                     "fontFamily": "Inter",
-                                    "fontSize": 30,
+                                    "fontSize": 13,
                                     "fontWeight": "400",
-                                    "lineHeight": 43,
+                                    "lineHeight": 18,
                                     "textAlign": "left",
                                   },
+                                  {
+                                    "color": "#6C727A",
+                                  },
                                 ]
                               }
                             >
-                              🤙👏
+                              10:00 AM
                             </Text>
                           </View>
-                        </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r1q:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r1q:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Message being edited"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Message being edited"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message being edited
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: EditingLargeFont should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
+    <A11yOrderView
+      orderKey=":r1o:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r1o:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
             {
-              "backgroundColor": undefined,
+              "backgroundColor": "#FFF6D6",
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  👏.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="👏"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1q:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message being edited.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message being edited"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1o:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={105}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={106}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-👏"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message being edited"
                         >
                           <View
                             style={
                               {
-                                "flexDirection": "row",
+                                "gap": 2,
                               }
                             }
                           >
                             <Text
                               style={
                                 [
-                                  {
-                                    "color": "#2F343D",
-                                  },
                                   {
                                     "backgroundColor": "transparent",
                                     "fontFamily": "Inter",
-                                    "fontSize": 30,
+                                    "fontSize": 16,
                                     "fontWeight": "400",
-                                    "lineHeight": 43,
+                                    "lineHeight": 22,
                                     "textAlign": "left",
                                   },
+                                  {
+                                    "color": "#2F343D",
+                                  },
                                 ]
                               }
                             >
-                              👏
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Message being edited"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message being edited
+                                </Text>
+                              </Text>
                             </Text>
                           </View>
                         </View>
@@ -29095,20 +32087,33 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: Emojis should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r1r:"
+      orderKey=":r1p:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r1r:"
+        orderKey=":r1p:"
       >
         <View
           accessibilityState={
@@ -29141,414 +32146,380 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  :react_rocket: :nyan_rocket: :marioparty:.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=":react_rocket: :nyan_rocket: :marioparty:"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1r:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  👊🤙👏.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="👊🤙👏"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1p:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={107}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={108}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-:react_rocket: :nyan_rocket: :marioparty:"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
+                          />
                           <View
                             style={
                               {
+                                "alignItems": "center",
                                 "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
                           >
-                            <View
+                            <Text
+                              numberOfLines={1}
                               style={
                                 [
                                   {
-                                    "transform": [
-                                      {
-                                        "translateY": 0,
-                                      },
-                                    ],
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
                                   },
                                 ]
                               }
                             >
-                              <ViewManagerAdapter_ExpoImage
-                                containerViewRef={"[React.ref]"}
-                                contentFit="contain"
-                                contentPosition={
-                                  {
-                                    "left": "50%",
-                                    "top": "50%",
-                                  }
-                                }
-                                height={30}
-                                nativeViewRef={"[React.ref]"}
-                                onError={[Function]}
-                                onLoad={[Function]}
-                                onLoadStart={[Function]}
-                                onProgress={[Function]}
-                                placeholder={[]}
-                                source={
-                                  [
-                                    {
-                                      "uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
-                                    },
-                                  ]
-                                }
-                                style={
-                                  {
-                                    "height": 30,
-                                    "width": 30,
-                                  }
-                                }
-                                transition={null}
-                                width={30}
-                              />
-                            </View>
-                            <View
+                              diego.mello
+                            </Text>
+                            <Text
                               style={
                                 [
                                   {
-                                    "transform": [
-                                      {
-                                        "translateY": 0,
-                                      },
-                                    ],
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
                                   },
                                 ]
                               }
                             >
-                              <ViewManagerAdapter_ExpoImage
-                                containerViewRef={"[React.ref]"}
-                                contentFit="contain"
-                                contentPosition={
-                                  {
-                                    "left": "50%",
-                                    "top": "50%",
-                                  }
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-👊🤙👏"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "flexDirection": "row",
                                 }
-                                height={30}
-                                nativeViewRef={"[React.ref]"}
-                                onError={[Function]}
-                                onLoad={[Function]}
-                                onLoadStart={[Function]}
-                                onProgress={[Function]}
-                                placeholder={[]}
-                                source={
+                              }
+                            >
+                              <Text
+                                style={
                                   [
                                     {
-                                      "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                      "color": "#2F343D",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 30,
+                                      "fontWeight": "400",
+                                      "lineHeight": 43,
+                                      "textAlign": "left",
                                     },
                                   ]
                                 }
+                              >
+                                👊
+                              </Text>
+                              <Text
                                 style={
-                                  {
-                                    "height": 30,
-                                    "width": 30,
-                                  }
-                                }
-                                transition={null}
-                                width={30}
-                              />
-                            </View>
-                            <View
-                              style={
-                                [
-                                  {
-                                    "transform": [
-                                      {
-                                        "translateY": 0,
-                                      },
-                                    ],
-                                  },
-                                ]
-                              }
-                            >
-                              <ViewManagerAdapter_ExpoImage
-                                containerViewRef={"[React.ref]"}
-                                contentFit="contain"
-                                contentPosition={
-                                  {
-                                    "left": "50%",
-                                    "top": "50%",
-                                  }
-                                }
-                                height={30}
-                                nativeViewRef={"[React.ref]"}
-                                onError={[Function]}
-                                onLoad={[Function]}
-                                onLoadStart={[Function]}
-                                onProgress={[Function]}
-                                placeholder={[]}
-                                source={
                                   [
                                     {
-                                      "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
+                                      "color": "#2F343D",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 30,
+                                      "fontWeight": "400",
+                                      "lineHeight": 43,
+                                      "textAlign": "left",
                                     },
                                   ]
                                 }
-                                style={
-                                  {
-                                    "height": 30,
-                                    "width": 30,
-                                  }
-                                }
-                                transition={null}
-                                width={30}
-                              />
+                              >
+                                🤙👏
+                              </Text>
                             </View>
                           </View>
                         </View>
@@ -29556,20 +32527,20 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r1s:"
+      orderKey=":r1q:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r1s:"
+        orderKey=":r1q:"
       >
         <View
           accessibilityState={
@@ -29602,322 +32573,361 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  :react_rocket:.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=":react_rocket:"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1s:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  👏.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="👏"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1q:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={109}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={110}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-:react_rocket:"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-👏"
                         >
                           <View
                             style={
                               {
-                                "flexDirection": "row",
+                                "gap": 2,
                               }
                             }
                           >
                             <View
                               style={
-                                [
-                                  {
-                                    "transform": [
-                                      {
-                                        "translateY": 0,
-                                      },
-                                    ],
-                                  },
-                                ]
+                                {
+                                  "flexDirection": "row",
+                                }
                               }
                             >
-                              <ViewManagerAdapter_ExpoImage
-                                containerViewRef={"[React.ref]"}
-                                contentFit="contain"
-                                contentPosition={
-                                  {
-                                    "left": "50%",
-                                    "top": "50%",
-                                  }
-                                }
-                                height={30}
-                                nativeViewRef={"[React.ref]"}
-                                onError={[Function]}
-                                onLoad={[Function]}
-                                onLoadStart={[Function]}
-                                onProgress={[Function]}
-                                placeholder={[]}
-                                source={
+                              <Text
+                                style={
                                   [
                                     {
-                                      "uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
+                                      "color": "#2F343D",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 30,
+                                      "fontWeight": "400",
+                                      "lineHeight": 43,
+                                      "textAlign": "left",
                                     },
                                   ]
                                 }
-                                style={
-                                  {
-                                    "height": 30,
-                                    "width": 30,
-                                  }
-                                }
-                                transition={null}
-                                width={30}
-                              />
+                              >
+                                👏
+                              </Text>
                             </View>
                           </View>
                         </View>
@@ -29925,20 +32935,20 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r1t:"
+      orderKey=":r1r:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r1t:"
+        orderKey=":r1r:"
       >
         <View
           accessibilityState={
@@ -29971,341 +32981,474 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  🤙:react_rocket:.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="🤙:react_rocket:"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1t:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  :react_rocket: :nyan_rocket: :marioparty:.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=":react_rocket: :nyan_rocket: :marioparty:"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1r:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={111}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={112}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-🤙:react_rocket:"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
+                          />
                           <View
                             style={
                               {
+                                "alignItems": "center",
                                 "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
                           >
                             <Text
+                              numberOfLines={1}
                               style={
                                 [
                                   {
-                                    "color": "#2F343D",
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
                                   },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
                                   {
                                     "backgroundColor": "transparent",
                                     "fontFamily": "Inter",
-                                    "fontSize": 30,
+                                    "fontSize": 13,
                                     "fontWeight": "400",
-                                    "lineHeight": 43,
+                                    "lineHeight": 18,
                                     "textAlign": "left",
                                   },
+                                  {
+                                    "color": "#6C727A",
+                                  },
                                 ]
                               }
                             >
-                              🤙
+                              10:00 AM
                             </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-:react_rocket: :nyan_rocket: :marioparty:"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
                             <View
                               style={
-                                [
+                                {
+                                  "flexDirection": "row",
+                                }
+                              }
+                            >
+                              <View
+                                style={
                                   {
                                     "transform": [
                                       {
                                         "translateY": 0,
                                       },
                                     ],
-                                  },
-                                ]
-                              }
-                            >
-                              <ViewManagerAdapter_ExpoImage
-                                containerViewRef={"[React.ref]"}
-                                contentFit="contain"
-                                contentPosition={
-                                  {
-                                    "left": "50%",
-                                    "top": "50%",
                                   }
                                 }
-                                height={30}
-                                nativeViewRef={"[React.ref]"}
-                                onError={[Function]}
-                                onLoad={[Function]}
-                                onLoadStart={[Function]}
-                                onProgress={[Function]}
-                                placeholder={[]}
-                                source={
-                                  [
+                              >
+                                <ViewManagerAdapter_ExpoImage
+                                  containerViewRef={"[React.ref]"}
+                                  contentFit="contain"
+                                  contentPosition={
                                     {
-                                      "uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
-                                    },
-                                  ]
+                                      "left": "50%",
+                                      "top": "50%",
+                                    }
+                                  }
+                                  height={30}
+                                  nativeViewRef={"[React.ref]"}
+                                  onError={[Function]}
+                                  onLoad={[Function]}
+                                  onLoadStart={[Function]}
+                                  onProgress={[Function]}
+                                  placeholder={[]}
+                                  source={
+                                    [
+                                      {
+                                        "uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
+                                      },
+                                    ]
+                                  }
+                                  style={
+                                    {
+                                      "height": 30,
+                                      "width": 30,
+                                    }
+                                  }
+                                  transition={null}
+                                  width={30}
+                                />
+                              </View>
+                              <View
+                                style={
+                                  {
+                                    "transform": [
+                                      {
+                                        "translateY": 0,
+                                      },
+                                    ],
+                                  }
                                 }
+                              >
+                                <ViewManagerAdapter_ExpoImage
+                                  containerViewRef={"[React.ref]"}
+                                  contentFit="contain"
+                                  contentPosition={
+                                    {
+                                      "left": "50%",
+                                      "top": "50%",
+                                    }
+                                  }
+                                  height={30}
+                                  nativeViewRef={"[React.ref]"}
+                                  onError={[Function]}
+                                  onLoad={[Function]}
+                                  onLoadStart={[Function]}
+                                  onProgress={[Function]}
+                                  placeholder={[]}
+                                  source={
+                                    [
+                                      {
+                                        "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                      },
+                                    ]
+                                  }
+                                  style={
+                                    {
+                                      "height": 30,
+                                      "width": 30,
+                                    }
+                                  }
+                                  transition={null}
+                                  width={30}
+                                />
+                              </View>
+                              <View
                                 style={
                                   {
-                                    "height": 30,
-                                    "width": 30,
+                                    "transform": [
+                                      {
+                                        "translateY": 0,
+                                      },
+                                    ],
                                   }
                                 }
-                                transition={null}
-                                width={30}
-                              />
+                              >
+                                <ViewManagerAdapter_ExpoImage
+                                  containerViewRef={"[React.ref]"}
+                                  contentFit="contain"
+                                  contentPosition={
+                                    {
+                                      "left": "50%",
+                                      "top": "50%",
+                                    }
+                                  }
+                                  height={30}
+                                  nativeViewRef={"[React.ref]"}
+                                  onError={[Function]}
+                                  onLoad={[Function]}
+                                  onLoadStart={[Function]}
+                                  onProgress={[Function]}
+                                  placeholder={[]}
+                                  source={
+                                    [
+                                      {
+                                        "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
+                                      },
+                                    ]
+                                  }
+                                  style={
+                                    {
+                                      "height": 30,
+                                      "width": 30,
+                                    }
+                                  }
+                                  transition={null}
+                                  width={30}
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -30313,20 +33456,20 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r1u:"
+      orderKey=":r1s:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r1u:"
+        orderKey=":r1s:"
       >
         <View
           accessibilityState={
@@ -30359,406 +33502,407 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  🤙:react_rocket:🤙🤙.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="🤙:react_rocket:🤙🤙"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1u:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  :react_rocket:.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=":react_rocket:"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1s:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
-                      }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
-                            },
-                          ]
-                        }
-                        style={
+                        [
                           {
                             "borderRadius": 4,
                             "height": 36,
                             "width": 36,
-                          }
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
+                      }
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={113}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
                         }
-                        transition={null}
-                        width={36}
-                      />
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={114}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-🤙:react_rocket:🤙🤙"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-:react_rocket:"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
-                            <Text
+                            <View
                               style={
                                 {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
+                                  "flexDirection": "row",
                                 }
                               }
                             >
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                  ]
-                                }
-                              >
-                                🤙
-                              </Text>
-                              <Text
-                                accessibilityLabel=":react_rocket:"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                :react_rocket:
-                              </Text>
-                              <Text
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                  ]
+                                  {
+                                    "transform": [
+                                      {
+                                        "translateY": 0,
+                                      },
+                                    ],
+                                  }
                                 }
                               >
-                                🤙
-                              </Text>
-                              <Text
-                                style={
-                                  [
+                                <ViewManagerAdapter_ExpoImage
+                                  containerViewRef={"[React.ref]"}
+                                  contentFit="contain"
+                                  contentPosition={
                                     {
-                                      "color": "#2F343D",
-                                    },
+                                      "left": "50%",
+                                      "top": "50%",
+                                    }
+                                  }
+                                  height={30}
+                                  nativeViewRef={"[React.ref]"}
+                                  onError={[Function]}
+                                  onLoad={[Function]}
+                                  onLoadStart={[Function]}
+                                  onProgress={[Function]}
+                                  placeholder={[]}
+                                  source={
+                                    [
+                                      {
+                                        "uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
+                                      },
+                                    ]
+                                  }
+                                  style={
                                     {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                  ]
-                                }
-                              >
-                                🤙
-                              </Text>
-                            </Text>
-                          </Text>
+                                      "height": 30,
+                                      "width": 30,
+                                    }
+                                  }
+                                  transition={null}
+                                  width={30}
+                                />
+                              </View>
+                            </View>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r1v:"
+      orderKey=":r1t:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r1v:"
+        orderKey=":r1t:"
       >
         <View
           accessibilityState={
@@ -30791,335 +33935,426 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  👊🤙👏.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="👊🤙👏"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1v:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  🤙:react_rocket:.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="🤙:react_rocket:"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1t:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={115}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={116}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-👊🤙👏"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
+                          />
                           <View
                             style={
                               {
+                                "alignItems": "center",
                                 "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
                           >
                             <Text
+                              numberOfLines={1}
                               style={
                                 [
-                                  {
-                                    "color": "#2F343D",
-                                  },
                                   {
                                     "backgroundColor": "transparent",
+                                    "flexShrink": 1,
                                     "fontFamily": "Inter",
-                                    "fontSize": 30,
-                                    "fontWeight": "400",
-                                    "lineHeight": 43,
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
                                     "textAlign": "left",
                                   },
+                                  {
+                                    "color": "#1F2329",
+                                  },
                                 ]
                               }
                             >
-                              👊
+                              diego.mello
                             </Text>
                             <Text
                               style={
                                 [
-                                  {
-                                    "color": "#2F343D",
-                                  },
                                   {
                                     "backgroundColor": "transparent",
                                     "fontFamily": "Inter",
-                                    "fontSize": 30,
+                                    "fontSize": 13,
                                     "fontWeight": "400",
-                                    "lineHeight": 43,
+                                    "lineHeight": 18,
                                     "textAlign": "left",
                                   },
+                                  {
+                                    "color": "#6C727A",
+                                  },
                                 ]
                               }
                             >
-                              🤙👏
+                              10:00 AM
                             </Text>
                           </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-🤙:react_rocket:"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "flexDirection": "row",
+                                }
+                              }
+                            >
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 30,
+                                      "fontWeight": "400",
+                                      "lineHeight": 43,
+                                      "textAlign": "left",
+                                    },
+                                  ]
+                                }
+                              >
+                                🤙
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "transform": [
+                                      {
+                                        "translateY": 0,
+                                      },
+                                    ],
+                                  }
+                                }
+                              >
+                                <ViewManagerAdapter_ExpoImage
+                                  containerViewRef={"[React.ref]"}
+                                  contentFit="contain"
+                                  contentPosition={
+                                    {
+                                      "left": "50%",
+                                      "top": "50%",
+                                    }
+                                  }
+                                  height={30}
+                                  nativeViewRef={"[React.ref]"}
+                                  onError={[Function]}
+                                  onLoad={[Function]}
+                                  onLoadStart={[Function]}
+                                  onProgress={[Function]}
+                                  placeholder={[]}
+                                  source={
+                                    [
+                                      {
+                                        "uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
+                                      },
+                                    ]
+                                  }
+                                  style={
+                                    {
+                                      "height": 30,
+                                      "width": 30,
+                                    }
+                                  }
+                                  transition={null}
+                                  width={30}
+                                />
+                              </View>
+                            </View>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r20:"
+      orderKey=":r1u:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r20:"
+        orderKey=":r1u:"
       >
         <View
           accessibilityState={
@@ -31152,295 +34387,438 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  👏.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="👏"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r20:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  🤙:react_rocket:🤙🤙.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="🤙:react_rocket:🤙🤙"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1u:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={117}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={118}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-👏"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-🤙:react_rocket:🤙🤙"
                         >
                           <View
                             style={
                               {
-                                "flexDirection": "row",
+                                "gap": 2,
                               }
                             }
                           >
                             <Text
                               style={
                                 [
-                                  {
-                                    "color": "#2F343D",
-                                  },
                                   {
                                     "backgroundColor": "transparent",
                                     "fontFamily": "Inter",
-                                    "fontSize": 30,
+                                    "fontSize": 16,
                                     "fontWeight": "400",
-                                    "lineHeight": 43,
+                                    "lineHeight": 22,
                                     "textAlign": "left",
                                   },
+                                  {
+                                    "color": "#2F343D",
+                                  },
                                 ]
                               }
                             >
-                              👏
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  🤙
+                                </Text>
+                                <Text
+                                  accessibilityLabel=":react_rocket:"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  :react_rocket:
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  🤙
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  🤙
+                                </Text>
+                              </Text>
                             </Text>
                           </View>
                         </View>
@@ -31448,20 +34826,33 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r21:"
+      orderKey=":r1v:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r21:"
+        orderKey=":r1v:"
       >
         <View
           accessibilityState={
@@ -31494,414 +34885,380 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  :react_rocket: :nyan_rocket: :marioparty:.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=":react_rocket: :nyan_rocket: :marioparty:"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r21:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  👊🤙👏.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="👊🤙👏"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1v:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={119}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={120}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-:react_rocket: :nyan_rocket: :marioparty:"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-👊🤙👏"
                         >
                           <View
                             style={
                               {
-                                "flexDirection": "row",
+                                "gap": 2,
                               }
                             }
                           >
                             <View
                               style={
-                                [
-                                  {
-                                    "transform": [
-                                      {
-                                        "translateY": 0,
-                                      },
-                                    ],
-                                  },
-                                ]
+                                {
+                                  "flexDirection": "row",
+                                }
                               }
                             >
-                              <ViewManagerAdapter_ExpoImage
-                                containerViewRef={"[React.ref]"}
-                                contentFit="contain"
-                                contentPosition={
-                                  {
-                                    "left": "50%",
-                                    "top": "50%",
-                                  }
-                                }
-                                height={30}
-                                nativeViewRef={"[React.ref]"}
-                                onError={[Function]}
-                                onLoad={[Function]}
-                                onLoadStart={[Function]}
-                                onProgress={[Function]}
-                                placeholder={[]}
-                                source={
+                              <Text
+                                style={
                                   [
                                     {
-                                      "uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
+                                      "color": "#2F343D",
                                     },
-                                  ]
-                                }
-                                style={
-                                  {
-                                    "height": 30,
-                                    "width": 30,
-                                  }
-                                }
-                                transition={null}
-                                width={30}
-                              />
-                            </View>
-                            <View
-                              style={
-                                [
-                                  {
-                                    "transform": [
-                                      {
-                                        "translateY": 0,
-                                      },
-                                    ],
-                                  },
-                                ]
-                              }
-                            >
-                              <ViewManagerAdapter_ExpoImage
-                                containerViewRef={"[React.ref]"}
-                                contentFit="contain"
-                                contentPosition={
-                                  {
-                                    "left": "50%",
-                                    "top": "50%",
-                                  }
-                                }
-                                height={30}
-                                nativeViewRef={"[React.ref]"}
-                                onError={[Function]}
-                                onLoad={[Function]}
-                                onLoadStart={[Function]}
-                                onProgress={[Function]}
-                                placeholder={[]}
-                                source={
-                                  [
                                     {
-                                      "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 30,
+                                      "fontWeight": "400",
+                                      "lineHeight": 43,
+                                      "textAlign": "left",
                                     },
                                   ]
                                 }
+                              >
+                                👊
+                              </Text>
+                              <Text
                                 style={
-                                  {
-                                    "height": 30,
-                                    "width": 30,
-                                  }
-                                }
-                                transition={null}
-                                width={30}
-                              />
-                            </View>
-                            <View
-                              style={
-                                [
-                                  {
-                                    "transform": [
-                                      {
-                                        "translateY": 0,
-                                      },
-                                    ],
-                                  },
-                                ]
-                              }
-                            >
-                              <ViewManagerAdapter_ExpoImage
-                                containerViewRef={"[React.ref]"}
-                                contentFit="contain"
-                                contentPosition={
-                                  {
-                                    "left": "50%",
-                                    "top": "50%",
-                                  }
-                                }
-                                height={30}
-                                nativeViewRef={"[React.ref]"}
-                                onError={[Function]}
-                                onLoad={[Function]}
-                                onLoadStart={[Function]}
-                                onProgress={[Function]}
-                                placeholder={[]}
-                                source={
                                   [
                                     {
-                                      "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
+                                      "color": "#2F343D",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 30,
+                                      "fontWeight": "400",
+                                      "lineHeight": 43,
+                                      "textAlign": "left",
                                     },
                                   ]
                                 }
-                                style={
-                                  {
-                                    "height": 30,
-                                    "width": 30,
-                                  }
-                                }
-                                transition={null}
-                                width={30}
-                              />
+                              >
+                                🤙👏
+                              </Text>
                             </View>
                           </View>
                         </View>
@@ -31909,20 +35266,20 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r22:"
+      orderKey=":r20:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r22:"
+        orderKey=":r20:"
       >
         <View
           accessibilityState={
@@ -31955,322 +35312,361 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  :react_rocket:.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=":react_rocket:"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r22:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  👏.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="👏"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r20:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={121}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={122}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-:react_rocket:"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
+                          />
                           <View
                             style={
                               {
+                                "alignItems": "center",
                                 "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
                           >
-                            <View
+                            <Text
+                              numberOfLines={1}
                               style={
                                 [
                                   {
-                                    "transform": [
-                                      {
-                                        "translateY": 0,
-                                      },
-                                    ],
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
                                   },
                                 ]
                               }
                             >
-                              <ViewManagerAdapter_ExpoImage
-                                containerViewRef={"[React.ref]"}
-                                contentFit="contain"
-                                contentPosition={
-                                  {
-                                    "left": "50%",
-                                    "top": "50%",
-                                  }
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-👏"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "flexDirection": "row",
                                 }
-                                height={30}
-                                nativeViewRef={"[React.ref]"}
-                                onError={[Function]}
-                                onLoad={[Function]}
-                                onLoadStart={[Function]}
-                                onProgress={[Function]}
-                                placeholder={[]}
-                                source={
+                              }
+                            >
+                              <Text
+                                style={
                                   [
                                     {
-                                      "uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
+                                      "color": "#2F343D",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 30,
+                                      "fontWeight": "400",
+                                      "lineHeight": 43,
+                                      "textAlign": "left",
                                     },
                                   ]
                                 }
-                                style={
-                                  {
-                                    "height": 30,
-                                    "width": 30,
-                                  }
-                                }
-                                transition={null}
-                                width={30}
-                              />
+                              >
+                                👏
+                              </Text>
                             </View>
                           </View>
                         </View>
@@ -32278,20 +35674,20 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r23:"
+      orderKey=":r21:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r23:"
+        orderKey=":r21:"
       >
         <View
           accessibilityState={
@@ -32324,341 +35720,474 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  🤙:react_rocket:.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="🤙:react_rocket:"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r23:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  :react_rocket: :nyan_rocket: :marioparty:.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=":react_rocket: :nyan_rocket: :marioparty:"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r21:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={123}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={124}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-🤙:react_rocket:"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
+                          />
                           <View
                             style={
                               {
+                                "alignItems": "center",
                                 "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
                           >
                             <Text
+                              numberOfLines={1}
                               style={
                                 [
-                                  {
-                                    "color": "#2F343D",
-                                  },
                                   {
                                     "backgroundColor": "transparent",
+                                    "flexShrink": 1,
                                     "fontFamily": "Inter",
-                                    "fontSize": 30,
-                                    "fontWeight": "400",
-                                    "lineHeight": 43,
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
                                     "textAlign": "left",
                                   },
+                                  {
+                                    "color": "#1F2329",
+                                  },
                                 ]
                               }
                             >
-                              🤙
+                              diego.mello
                             </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-:react_rocket: :nyan_rocket: :marioparty:"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
                             <View
                               style={
-                                [
+                                {
+                                  "flexDirection": "row",
+                                }
+                              }
+                            >
+                              <View
+                                style={
                                   {
                                     "transform": [
                                       {
                                         "translateY": 0,
                                       },
                                     ],
-                                  },
-                                ]
-                              }
-                            >
-                              <ViewManagerAdapter_ExpoImage
-                                containerViewRef={"[React.ref]"}
-                                contentFit="contain"
-                                contentPosition={
-                                  {
-                                    "left": "50%",
-                                    "top": "50%",
                                   }
                                 }
-                                height={30}
-                                nativeViewRef={"[React.ref]"}
-                                onError={[Function]}
-                                onLoad={[Function]}
-                                onLoadStart={[Function]}
-                                onProgress={[Function]}
-                                placeholder={[]}
-                                source={
-                                  [
+                              >
+                                <ViewManagerAdapter_ExpoImage
+                                  containerViewRef={"[React.ref]"}
+                                  contentFit="contain"
+                                  contentPosition={
                                     {
-                                      "uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
-                                    },
-                                  ]
+                                      "left": "50%",
+                                      "top": "50%",
+                                    }
+                                  }
+                                  height={30}
+                                  nativeViewRef={"[React.ref]"}
+                                  onError={[Function]}
+                                  onLoad={[Function]}
+                                  onLoadStart={[Function]}
+                                  onProgress={[Function]}
+                                  placeholder={[]}
+                                  source={
+                                    [
+                                      {
+                                        "uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
+                                      },
+                                    ]
+                                  }
+                                  style={
+                                    {
+                                      "height": 30,
+                                      "width": 30,
+                                    }
+                                  }
+                                  transition={null}
+                                  width={30}
+                                />
+                              </View>
+                              <View
+                                style={
+                                  {
+                                    "transform": [
+                                      {
+                                        "translateY": 0,
+                                      },
+                                    ],
+                                  }
                                 }
+                              >
+                                <ViewManagerAdapter_ExpoImage
+                                  containerViewRef={"[React.ref]"}
+                                  contentFit="contain"
+                                  contentPosition={
+                                    {
+                                      "left": "50%",
+                                      "top": "50%",
+                                    }
+                                  }
+                                  height={30}
+                                  nativeViewRef={"[React.ref]"}
+                                  onError={[Function]}
+                                  onLoad={[Function]}
+                                  onLoadStart={[Function]}
+                                  onProgress={[Function]}
+                                  placeholder={[]}
+                                  source={
+                                    [
+                                      {
+                                        "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                      },
+                                    ]
+                                  }
+                                  style={
+                                    {
+                                      "height": 30,
+                                      "width": 30,
+                                    }
+                                  }
+                                  transition={null}
+                                  width={30}
+                                />
+                              </View>
+                              <View
                                 style={
                                   {
-                                    "height": 30,
-                                    "width": 30,
+                                    "transform": [
+                                      {
+                                        "translateY": 0,
+                                      },
+                                    ],
                                   }
                                 }
-                                transition={null}
-                                width={30}
-                              />
+                              >
+                                <ViewManagerAdapter_ExpoImage
+                                  containerViewRef={"[React.ref]"}
+                                  contentFit="contain"
+                                  contentPosition={
+                                    {
+                                      "left": "50%",
+                                      "top": "50%",
+                                    }
+                                  }
+                                  height={30}
+                                  nativeViewRef={"[React.ref]"}
+                                  onError={[Function]}
+                                  onLoad={[Function]}
+                                  onLoadStart={[Function]}
+                                  onProgress={[Function]}
+                                  placeholder={[]}
+                                  source={
+                                    [
+                                      {
+                                        "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
+                                      },
+                                    ]
+                                  }
+                                  style={
+                                    {
+                                      "height": 30,
+                                      "width": 30,
+                                    }
+                                  }
+                                  transition={null}
+                                  width={30}
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -32666,20 +36195,20 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r24:"
+      orderKey=":r22:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r24:"
+        orderKey=":r22:"
       >
         <View
           accessibilityState={
@@ -32712,406 +36241,407 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  🤙:react_rocket:🤙🤙.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="🤙:react_rocket:🤙🤙"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r24:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  :react_rocket:.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=":react_rocket:"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r22:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={125}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={126}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-🤙:react_rocket:🤙🤙"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-:react_rocket:"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
-                            <Text
+                            <View
                               style={
                                 {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
+                                  "flexDirection": "row",
                                 }
                               }
                             >
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                  ]
-                                }
-                              >
-                                🤙
-                              </Text>
-                              <Text
-                                accessibilityLabel=":react_rocket:"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                :react_rocket:
-                              </Text>
-                              <Text
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                  ]
+                                  {
+                                    "transform": [
+                                      {
+                                        "translateY": 0,
+                                      },
+                                    ],
+                                  }
                                 }
                               >
-                                🤙
-                              </Text>
-                              <Text
-                                style={
-                                  [
+                                <ViewManagerAdapter_ExpoImage
+                                  containerViewRef={"[React.ref]"}
+                                  contentFit="contain"
+                                  contentPosition={
                                     {
-                                      "color": "#2F343D",
-                                    },
+                                      "left": "50%",
+                                      "top": "50%",
+                                    }
+                                  }
+                                  height={30}
+                                  nativeViewRef={"[React.ref]"}
+                                  onError={[Function]}
+                                  onLoad={[Function]}
+                                  onLoadStart={[Function]}
+                                  onProgress={[Function]}
+                                  placeholder={[]}
+                                  source={
+                                    [
+                                      {
+                                        "uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
+                                      },
+                                    ]
+                                  }
+                                  style={
                                     {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                  ]
-                                }
-                              >
-                                🤙
-                              </Text>
-                            </Text>
-                          </Text>
+                                      "height": 30,
+                                      "width": 30,
+                                    }
+                                  }
+                                  transition={null}
+                                  width={30}
+                                />
+                              </View>
+                            </View>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r25:"
+      orderKey=":r23:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r25:"
+        orderKey=":r23:"
       >
         <View
           accessibilityState={
@@ -33144,407 +36674,426 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r25:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  🤙:react_rocket:.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="🤙:react_rocket:"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r23:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={127}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={128}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={false}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "opacity": 1,
-                              "paddingLeft": 5,
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
-                          }
-                        >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
-                            style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                  "fontSize": 16,
-                                },
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
                                 [
                                   {
-                                    "lineHeight": 16,
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
                                   },
-                                  undefined,
-                                ],
-                                {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
-                                },
-                                {},
-                              ]
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
                             }
-                          >
-                            
-                          </Text>
-                        </View>
+                          }
+                        />
                       </View>
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
-                        testID="message-content-Message"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-🤙:react_rocket:"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
-                            <Text
+                            <View
                               style={
                                 {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
+                                  "flexDirection": "row",
                                 }
                               }
                             >
                               <Text
-                                accessibilityLabel="Message"
                                 style={
                                   [
                                     {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
+                                      "color": "#2F343D",
                                     },
                                     {
-                                      "color": "#2F343D",
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 30,
+                                      "fontWeight": "400",
+                                      "lineHeight": 43,
+                                      "textAlign": "left",
                                     },
                                   ]
                                 }
                               >
-                                Message
+                                🤙
                               </Text>
-                            </Text>
-                          </Text>
+                              <View
+                                style={
+                                  {
+                                    "transform": [
+                                      {
+                                        "translateY": 0,
+                                      },
+                                    ],
+                                  }
+                                }
+                              >
+                                <ViewManagerAdapter_ExpoImage
+                                  containerViewRef={"[React.ref]"}
+                                  contentFit="contain"
+                                  contentPosition={
+                                    {
+                                      "left": "50%",
+                                      "top": "50%",
+                                    }
+                                  }
+                                  height={30}
+                                  nativeViewRef={"[React.ref]"}
+                                  onError={[Function]}
+                                  onLoad={[Function]}
+                                  onLoadStart={[Function]}
+                                  onProgress={[Function]}
+                                  placeholder={[]}
+                                  source={
+                                    [
+                                      {
+                                        "uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
+                                      },
+                                    ]
+                                  }
+                                  style={
+                                    {
+                                      "height": 30,
+                                      "width": 30,
+                                    }
+                                  }
+                                  transition={null}
+                                  width={30}
+                                />
+                              </View>
+                            </View>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r26:"
+      orderKey=":r24:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r26:"
+        orderKey=":r24:"
       >
         <View
           accessibilityState={
@@ -33577,1049 +37126,438 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message Encrypted without Header.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message Encrypted without Header"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r26:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  🤙:react_rocket:🤙🤙.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="🤙:react_rocket:🤙🤙"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r24:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
-                        "flex": 1,
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
                       }
                     }
                   >
                     <View
+                      accessible={true}
                       style={
-                        {
-                          "gap": 4,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <View
-                        testID="message-content-Message Encrypted without Header"
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={129}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
                       >
                         <View
+                          collapsable={false}
                           style={
                             {
-                              "gap": 2,
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
                             }
                           }
-                        >
-                          <Text
-                            style={
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
                                 },
                               ]
                             }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
                               }
-                            >
-                              <Text
-                                accessibilityLabel="Message Encrypted without Header"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Message Encrypted without Header
-                              </Text>
-                            </Text>
-                          </Text>
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
                         </View>
-                      </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                >
                   <View
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={false}
-                    hitSlop={
-                      {
-                        "bottom": 4,
-                        "left": 4,
-                        "right": 4,
-                        "top": 4,
-                      }
-                    }
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
                       {
-                        "opacity": 1,
-                        "paddingLeft": 5,
-                      }
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 16,
-                          },
-                          [
-                            {
-                              "lineHeight": 16,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
+                        "flex": 1,
+                        "marginLeft": 10,
                       }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r27:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r27:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
-        >
-          <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message Encrypted with Reactions.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
-          >
-            <A11yIndexView
-              accessibilityLabel="Message Encrypted with Reactions"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r27:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                >
-                  <View
-                    accessible={true}
-                    style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
+                      onLayout={[Function]}
                       style={
                         {
-                          "opacity": 1,
+                          "flex": 1,
                         }
                       }
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
+                      <View
+                        style={
                           {
-                            "left": "50%",
-                            "top": "50%",
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
                           }
                         }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={130}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={false}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "opacity": 1,
-                              "paddingLeft": 5,
-                            }
-                          }
-                        >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
-                            style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                  "fontSize": 16,
-                                },
-                                [
-                                  {
-                                    "lineHeight": 16,
-                                  },
-                                  undefined,
-                                ],
-                                {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            
-                          </Text>
-                        </View>
-                      </View>
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message Encrypted with Reactions"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          <Text
+                          <View
+                            collapsable={false}
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
                               }
-                            >
-                              <Text
-                                accessibilityLabel="Message Encrypted with Reactions"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Message Encrypted with Reactions
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                            "flexWrap": "wrap",
-                            "gap": 4,
-                          }
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
                             }
-                          }
-                          testID="message-reaction-:joy:"
-                        >
+                          />
                           <View
                             style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
-                                },
-                              ]
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
                           >
                             <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
-                              }
-                            >
-                              😂
-                            </Text>
-                            <Text
+                              numberOfLines={1}
                               style={
                                 [
                                   {
                                     "backgroundColor": "transparent",
+                                    "flexShrink": 1,
                                     "fontFamily": "Inter",
-                                    "fontSize": 14,
+                                    "fontSize": 16,
                                     "fontWeight": "600",
-                                    "lineHeight": 18,
+                                    "lineHeight": 22,
                                     "textAlign": "left",
                                   },
                                   {
-                                    "color": "#1D74F5",
+                                    "color": "#1F2329",
                                   },
                                 ]
                               }
                             >
-                              1
+                              diego.mello
                             </Text>
                           </View>
-                        </View>
+                        </RNGestureHandlerButton>
                         <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
+                          style={
                             {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
+                              "flexDirection": "row",
                             }
                           }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
                             {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
                             {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
                           }
-                          testID="message-reaction-:marioparty:"
+                        }
+                      >
+                        <View
+                          testID="message-content-🤙:react_rocket:🤙🤙"
                         >
                           <View
                             style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
-                            <ViewManagerAdapter_ExpoImage
-                              containerViewRef={"[React.ref]"}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
-                              }
-                              height={19}
-                              nativeViewRef={"[React.ref]"}
-                              onError={[Function]}
-                              onLoad={[Function]}
-                              onLoadStart={[Function]}
-                              onProgress={[Function]}
-                              placeholder={[]}
-                              source={
-                                [
-                                  {
-                                    "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
-                                  },
-                                ]
-                              }
-                              style={
-                                {
-                                  "height": 19,
-                                  "width": 19,
-                                }
-                              }
-                              transition={null}
-                              width={19}
-                            />
                             <Text
                               style={
                                 [
                                   {
                                     "backgroundColor": "transparent",
                                     "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
                                     "textAlign": "left",
                                   },
                                   {
-                                    "color": "#1D74F5",
+                                    "color": "#2F343D",
                                   },
                                 ]
                               }
                             >
-                              1
-                            </Text>
-                          </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-reaction-:thinking:"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
-                              }
-                            >
-                              🤔
-                            </Text>
-                            <Text
-                              style={
-                                [
+                              <Text
+                                style={
                                   {
                                     "backgroundColor": "transparent",
+                                    "flexShrink": 1,
                                     "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
+                                    "fontWeight": "400",
                                     "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#1D74F5",
-                                  },
-                                ]
-                              }
-                            >
-                              1
-                            </Text>
-                          </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#FFFFFF",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-add-reaction"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#CBCED1",
-                                  "height": 28,
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              allowFontScaling={false}
-                              selectable={false}
-                              style={
-                                [
-                                  {
-                                    "color": "#1D74F5",
-                                    "fontSize": 20,
-                                  },
-                                  [
-                                    {
-                                      "lineHeight": 20,
-                                    },
-                                    undefined,
-                                  ],
-                                  {
-                                    "fontFamily": "custom",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "normal",
-                                  },
-                                  {},
-                                ]
-                              }
-                            >
-                              
+                                  }
+                                }
+                              >
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  🤙
+                                </Text>
+                                <Text
+                                  accessibilityLabel=":react_rocket:"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  :react_rocket:
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  🤙
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  🤙
+                                </Text>
+                              </Text>
                             </Text>
                           </View>
                         </View>
@@ -34627,20 +37565,33 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r28:"
+      orderKey=":r25:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r28:"
+        orderKey=":r25:"
       >
         <View
           accessibilityState={
@@ -34673,753 +37624,474 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
                 {
                   "flexDirection": "column",
                   "gap": 8,
                   "paddingHorizontal": 12,
                   "paddingVertical": 4,
                   "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "gap": 10,
-                }
-              }
-              testID="message-thread-replied-on-Thread with emoji :) :joy:"
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#095AD2",
-                        "fontSize": 20,
-                      },
-                      [
-                        {
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <Text
-                accessibilityLabel="Thread with emoji :) 😂"
-                numberOfLines={1}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 22,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#2F343D",
-                      "lineHeight": undefined,
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "flex": 1,
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ]
-                }
-                testID="markdown-preview-Thread with emoji :) 😂"
-              >
-                Thread with emoji :) 😂
-              </Text>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "marginLeft": 4,
-                    "marginRight": 4,
-                  }
                 }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 20,
-                      },
-                      [
-                        {
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-            </View>
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message Thread reply encrypted.  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
               }
+              testID="message-undefined"
             >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
-                }
-              >
-                <View
-                  accessible={true}
-                  style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 20,
-                        "width": 20,
-                      },
-                      undefined,
-                    ]
-                  }
-                  testID="avatar"
-                >
-                  <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      {
-                        "opacity": 1,
-                      }
-                    }
-                  >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
-                        {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={20}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
-                        [
-                          {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                          },
-                        ]
-                      }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 20,
-                          "width": 20,
-                        }
-                      }
-                      transition={null}
-                      width={20}
-                    />
-                  </View>
-                </View>
-              </View>
               <A11yIndexView
-                accessibilityLabel="Thread reply encrypted"
+                accessibilityLabel="Message"
                 importantForAccessibility="yes"
                 orderFocusType={0}
                 orderIndex={2}
-                orderKey=":r28:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
+                orderKey=":r25:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    testID="message-content-Thread reply encrypted"
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
                   >
-                    <Text
-                      accessibilityLabel="Thread reply encrypted"
-                      numberOfLines={1}
+                    <View
+                      accessible={true}
                       style={
                         [
                           {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
                           },
                           {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
+                            "marginTop": 4,
                           },
                         ]
                       }
-                      testID="message-preview-Thread reply encrypted"
-                    >
-                      Thread reply encrypted
-                    </Text>
-                  </View>
-                </View>
-              </A11yIndexView>
-            </View>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r29:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r29:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": true,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
-        >
-          <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Temp message encrypted.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
-          >
-            <A11yIndexView
-              accessibilityLabel="Temp message encrypted"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r29:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                >
-                  <View
-                    accessible={true}
-                    style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
-                      }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={131}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={132}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
                         <View
-                          accessibilityState={
+                          style={
                             {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
+                              "flexDirection": "row",
                             }
                           }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
+                        >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
                             }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={false}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
                             }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "opacity": 1,
-                              "paddingLeft": 5,
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
                             }
-                          }
-                        >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                  "fontSize": 16,
-                                },
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
                                 [
                                   {
-                                    "lineHeight": 16,
+                                    "color": "#2F343D",
+                                    "fontSize": 16,
                                   },
-                                  undefined,
-                                ],
-                                {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            
-                          </Text>
+                                  [
+                                    {
+                                      "lineHeight": 16,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
                         </View>
                       </View>
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
                       <View
                         style={
                           {
-                            "opacity": 0.3,
+                            "gap": 4,
                           }
                         }
-                        testID="message-content-Temp message encrypted"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Temp message encrypted"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Temp message encrypted
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r2a:"
+      orderKey=":r26:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r2a:"
+        orderKey=":r26:"
       >
         <View
           accessibilityState={
@@ -35452,65 +38124,153 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message Edited encrypted.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message Edited encrypted"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r2a:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message Encrypted without Header.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message Encrypted without Header"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r26:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
                         {
-                          "marginTop": 4,
-                        },
-                      ]
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Message Encrypted without Header"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Message Encrypted without Header"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message Encrypted without Header
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
                       accessibilityState={
                         {
                           "busy": undefined,
@@ -35531,7 +38291,17 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                       accessible={true}
                       collapsable={false}
                       focusable={true}
+                      hitSlop={
+                        {
+                          "bottom": 4,
+                          "left": 4,
+                          "right": 4,
+                          "top": 4,
+                        }
+                      }
+                      onBlur={[Function]}
                       onClick={[Function]}
+                      onFocus={[Function]}
                       onResponderGrant={[Function]}
                       onResponderMove={[Function]}
                       onResponderRelease={[Function]}
@@ -35540,786 +38310,1373 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                       onStartShouldSetResponder={[Function]}
                       style={
                         {
-                          "opacity": 1,
+                          "paddingLeft": 5,
                         }
                       }
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <Text
+                        allowFontScaling={false}
+                        selectable={false}
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                              "color": "#2F343D",
+                              "fontSize": 16,
+                            },
+                            [
+                              {
+                                "lineHeight": 16,
                               },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              undefined,
+                            ],
+                            {
+                              "fontFamily": "custom",
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
                             },
+                            {},
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                      >
+                        
+                      </Text>
                     </View>
                   </View>
                 </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r27:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r27:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message Encrypted with Reactions.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
+                }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message Encrypted with Reactions"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r27:"
+              >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  >
+                    <View
+                      accessible={true}
+                      style={
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
+                      }
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={133}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={134}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
                         >
-                          10:00 AM
-                        </Text>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 16,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 16,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
                       >
                         <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={false}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
+                          testID="message-content-Message Encrypted with Reactions"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
                             }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Message Encrypted with Reactions"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message Encrypted with Reactions
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                        <View
                           style={
                             {
-                              "opacity": 1,
-                              "paddingLeft": 5,
+                              "flexDirection": "row",
+                              "flexWrap": "wrap",
+                              "gap": 4,
                             }
                           }
                         >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
                               [
                                 {
-                                  "color": "#2F343D",
-                                  "fontSize": 16,
+                                  "borderRadius": 4,
                                 },
-                                [
-                                  {
-                                    "lineHeight": 16,
-                                  },
-                                  undefined,
-                                ],
                                 {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
+                                  "backgroundColor": "#E4E7EA",
                                 },
-                                {},
                               ]
                             }
+                            testID="message-reaction-:joy:"
                           >
-                            
-                          </Text>
-                        </View>
-                      </View>
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message Edited encrypted"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
+                                }
+                              >
+                                😂
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                1
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
                             }
-                          }
-                        >
-                          <Text
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
+                                  "borderRadius": 4,
                                 },
                                 {
-                                  "color": "#2F343D",
+                                  "backgroundColor": "#E4E7EA",
                                 },
                               ]
                             }
+                            testID="message-reaction-:marioparty:"
                           >
-                            <Text
+                            <View
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
                               }
                             >
+                              <ViewManagerAdapter_ExpoImage
+                                containerViewRef={"[React.ref]"}
+                                contentFit="contain"
+                                contentPosition={
+                                  {
+                                    "left": "50%",
+                                    "top": "50%",
+                                  }
+                                }
+                                height={19}
+                                nativeViewRef={"[React.ref]"}
+                                onError={[Function]}
+                                onLoad={[Function]}
+                                onLoadStart={[Function]}
+                                onProgress={[Function]}
+                                placeholder={[]}
+                                source={
+                                  [
+                                    {
+                                      "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
+                                    },
+                                  ]
+                                }
+                                style={
+                                  {
+                                    "height": 19,
+                                    "width": 19,
+                                  }
+                                }
+                                transition={null}
+                                width={19}
+                              />
                               <Text
-                                accessibilityLabel="Message Edited encrypted"
                                 style={
                                   [
                                     {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
                                     },
                                     {
-                                      "color": "#2F343D",
+                                      "color": "#1D74F5",
                                     },
                                   ]
                                 }
                               >
-                                Message Edited encrypted
+                                1
                               </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#E4E7EA",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:thinking:"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
+                                }
+                              >
+                                🤔
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                1
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#FFFFFF",
+                                },
+                              ]
+                            }
+                            testID="message-add-reaction"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1D74F5",
+                                      "fontSize": 20,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 20,
+                                      },
+                                      undefined,
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
     <A11yOrderView
-      orderKey=":r2b:"
+      orderKey=":r28:"
     >
-      <View
-        accessibilityLabel="diego.mello 10:00:00 AM  This message has error and is encrypted.  "
-        accessible={true}
-        style={
-          {
-            "flexDirection": "column",
-            "gap": 8,
-            "paddingHorizontal": 12,
-            "paddingVertical": 4,
-            "width": "100%",
-          }
-        }
-        testID="message-undefined"
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r28:"
       >
-        <A11yIndexView
-          accessibilityLabel="This message has error and is encrypted"
-          importantForAccessibility="yes"
-          orderFocusType={0}
-          orderIndex={2}
-          orderKey=":r2b:"
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
         >
           <View
-            accessible={true}
-            style={
-              {
-                "flexDirection": "row",
-              }
-            }
+            style={{}}
           >
             <View
               style={
-                {
-                  "alignItems": "flex-end",
-                  "width": 36,
-                }
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
               }
             >
               <View
-                accessible={true}
                 style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 36,
-                      "width": 36,
-                    },
-                    {
-                      "marginTop": 4,
-                    },
-                  ]
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "gap": 10,
+                  }
                 }
-                testID="avatar"
+                testID="message-thread-replied-on-Thread with emoji :) :joy:"
               >
                 <View
-                  accessibilityLabel="diego.mello's avatar"
-                  accessibilityState={
+                  style={
                     {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
+                      "alignItems": "flex-end",
+                      "width": 36,
                     }
                   }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#095AD2",
+                          "fontSize": 20,
+                        },
+                        [
+                          {
+                            "lineHeight": 20,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
                     }
+                  >
+                    
+                  </Text>
+                </View>
+                <Text
+                  accessibilityLabel="Thread with emoji :) 😂"
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#2F343D",
+                        "lineHeight": undefined,
+                      },
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#095AD2",
+                      },
+                    ]
                   }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onClick={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
+                  testID="markdown-preview-Thread with emoji :) 😂"
+                >
+                  Thread with emoji :) 😂
+                </Text>
+                <View
                   style={
                     {
-                      "opacity": 1,
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "marginLeft": 4,
+                      "marginRight": 4,
                     }
                   }
                 >
-                  <ViewManagerAdapter_ExpoImage
-                    borderRadius={4}
-                    containerViewRef={"[React.ref]"}
-                    contentFit="cover"
-                    contentPosition={
-                      {
-                        "left": "50%",
-                        "top": "50%",
-                      }
-                    }
-                    height={36}
-                    nativeViewRef={"[React.ref]"}
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    onLoadStart={[Function]}
-                    onProgress={[Function]}
-                    placeholder={[]}
-                    priority="high"
-                    source={
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "headers": {
-                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          "color": "#6C727A",
+                          "fontSize": 20,
+                        },
+                        [
+                          {
+                            "lineHeight": 20,
                           },
-                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        {},
                       ]
                     }
-                    style={
-                      {
-                        "borderRadius": 4,
-                        "height": 36,
-                        "width": 36,
-                      }
-                    }
-                    transition={null}
-                    width={36}
-                  />
+                  >
+                    
+                  </Text>
                 </View>
               </View>
-            </View>
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "marginLeft": 10,
-                }
-              }
-            >
               <View
-                onLayout={[Function]}
+                accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message Thread reply encrypted.  "
+                accessible={true}
                 style={
-                  {
-                    "flex": 1,
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
                   style={
                     {
-                      "alignItems": "center",
-                      "flex": 1,
-                      "flexDirection": "row",
-                      "justifyContent": "space-between",
+                      "alignItems": "flex-end",
+                      "width": 36,
                     }
                   }
                 >
                   <View
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
                     accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "flexShrink": 1,
-                        "gap": 4,
-                        "opacity": 1,
-                      }
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 20,
+                          "width": 20,
+                        },
+                        undefined,
+                      ]
                     }
-                    testID="username-header-diego.mello"
+                    testID="avatar"
                   >
-                    <Text
-                      numberOfLines={1}
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={135}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
                       style={
                         [
                           {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "600",
-                            "lineHeight": 22,
-                            "textAlign": "left",
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
                           },
                           {
-                            "color": "#1F2329",
+                            "cursor": undefined,
                           },
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      diego.mello
-                    </Text>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
+                      <View
+                        collapsable={false}
+                        style={
                           {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
+                        }
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={20}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 20,
+                              "width": 20,
+                            }
+                          }
+                          transition={null}
+                          width={20}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
+                </View>
+                <A11yIndexView
+                  accessibilityLabel="Thread reply encrypted"
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r28:"
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
                   <View
                     style={
                       {
-                        "flexDirection": "row",
+                        "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={false}
-                      hitSlop={
-                        {
-                          "bottom": 4,
-                          "left": 4,
-                          "right": 4,
-                          "top": 4,
-                        }
-                      }
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                          "paddingLeft": 5,
-                        }
-                      }
-                    >
-                      <Text
-                        allowFontScaling={false}
-                        selectable={false}
-                        style={
-                          [
-                            {
-                              "color": "#2F343D",
-                              "fontSize": 16,
-                            },
-                            [
-                              {
-                                "lineHeight": 16,
-                              },
-                              undefined,
-                            ],
-                            {
-                              "fontFamily": "custom",
-                              "fontStyle": "normal",
-                              "fontWeight": "normal",
-                            },
-                            {},
-                          ]
-                        }
-                      >
-                        
-                      </Text>
-                    </View>
-                    <View
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      hitSlop={
-                        {
-                          "bottom": 4,
-                          "left": 4,
-                          "right": 4,
-                          "top": 4,
-                        }
-                      }
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                          "paddingLeft": 5,
-                        }
-                      }
-                    >
-                      <Text
-                        allowFontScaling={false}
-                        selectable={false}
-                        style={
-                          [
-                            {
-                              "color": "#EC0D2A",
-                              "fontSize": 16,
-                            },
-                            [
-                              {
-                                "lineHeight": 16,
-                              },
-                              undefined,
-                            ],
-                            {
-                              "fontFamily": "custom",
-                              "fontStyle": "normal",
-                              "fontWeight": "normal",
-                            },
-                            {},
-                          ]
-                        }
-                      >
-                        
-                      </Text>
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "gap": 4,
-                    }
-                  }
-                >
-                  <View
-                    testID="message-content-This message has error and is encrypted"
-                  >
-                    <View
-                      style={
-                        {
-                          "gap": 2,
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "lineHeight": 22,
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#2F343D",
-                            },
-                          ]
+                      testID="message-content-Thread reply encrypted"
+                    >
+                      <Text
+                        accessibilityLabel="Thread reply encrypted"
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
                         }
+                        testID="message-preview-Thread reply encrypted"
                       >
-                        <Text
-                          style={
-                            {
-                              "backgroundColor": "transparent",
-                              "flexShrink": 1,
-                              "fontFamily": "Inter",
-                              "fontWeight": "400",
-                              "textAlign": "left",
-                            }
-                          }
-                        >
-                          <Text
-                            accessibilityLabel="This message has error and is encrypted"
-                            style={
-                              [
-                                {
-                                  "flexShrink": 1,
-                                  "fontSize": 16,
-                                  "lineHeight": 22,
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            This message has error and is encrypted
-                          </Text>
-                        </Text>
+                        Thread reply encrypted
                       </Text>
                     </View>
                   </View>
-                </View>
+                </A11yIndexView>
               </View>
             </View>
           </View>
-        </A11yIndexView>
-      </View>
+        </View>
+      </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r2c:"
+      orderKey=":r29:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r2c:"
+        orderKey=":r29:"
       >
         <View
           accessibilityState={
             {
               "busy": undefined,
               "checked": undefined,
-              "disabled": false,
+              "disabled": true,
               "expanded": undefined,
               "selected": undefined,
             }
@@ -36334,7 +39691,7 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
           }
           accessible={true}
           collapsable={false}
-          focusable={true}
+          focusable={false}
           onClick={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
@@ -36345,437 +39702,479 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Read Receipt encrypted with Header.  Message was read"
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Read Receipt encrypted with Header"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r2c:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Temp message encrypted.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Temp message encrypted"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r29:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={136}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={137}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
                         >
-                          10:00 AM
-                        </Text>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 16,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 16,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
                       >
                         <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={false}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
                           style={
                             {
-                              "opacity": 1,
-                              "paddingLeft": 5,
+                              "opacity": 0.3,
                             }
                           }
+                          testID="message-content-Temp message encrypted"
                         >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
+                          <View
                             style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                  "fontSize": 16,
-                                },
-                                [
-                                  {
-                                    "lineHeight": 16,
-                                  },
-                                  undefined,
-                                ],
-                                {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            
-                          </Text>
-                        </View>
-                        <Text
-                          allowFontScaling={false}
-                          selectable={false}
-                          style={
-                            [
-                              {
-                                "color": "#095AD2",
-                                "fontSize": 25,
-                              },
-                              [
-                                {
-                                  "lineHeight": 25,
-                                },
-                                {
-                                  "marginTop": -5,
-                                  "paddingLeft": 5,
-                                },
-                              ],
                               {
-                                "fontFamily": "custom",
-                                "fontStyle": "normal",
-                                "fontWeight": "normal",
-                              },
-                              {},
-                            ]
-                          }
-                          testID="read-receipt-read"
-                        >
-                          
-                        </Text>
-                      </View>
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Read Receipt encrypted with Header"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Read Receipt encrypted with Header"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Read Receipt encrypted with Header
+                                <Text
+                                  accessibilityLabel="Temp message encrypted"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Temp message encrypted
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r2d:"
+      orderKey=":r2a:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r2d:"
+        orderKey=":r2a:"
       >
         <View
           accessibilityState={
@@ -36808,950 +40207,988 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Read Receipt encrypted without Header.  Message was read"
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Read Receipt encrypted without Header"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r2d:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message Edited encrypted.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message Edited encrypted"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r2a:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
-                        "flex": 1,
+                        "alignItems": "flex-end",
+                        "width": 36,
                       }
                     }
                   >
                     <View
+                      accessible={true}
                       style={
-                        {
-                          "gap": 4,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <View
-                        testID="message-content-Read Receipt encrypted without Header"
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={138}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
                       >
                         <View
+                          collapsable={false}
                           style={
                             {
-                              "gap": 2,
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
                             }
                           }
-                        >
-                          <Text
-                            style={
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
                                 },
                               ]
                             }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
                               }
-                            >
-                              <Text
-                                accessibilityLabel="Read Receipt encrypted without Header"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Read Receipt encrypted without Header
-                              </Text>
-                            </Text>
-                          </Text>
+                            }
+                            transition={null}
+                            width={36}
+                          />
                         </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                >
-                  <View
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={false}
-                    hitSlop={
-                      {
-                        "bottom": 4,
-                        "left": 4,
-                        "right": 4,
-                        "top": 4,
-                      }
-                    }
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      {
-                        "opacity": 1,
-                        "paddingLeft": 5,
-                      }
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 16,
-                          },
-                          [
-                            {
-                              "lineHeight": 16,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#095AD2",
-                          "fontSize": 25,
-                        },
-                        [
-                          {
-                            "lineHeight": 25,
-                          },
-                          {
-                            "marginTop": -5,
-                            "paddingLeft": 5,
-                          },
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                    testID="read-receipt-read"
-                  >
-                    
-                  </Text>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
-    <A11yOrderView
-      orderKey=":r2e:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r2e:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
-        >
-          <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
-          >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r2e:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                >
-                  <View
-                    accessible={true}
-                    style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
-                      }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
-                          }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={139}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={false}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
                           style={
                             {
-                              "opacity": 1,
-                              "paddingLeft": 5,
+                              "flexDirection": "row",
                             }
                           }
                         >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                  "fontSize": 20.8,
-                                },
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
                                 [
                                   {
-                                    "lineHeight": 20.8,
+                                    "color": "#2F343D",
+                                    "fontSize": 16,
                                   },
-                                  undefined,
-                                ],
-                                {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            
-                          </Text>
+                                  [
+                                    {
+                                      "lineHeight": 16,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
                         </View>
                       </View>
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
+                      <View
+                        style={
                           {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                            "gap": 4,
+                          }
                         }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message Edited encrypted"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message
+                                <Text
+                                  accessibilityLabel="Message Edited encrypted"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message Edited encrypted
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r2f:"
+      orderKey=":r2b:"
     >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r2f:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
+      <View
+        accessibilityLabel="diego.mello 10:00:00 AM  This message has error and is encrypted.  "
+        accessible={true}
+        style={
+          {
+            "flexDirection": "column",
+            "gap": 8,
+            "paddingHorizontal": 12,
+            "paddingVertical": 4,
+            "width": "100%",
           }
+        }
+        testID="message-undefined"
+      >
+        <A11yIndexView
+          accessibilityLabel="This message has error and is encrypted"
+          importantForAccessibility="yes"
+          orderFocusType={0}
+          orderIndex={2}
+          orderKey=":r2b:"
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message Encrypted without Header.  "
             accessible={true}
             style={
               {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
+                "flexDirection": "row",
               }
             }
-            testID="message-undefined"
           >
-            <A11yIndexView
-              accessibilityLabel="Message Encrypted without Header"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r2f:"
+            <View
+              style={
+                {
+                  "alignItems": "flex-end",
+                  "width": 36,
+                }
+              }
             >
               <View
                 accessible={true}
                 style={
-                  {
-                    "flexDirection": "row",
-                  }
+                  [
+                    {
+                      "borderRadius": 4,
+                      "height": 36,
+                      "width": 36,
+                    },
+                    {
+                      "marginTop": 4,
+                    },
+                  ]
                 }
+                testID="avatar"
               >
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                />
-                <View
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={140}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#E4E7EA"
                   style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
+                    [
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "cursor": undefined,
+                      },
+                    ]
                   }
+                  underlayColor="#E4E7EA"
                 >
                   <View
-                    onLayout={[Function]}
+                    collapsable={false}
                     style={
                       {
-                        "flex": 1,
+                        "backgroundColor": "#E4E7EA",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
                       }
                     }
+                  />
+                  <View
+                    accessibilityLabel="diego.mello's avatar"
+                    accessible={true}
+                    style={{}}
                   >
-                    <View
+                    <ViewManagerAdapter_ExpoImage
+                      borderRadius={4}
+                      containerViewRef={"[React.ref]"}
+                      contentFit="cover"
+                      contentPosition={
+                        {
+                          "left": "50%",
+                          "top": "50%",
+                        }
+                      }
+                      height={36}
+                      nativeViewRef={"[React.ref]"}
+                      onError={[Function]}
+                      onLoad={[Function]}
+                      onLoadStart={[Function]}
+                      onProgress={[Function]}
+                      placeholder={[]}
+                      priority="high"
+                      source={
+                        [
+                          {
+                            "headers": {
+                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                            },
+                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                          },
+                        ]
+                      }
                       style={
                         {
-                          "gap": 4,
+                          "borderRadius": 4,
+                          "height": 36,
+                          "width": 36,
                         }
                       }
-                    >
-                      <View
-                        testID="message-content-Message Encrypted without Header"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Message Encrypted without Header"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Message Encrypted without Header
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
-                    </View>
+                      transition={null}
+                      width={36}
+                    />
                   </View>
-                </View>
+                </RNGestureHandlerButton>
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "flex": 1,
+                  "marginLeft": 10,
+                }
+              }
+            >
+              <View
+                onLayout={[Function]}
+                style={
+                  {
+                    "flex": 1,
+                  }
+                }
+              >
                 <View
                   style={
                     {
+                      "alignItems": "center",
+                      "flex": 1,
                       "flexDirection": "row",
+                      "justifyContent": "space-between",
                     }
                   }
                 >
-                  <View
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
+                  <RNGestureHandlerButton
+                    activeOpacity={1}
                     collapsable={false}
-                    focusable={false}
-                    hitSlop={
-                      {
-                        "bottom": 4,
-                        "left": 4,
-                        "right": 4,
-                        "top": 4,
-                      }
-                    }
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
+                    delayLongPress={600}
+                    enabled={true}
+                    handlerTag={141}
+                    handlerType="NativeViewGestureHandler"
+                    innerRef={null}
+                    onActiveStateChange={[Function]}
+                    onGestureHandlerEvent={[Function]}
+                    onGestureHandlerStateChange={[Function]}
+                    onPress={[Function]}
+                    rippleColor="#E4E7EA"
                     style={
-                      {
-                        "opacity": 1,
-                        "paddingLeft": 5,
-                      }
+                      [
+                        {
+                          "backgroundColor": undefined,
+                          "borderRadius": undefined,
+                          "margin": undefined,
+                          "marginBottom": undefined,
+                          "marginEnd": undefined,
+                          "marginHorizontal": undefined,
+                          "marginLeft": undefined,
+                          "marginRight": undefined,
+                          "marginStart": undefined,
+                          "marginTop": undefined,
+                          "marginVertical": undefined,
+                        },
+                        {
+                          "cursor": undefined,
+                        },
+                      ]
                     }
+                    testID="username-header-diego.mello"
+                    underlayColor="#E4E7EA"
                   >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
+                    <View
+                      collapsable={false}
                       style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 20.8,
-                          },
-                          [
-                            {
-                              "lineHeight": 20.8,
+                        {
+                          "backgroundColor": "#E4E7EA",
+                          "borderBottomLeftRadius": undefined,
+                          "borderBottomRightRadius": undefined,
+                          "borderRadius": undefined,
+                          "borderTopLeftRadius": undefined,
+                          "borderTopRightRadius": undefined,
+                          "bottom": 0,
+                          "left": 0,
+                          "opacity": 0,
+                          "position": "absolute",
+                          "right": 0,
+                          "top": 0,
+                        }
+                      }
+                    />
+                    <View
+                      style={
+                        {
+                          "alignItems": "center",
+                          "flexDirection": "row",
+                          "flexShrink": 1,
+                          "gap": 4,
+                        }
+                      }
+                    >
+                      <Text
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "flexShrink": 1,
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "600",
+                              "lineHeight": 22,
+                              "textAlign": "left",
                             },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
+                            {
+                              "color": "#1F2329",
+                            },
+                          ]
+                        }
+                      >
+                        diego.mello
+                      </Text>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                    </View>
+                  </RNGestureHandlerButton>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      collapsable={false}
+                      focusable={true}
+                      hitSlop={
+                        {
+                          "bottom": 4,
+                          "left": 4,
+                          "right": 4,
+                          "top": 4,
+                        }
+                      }
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        {
+                          "paddingLeft": 5,
+                        }
                       }
                     >
-                      
-                    </Text>
+                      <Text
+                        allowFontScaling={false}
+                        selectable={false}
+                        style={
+                          [
+                            {
+                              "color": "#2F343D",
+                              "fontSize": 16,
+                            },
+                            [
+                              {
+                                "lineHeight": 16,
+                              },
+                              undefined,
+                            ],
+                            {
+                              "fontFamily": "custom",
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
+                            },
+                            {},
+                          ]
+                        }
+                      >
+                        
+                      </Text>
+                    </View>
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      collapsable={false}
+                      focusable={true}
+                      hitSlop={
+                        {
+                          "bottom": 4,
+                          "left": 4,
+                          "right": 4,
+                          "top": 4,
+                        }
+                      }
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        {
+                          "paddingLeft": 5,
+                        }
+                      }
+                    >
+                      <Text
+                        allowFontScaling={false}
+                        selectable={false}
+                        style={
+                          [
+                            {
+                              "color": "#EC0D2A",
+                              "fontSize": 16,
+                            },
+                            [
+                              {
+                                "lineHeight": 16,
+                              },
+                              undefined,
+                            ],
+                            {
+                              "fontFamily": "custom",
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
+                            },
+                            {},
+                          ]
+                        }
+                      >
+                        
+                      </Text>
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "gap": 4,
+                    }
+                  }
+                >
+                  <View
+                    testID="message-content-This message has error and is encrypted"
+                  >
+                    <View
+                      style={
+                        {
+                          "gap": 2,
+                        }
+                      }
+                    >
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                            },
+                          ]
+                        }
+                      >
+                        <Text
+                          style={
+                            {
+                              "backgroundColor": "transparent",
+                              "flexShrink": 1,
+                              "fontFamily": "Inter",
+                              "fontWeight": "400",
+                              "textAlign": "left",
+                            }
+                          }
+                        >
+                          <Text
+                            accessibilityLabel="This message has error and is encrypted"
+                            style={
+                              [
+                                {
+                                  "flexShrink": 1,
+                                  "fontSize": 16,
+                                  "lineHeight": 22,
+                                },
+                                {
+                                  "color": "#2F343D",
+                                },
+                              ]
+                            }
+                          >
+                            This message has error and is encrypted
+                          </Text>
+                        </Text>
+                      </Text>
+                    </View>
                   </View>
                 </View>
               </View>
-            </A11yIndexView>
+            </View>
           </View>
-        </View>
-      </A11yIndexView>
+        </A11yIndexView>
+      </View>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r2g:"
+      orderKey=":r2c:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r2g:"
+        orderKey=":r2c:"
       >
         <View
           accessibilityState={
@@ -37784,290 +41221,405 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message Encrypted with Reactions.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message Encrypted with Reactions"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r2g:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Read Receipt encrypted with Header.  Message was read"
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Read Receipt encrypted with Header"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r2c:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={142}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={143}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={false}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
                           style={
                             {
-                              "opacity": 1,
-                              "paddingLeft": 5,
+                              "flexDirection": "row",
                             }
                           }
                         >
-                          <Text
-                            allowFontScaling={false}
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 16,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 16,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                          <Text
+                            allowFontScaling={false}
                             selectable={false}
                             style={
                               [
                                 {
-                                  "color": "#2F343D",
-                                  "fontSize": 20.8,
+                                  "color": "#095AD2",
+                                  "fontSize": 25,
                                 },
                                 [
                                   {
-                                    "lineHeight": 20.8,
+                                    "lineHeight": 25,
+                                  },
+                                  {
+                                    "marginTop": -5,
+                                    "paddingLeft": 5,
                                   },
-                                  undefined,
                                 ],
                                 {
                                   "fontFamily": "custom",
@@ -38077,506 +41629,75 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                                 {},
                               ]
                             }
+                            testID="read-receipt-read"
                           >
-                            
-                          </Text>
-                        </View>
-                      </View>
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message Encrypted with Reactions"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Message Encrypted with Reactions"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Message Encrypted with Reactions
-                              </Text>
-                            </Text>
+                            
                           </Text>
                         </View>
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
-                            "flexWrap": "wrap",
                             "gap": 4,
                           }
                         }
                       >
                         <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-reaction-:joy:"
+                          testID="message-content-Read Receipt encrypted with Header"
                         >
                           <View
                             style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
-                              }
-                            >
-                              😂
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#1D74F5",
-                                  },
-                                ]
+                              {
+                                "gap": 2,
                               }
-                            >
-                              1
-                            </Text>
-                          </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-reaction-:marioparty:"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
-                                },
-                              ]
                             }
                           >
-                            <ViewManagerAdapter_ExpoImage
-                              containerViewRef={"[React.ref]"}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
-                              }
-                              height={19}
-                              nativeViewRef={"[React.ref]"}
-                              onError={[Function]}
-                              onLoad={[Function]}
-                              onLoadStart={[Function]}
-                              onProgress={[Function]}
-                              placeholder={[]}
-                              source={
-                                [
-                                  {
-                                    "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
-                                  },
-                                ]
-                              }
-                              style={
-                                {
-                                  "height": 19,
-                                  "width": 19,
-                                }
-                              }
-                              transition={null}
-                              width={19}
-                            />
                             <Text
                               style={
                                 [
                                   {
                                     "backgroundColor": "transparent",
                                     "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
                                     "textAlign": "left",
                                   },
                                   {
-                                    "color": "#1D74F5",
+                                    "color": "#2F343D",
                                   },
                                 ]
                               }
                             >
-                              1
-                            </Text>
-                          </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-reaction-:thinking:"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
-                              }
-                            >
-                              🤔
-                            </Text>
-                            <Text
-                              style={
-                                [
+                              <Text
+                                style={
                                   {
                                     "backgroundColor": "transparent",
+                                    "flexShrink": 1,
                                     "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
+                                    "fontWeight": "400",
                                     "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#1D74F5",
-                                  },
-                                ]
-                              }
-                            >
-                              1
-                            </Text>
-                          </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#FFFFFF",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-add-reaction"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#CBCED1",
-                                  "height": 28,
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              allowFontScaling={false}
-                              selectable={false}
-                              style={
-                                [
-                                  {
-                                    "color": "#1D74F5",
-                                    "fontSize": 26,
-                                  },
-                                  [
-                                    {
-                                      "lineHeight": 26,
-                                    },
-                                    undefined,
-                                  ],
-                                  {
-                                    "fontFamily": "custom",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "normal",
-                                  },
-                                  {},
-                                ]
-                              }
-                            >
-                              
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Read Receipt encrypted with Header"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Read Receipt encrypted with Header
+                                </Text>
+                              </Text>
                             </Text>
                           </View>
                         </View>
@@ -38584,20 +41705,20 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r2h:"
+      orderKey=":r2d:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r2h:"
+        orderKey=":r2d:"
       >
         <View
           accessibilityState={
@@ -38630,298 +41751,252 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Read Receipt encrypted without Header.  Message was read"
+              accessible={true}
+              style={
                 {
                   "flexDirection": "column",
                   "gap": 8,
                   "paddingHorizontal": 12,
                   "paddingVertical": 4,
                   "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "gap": 10,
                 }
               }
-              testID="message-thread-replied-on-Thread with emoji :) :joy:"
+              testID="message-undefined"
             >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#095AD2",
-                        "fontSize": 26,
-                      },
-                      [
-                        {
-                          "lineHeight": 26,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <Text
-                accessibilityLabel="Thread with emoji :) 😂"
-                numberOfLines={1}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 22,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#2F343D",
-                      "lineHeight": undefined,
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "flex": 1,
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ]
-                }
-                testID="markdown-preview-Thread with emoji :) 😂"
-              >
-                Thread with emoji :) 😂
-              </Text>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "marginLeft": 4,
-                    "marginRight": 4,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 26,
-                      },
-                      [
-                        {
-                          "lineHeight": 26,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-            </View>
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message Thread reply encrypted.  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
-                  }
-                }
+              <A11yIndexView
+                accessibilityLabel="Read Receipt encrypted without Header"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r2d:"
               >
                 <View
                   accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 26,
-                        "width": 26,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "flexDirection": "row",
+                    }
                   }
-                  testID="avatar"
                 >
                   <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
+                    style={
                       {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
+                        "alignItems": "flex-end",
+                        "width": 36,
                       }
                     }
-                    accessibilityValue={
+                  />
+                  <View
+                    style={
                       {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
+                        "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
+                        {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Read Receipt encrypted without Header"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Read Receipt encrypted without Header"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Read Receipt encrypted without Header
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                  <View
                     style={
                       {
-                        "opacity": 1,
+                        "flexDirection": "row",
                       }
                     }
                   >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
+                    <View
+                      accessibilityState={
                         {
-                          "left": "50%",
-                          "top": "50%",
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
                         }
                       }
-                      height={26}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
-                        [
-                          {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                          },
-                        ]
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      collapsable={false}
+                      focusable={true}
+                      hitSlop={
+                        {
+                          "bottom": 4,
+                          "left": 4,
+                          "right": 4,
+                          "top": 4,
+                        }
                       }
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
                       style={
                         {
-                          "borderRadius": 4,
-                          "height": 26,
-                          "width": 26,
+                          "paddingLeft": 5,
                         }
                       }
-                      transition={null}
-                      width={26}
-                    />
-                  </View>
-                </View>
-              </View>
-              <A11yIndexView
-                accessibilityLabel="Thread reply encrypted"
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r2h:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    testID="message-content-Thread reply encrypted"
-                  >
+                    >
+                      <Text
+                        allowFontScaling={false}
+                        selectable={false}
+                        style={
+                          [
+                            {
+                              "color": "#2F343D",
+                              "fontSize": 16,
+                            },
+                            [
+                              {
+                                "lineHeight": 16,
+                              },
+                              undefined,
+                            ],
+                            {
+                              "fontFamily": "custom",
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
+                            },
+                            {},
+                          ]
+                        }
+                      >
+                        
+                      </Text>
+                    </View>
                     <Text
-                      accessibilityLabel="Thread reply encrypted"
-                      numberOfLines={1}
+                      allowFontScaling={false}
+                      selectable={false}
                       style={
                         [
                           {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
+                            "color": "#095AD2",
+                            "fontSize": 25,
                           },
+                          [
+                            {
+                              "lineHeight": 25,
+                            },
+                            {
+                              "marginTop": -5,
+                              "paddingLeft": 5,
+                            },
+                          ],
                           {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
                           },
+                          {},
                         ]
                       }
-                      testID="message-preview-Thread reply encrypted"
+                      testID="read-receipt-read"
                     >
-                      Thread reply encrypted
+                      
                     </Text>
                   </View>
                 </View>
@@ -38931,21 +42006,34 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r2i:"
+      orderKey=":r2e:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r2i:"
+        orderKey=":r2e:"
       >
         <View
           accessibilityState={
             {
               "busy": undefined,
               "checked": undefined,
-              "disabled": true,
+              "disabled": false,
               "expanded": undefined,
               "selected": undefined,
             }
@@ -38960,7 +42048,7 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
           }
           accessible={true}
           collapsable={false}
-          focusable={false}
+          focusable={true}
           onClick={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
@@ -38971,412 +42059,474 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Temp message encrypted.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Temp message encrypted"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r2i:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r2e:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={144}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={145}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={false}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
                           style={
                             {
-                              "opacity": 1,
-                              "paddingLeft": 5,
+                              "flexDirection": "row",
                             }
                           }
                         >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                  "fontSize": 20.8,
-                                },
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
                                 [
                                   {
-                                    "lineHeight": 20.8,
+                                    "color": "#2F343D",
+                                    "fontSize": 20.8,
                                   },
-                                  undefined,
-                                ],
-                                {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            
-                          </Text>
+                                  [
+                                    {
+                                      "lineHeight": 20.8,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
                         </View>
                       </View>
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "opacity": 0.3,
+                            "gap": 4,
                           }
                         }
-                        testID="message-content-Temp message encrypted"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Temp message encrypted"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Temp message encrypted
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r2j:"
+      orderKey=":r2f:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r2j:"
+        orderKey=":r2f:"
       >
         <View
           accessibilityState={
@@ -39409,65 +42559,153 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message Edited encrypted.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message Edited encrypted"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r2j:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message Encrypted without Header.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message Encrypted without Header"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r2f:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
+                  />
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
                         {
-                          "marginTop": 4,
-                        },
-                      ]
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Message Encrypted without Header"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Message Encrypted without Header"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message Encrypted without Header
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
                       accessibilityState={
                         {
                           "busy": undefined,
@@ -39488,7 +42726,17 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                       accessible={true}
                       collapsable={false}
                       focusable={true}
+                      hitSlop={
+                        {
+                          "bottom": 4,
+                          "left": 4,
+                          "right": 4,
+                          "top": 4,
+                        }
+                      }
+                      onBlur={[Function]}
                       onClick={[Function]}
+                      onFocus={[Function]}
                       onResponderGrant={[Function]}
                       onResponderMove={[Function]}
                       onResponderRelease={[Function]}
@@ -39497,716 +42745,1329 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                       onStartShouldSetResponder={[Function]}
                       style={
                         {
-                          "opacity": 1,
+                          "paddingLeft": 5,
                         }
                       }
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <Text
+                        allowFontScaling={false}
+                        selectable={false}
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                              "color": "#2F343D",
+                              "fontSize": 20.8,
+                            },
+                            [
+                              {
+                                "lineHeight": 20.8,
                               },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              undefined,
+                            ],
+                            {
+                              "fontFamily": "custom",
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
                             },
+                            {},
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
-                          }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                      >
+                        
+                      </Text>
                     </View>
                   </View>
                 </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r2g:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r2g:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message Encrypted with Reactions.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
+                }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message Encrypted with Reactions"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r2g:"
+              >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
-                        "flex": 1,
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
                       }
                     }
                   >
                     <View
+                      accessible={true}
                       style={
-                        {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
+                        [
                           {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
                           {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
+                            "marginTop": 4,
+                          },
+                        ]
+                      }
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={146}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
+                        {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={147}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 20.8,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 20.8,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
                       >
                         <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={false}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
+                          testID="message-content-Message Encrypted with Reactions"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
                             }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Message Encrypted with Reactions"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message Encrypted with Reactions
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                        <View
                           style={
                             {
-                              "opacity": 1,
-                              "paddingLeft": 5,
+                              "flexDirection": "row",
+                              "flexWrap": "wrap",
+                              "gap": 4,
                             }
                           }
                         >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
                               [
                                 {
-                                  "color": "#2F343D",
-                                  "fontSize": 20.8,
+                                  "borderRadius": 4,
                                 },
-                                [
-                                  {
-                                    "lineHeight": 20.8,
-                                  },
-                                  undefined,
-                                ],
                                 {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
+                                  "backgroundColor": "#E4E7EA",
                                 },
-                                {},
                               ]
                             }
+                            testID="message-reaction-:joy:"
                           >
-                            
-                          </Text>
-                        </View>
-                      </View>
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message Edited encrypted"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
+                                }
+                              >
+                                😂
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                1
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
                             }
-                          }
-                        >
-                          <Text
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
+                                  "borderRadius": 4,
                                 },
                                 {
-                                  "color": "#2F343D",
+                                  "backgroundColor": "#E4E7EA",
                                 },
                               ]
                             }
+                            testID="message-reaction-:marioparty:"
                           >
-                            <Text
+                            <View
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
                               }
                             >
+                              <ViewManagerAdapter_ExpoImage
+                                containerViewRef={"[React.ref]"}
+                                contentFit="contain"
+                                contentPosition={
+                                  {
+                                    "left": "50%",
+                                    "top": "50%",
+                                  }
+                                }
+                                height={19}
+                                nativeViewRef={"[React.ref]"}
+                                onError={[Function]}
+                                onLoad={[Function]}
+                                onLoadStart={[Function]}
+                                onProgress={[Function]}
+                                placeholder={[]}
+                                source={
+                                  [
+                                    {
+                                      "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
+                                    },
+                                  ]
+                                }
+                                style={
+                                  {
+                                    "height": 19,
+                                    "width": 19,
+                                  }
+                                }
+                                transition={null}
+                                width={19}
+                              />
                               <Text
-                                accessibilityLabel="Message Edited encrypted"
                                 style={
                                   [
                                     {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
                                     },
                                     {
-                                      "color": "#2F343D",
+                                      "color": "#1D74F5",
                                     },
                                   ]
                                 }
                               >
-                                Message Edited encrypted
+                                1
                               </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r2k:"
-    >
-      <View
-        accessibilityLabel="diego.mello 10:00:00 AM  This message has error and is encrypted.  "
-        accessible={true}
-        style={
-          {
-            "flexDirection": "column",
-            "gap": 8,
-            "paddingHorizontal": 12,
-            "paddingVertical": 4,
-            "width": "100%",
-          }
-        }
-        testID="message-undefined"
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#E4E7EA",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:thinking:"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
+                                }
+                              >
+                                🤔
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                1
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#FFFFFF",
+                                },
+                              ]
+                            }
+                            testID="message-add-reaction"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1D74F5",
+                                      "fontSize": 26,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 26,
+                                      },
+                                      undefined,
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r2h:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r2h:"
       >
-        <A11yIndexView
-          accessibilityLabel="This message has error and is encrypted"
-          importantForAccessibility="yes"
-          orderFocusType={0}
-          orderIndex={2}
-          orderKey=":r2k:"
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
         >
           <View
-            accessible={true}
-            style={
-              {
-                "flexDirection": "row",
-              }
-            }
+            style={{}}
           >
             <View
               style={
-                {
-                  "alignItems": "flex-end",
-                  "width": 46.800000000000004,
-                }
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
               }
             >
               <View
-                accessible={true}
                 style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 46.800000000000004,
-                      "width": 46.800000000000004,
-                    },
-                    {
-                      "marginTop": 4,
-                    },
-                  ]
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "gap": 10,
+                  }
                 }
-                testID="avatar"
+                testID="message-thread-replied-on-Thread with emoji :) :joy:"
               >
                 <View
-                  accessibilityLabel="diego.mello's avatar"
-                  accessibilityState={
+                  style={
                     {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
+                      "alignItems": "flex-end",
+                      "width": 46.800000000000004,
                     }
                   }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#095AD2",
+                          "fontSize": 26,
+                        },
+                        [
+                          {
+                            "lineHeight": 26,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
                     }
+                  >
+                    
+                  </Text>
+                </View>
+                <Text
+                  accessibilityLabel="Thread with emoji :) 😂"
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#2F343D",
+                        "lineHeight": undefined,
+                      },
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#095AD2",
+                      },
+                    ]
                   }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onClick={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
+                  testID="markdown-preview-Thread with emoji :) 😂"
+                >
+                  Thread with emoji :) 😂
+                </Text>
+                <View
                   style={
                     {
-                      "opacity": 1,
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "marginLeft": 4,
+                      "marginRight": 4,
                     }
                   }
                 >
-                  <ViewManagerAdapter_ExpoImage
-                    borderRadius={4}
-                    containerViewRef={"[React.ref]"}
-                    contentFit="cover"
-                    contentPosition={
-                      {
-                        "left": "50%",
-                        "top": "50%",
-                      }
-                    }
-                    height={46.800000000000004}
-                    nativeViewRef={"[React.ref]"}
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    onLoadStart={[Function]}
-                    onProgress={[Function]}
-                    placeholder={[]}
-                    priority="high"
-                    source={
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "headers": {
-                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          "color": "#6C727A",
+                          "fontSize": 26,
+                        },
+                        [
+                          {
+                            "lineHeight": 26,
                           },
-                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        {},
                       ]
                     }
-                    style={
-                      {
-                        "borderRadius": 4,
-                        "height": 46.800000000000004,
-                        "width": 46.800000000000004,
-                      }
-                    }
-                    transition={null}
-                    width={46.800000000000004}
-                  />
+                  >
+                    
+                  </Text>
                 </View>
               </View>
-            </View>
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "marginLeft": 10,
-                }
-              }
-            >
               <View
-                onLayout={[Function]}
+                accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message Thread reply encrypted.  "
+                accessible={true}
                 style={
-                  {
-                    "flex": 1,
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
                   style={
                     {
-                      "alignItems": "center",
-                      "flex": 1,
-                      "flexDirection": "row",
-                      "justifyContent": "space-between",
+                      "alignItems": "flex-end",
+                      "width": 46.800000000000004,
                     }
                   }
                 >
                   <View
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
                     accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "flexShrink": 1,
-                        "gap": 4,
-                        "opacity": 1,
-                      }
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 26,
+                          "width": 26,
+                        },
+                        undefined,
+                      ]
                     }
-                    testID="username-header-diego.mello"
+                    testID="avatar"
                   >
-                    <Text
-                      numberOfLines={1}
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={148}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
                       style={
                         [
                           {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "600",
-                            "lineHeight": 22,
-                            "textAlign": "left",
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
                           },
                           {
-                            "color": "#1F2329",
+                            "cursor": undefined,
                           },
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      diego.mello
-                    </Text>
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
+                        }
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={26}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 26,
+                              "width": 26,
+                            }
+                          }
+                          transition={null}
+                          width={26}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
+                </View>
+                <A11yIndexView
+                  accessibilityLabel="Thread reply encrypted"
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r2h:"
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
                   <View
                     style={
                       {
-                        "flexDirection": "row",
+                        "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={false}
-                      hitSlop={
-                        {
-                          "bottom": 4,
-                          "left": 4,
-                          "right": 4,
-                          "top": 4,
-                        }
-                      }
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                          "paddingLeft": 5,
-                        }
-                      }
-                    >
-                      <Text
-                        allowFontScaling={false}
-                        selectable={false}
-                        style={
-                          [
-                            {
-                              "color": "#2F343D",
-                              "fontSize": 20.8,
-                            },
-                            [
-                              {
-                                "lineHeight": 20.8,
-                              },
-                              undefined,
-                            ],
-                            {
-                              "fontFamily": "custom",
-                              "fontStyle": "normal",
-                              "fontWeight": "normal",
-                            },
-                            {},
-                          ]
-                        }
-                      >
-                        
-                      </Text>
-                    </View>
-                    <View
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      hitSlop={
-                        {
-                          "bottom": 4,
-                          "left": 4,
-                          "right": 4,
-                          "top": 4,
-                        }
-                      }
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                          "paddingLeft": 5,
-                        }
-                      }
-                    >
-                      <Text
-                        allowFontScaling={false}
-                        selectable={false}
-                        style={
-                          [
-                            {
-                              "color": "#EC0D2A",
-                              "fontSize": 20.8,
-                            },
-                            [
-                              {
-                                "lineHeight": 20.8,
-                              },
-                              undefined,
-                            ],
-                            {
-                              "fontFamily": "custom",
-                              "fontStyle": "normal",
-                              "fontWeight": "normal",
-                            },
-                            {},
-                          ]
-                        }
-                      >
-                        
-                      </Text>
-                    </View>
-                  </View>
-                </View>
-                <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 13,
-                        "fontWeight": "400",
-                        "lineHeight": 18,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                >
-                  10:00 AM
-                </Text>
-                <View
-                  style={
-                    {
-                      "gap": 4,
-                    }
-                  }
-                >
-                  <View
-                    testID="message-content-This message has error and is encrypted"
-                  >
-                    <View
-                      style={
-                        {
-                          "gap": 2,
-                        }
-                      }
+                      testID="message-content-Thread reply encrypted"
                     >
                       <Text
+                        accessibilityLabel="Thread reply encrypted"
+                        numberOfLines={1}
                         style={
                           [
                             {
@@ -40219,64 +44080,38 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                             },
                             {
                               "color": "#2F343D",
+                              "lineHeight": undefined,
                             },
                           ]
                         }
+                        testID="message-preview-Thread reply encrypted"
                       >
-                        <Text
-                          style={
-                            {
-                              "backgroundColor": "transparent",
-                              "flexShrink": 1,
-                              "fontFamily": "Inter",
-                              "fontWeight": "400",
-                              "textAlign": "left",
-                            }
-                          }
-                        >
-                          <Text
-                            accessibilityLabel="This message has error and is encrypted"
-                            style={
-                              [
-                                {
-                                  "flexShrink": 1,
-                                  "fontSize": 16,
-                                  "lineHeight": 22,
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            This message has error and is encrypted
-                          </Text>
-                        </Text>
+                        Thread reply encrypted
                       </Text>
                     </View>
                   </View>
-                </View>
+                </A11yIndexView>
               </View>
             </View>
           </View>
-        </A11yIndexView>
-      </View>
+        </View>
+      </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r2l:"
+      orderKey=":r2i:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r2l:"
+        orderKey=":r2i:"
       >
         <View
           accessibilityState={
             {
               "busy": undefined,
               "checked": undefined,
-              "disabled": false,
+              "disabled": true,
               "expanded": undefined,
               "selected": undefined,
             }
@@ -40291,7 +44126,7 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
           }
           accessible={true}
           collapsable={false}
-          focusable={true}
+          focusable={false}
           onClick={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
@@ -40302,437 +44137,479 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Read Receipt encrypted with Header.  Message was read"
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Read Receipt encrypted with Header"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r2l:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Temp message encrypted.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Temp message encrypted"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r2i:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={149}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={150}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 20.8,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 20.8,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
                       >
                         <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={false}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
                           style={
                             {
-                              "opacity": 1,
-                              "paddingLeft": 5,
+                              "opacity": 0.3,
                             }
                           }
+                          testID="message-content-Temp message encrypted"
                         >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
+                          <View
                             style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                  "fontSize": 20.8,
-                                },
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
                                 [
                                   {
-                                    "lineHeight": 20.8,
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
                                   },
-                                  undefined,
-                                ],
-                                {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            
-                          </Text>
-                        </View>
-                        <Text
-                          allowFontScaling={false}
-                          selectable={false}
-                          style={
-                            [
-                              {
-                                "color": "#095AD2",
-                                "fontSize": 32.5,
-                              },
-                              [
-                                {
-                                  "lineHeight": 32.5,
-                                },
-                                {
-                                  "marginTop": -5,
-                                  "paddingLeft": 5,
-                                },
-                              ],
-                              {
-                                "fontFamily": "custom",
-                                "fontStyle": "normal",
-                                "fontWeight": "normal",
-                              },
-                              {},
-                            ]
-                          }
-                          testID="read-receipt-read"
-                        >
-                          
-                        </Text>
-                      </View>
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Read Receipt encrypted with Header"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Read Receipt encrypted with Header"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Read Receipt encrypted with Header
+                                <Text
+                                  accessibilityLabel="Temp message encrypted"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Temp message encrypted
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r2m:"
+      orderKey=":r2j:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r2m:"
+        orderKey=":r2j:"
       >
         <View
           accessibilityState={
@@ -40765,389 +44642,621 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Read Receipt encrypted without Header.  Message was read"
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Read Receipt encrypted without Header"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r2m:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message Edited encrypted.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message Edited encrypted"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r2j:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
+                  >
+                    <View
+                      accessible={true}
+                      style={
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
+                      }
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={151}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-Read Receipt encrypted without Header"
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
                       >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={152}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "flexDirection": "row",
                             }
                           }
                         >
-                          <Text
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "paddingLeft": 5,
+                              }
                             }
                           >
                             <Text
+                              allowFontScaling={false}
+                              selectable={false}
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 20.8,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 20.8,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Message Edited encrypted"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Read Receipt encrypted without Header"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Read Receipt encrypted without Header
+                                <Text
+                                  accessibilityLabel="Message Edited encrypted"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message Edited encrypted
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r2k:"
+    >
+      <View
+        accessibilityLabel="diego.mello 10:00:00 AM  This message has error and is encrypted.  "
+        accessible={true}
+        style={
+          {
+            "flexDirection": "column",
+            "gap": 8,
+            "paddingHorizontal": 12,
+            "paddingVertical": 4,
+            "width": "100%",
+          }
+        }
+        testID="message-undefined"
+      >
+        <A11yIndexView
+          accessibilityLabel="This message has error and is encrypted"
+          importantForAccessibility="yes"
+          orderFocusType={0}
+          orderIndex={2}
+          orderKey=":r2k:"
+        >
+          <View
+            accessible={true}
+            style={
+              {
+                "flexDirection": "row",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "alignItems": "flex-end",
+                  "width": 46.800000000000004,
+                }
+              }
+            >
+              <View
+                accessible={true}
+                style={
+                  [
                     {
-                      "flexDirection": "row",
-                    }
+                      "borderRadius": 4,
+                      "height": 46.800000000000004,
+                      "width": 46.800000000000004,
+                    },
+                    {
+                      "marginTop": 4,
+                    },
+                  ]
+                }
+                testID="avatar"
+              >
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={153}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#E4E7EA"
+                  style={
+                    [
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "cursor": undefined,
+                      },
+                    ]
                   }
+                  underlayColor="#E4E7EA"
                 >
                   <View
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
                     collapsable={false}
-                    focusable={false}
-                    hitSlop={
-                      {
-                        "bottom": 4,
-                        "left": 4,
-                        "right": 4,
-                        "top": 4,
-                      }
-                    }
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
                       {
-                        "opacity": 1,
-                        "paddingLeft": 5,
+                        "backgroundColor": "#E4E7EA",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
                       }
                     }
+                  />
+                  <View
+                    accessibilityLabel="diego.mello's avatar"
+                    accessible={true}
+                    style={{}}
                   >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
+                    <ViewManagerAdapter_ExpoImage
+                      borderRadius={4}
+                      containerViewRef={"[React.ref]"}
+                      contentFit="cover"
+                      contentPosition={
+                        {
+                          "left": "50%",
+                          "top": "50%",
+                        }
+                      }
+                      height={46.800000000000004}
+                      nativeViewRef={"[React.ref]"}
+                      onError={[Function]}
+                      onLoad={[Function]}
+                      onLoadStart={[Function]}
+                      onProgress={[Function]}
+                      placeholder={[]}
+                      priority="high"
+                      source={
                         [
                           {
-                            "color": "#2F343D",
-                            "fontSize": 20.8,
-                          },
-                          [
-                            {
-                              "lineHeight": 20.8,
+                            "headers": {
+                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
                             },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
+                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
                           },
-                          {},
                         ]
                       }
-                    >
-                      
-                    </Text>
-                  </View>
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#095AD2",
-                          "fontSize": 32.5,
-                        },
-                        [
-                          {
-                            "lineHeight": 32.5,
-                          },
-                          {
-                            "marginTop": -5,
-                            "paddingLeft": 5,
-                          },
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                    testID="read-receipt-read"
-                  >
-                    
-                  </Text>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: Error should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
-    <A11yOrderView
-      orderKey=":r2n:"
-    >
-      <View
-        accessibilityLabel="diego.mello 10:00:00 AM  This message has error.  "
-        accessible={true}
-        style={
-          {
-            "flexDirection": "column",
-            "gap": 8,
-            "paddingHorizontal": 12,
-            "paddingVertical": 4,
-            "width": "100%",
-          }
-        }
-        testID="message-undefined"
-      >
-        <A11yIndexView
-          accessibilityLabel="This message has error"
-          importantForAccessibility="yes"
-          orderFocusType={0}
-          orderIndex={2}
-          orderKey=":r2n:"
-        >
-          <View
-            accessible={true}
-            style={
-              {
-                "flexDirection": "row",
-              }
-            }
-          >
-            <View
-              style={
-                {
-                  "alignItems": "flex-end",
-                  "width": 36,
-                }
-              }
-            >
-              <View
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 36,
-                      "width": 36,
-                    },
-                    {
-                      "marginTop": 4,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <View
-                  accessibilityLabel="diego.mello's avatar"
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onClick={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  style={
-                    {
-                      "opacity": 1,
-                    }
-                  }
-                >
-                  <ViewManagerAdapter_ExpoImage
-                    borderRadius={4}
-                    containerViewRef={"[React.ref]"}
-                    contentFit="cover"
-                    contentPosition={
-                      {
-                        "left": "50%",
-                        "top": "50%",
-                      }
-                    }
-                    height={36}
-                    nativeViewRef={"[React.ref]"}
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    onLoadStart={[Function]}
-                    onProgress={[Function]}
-                    placeholder={[]}
-                    priority="high"
-                    source={
-                      [
+                      style={
                         {
-                          "headers": {
-                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                          },
-                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
-                        },
-                      ]
-                    }
-                    style={
-                      {
-                        "borderRadius": 4,
-                        "height": 36,
-                        "width": 36,
+                          "borderRadius": 4,
+                          "height": 46.800000000000004,
+                          "width": 46.800000000000004,
+                        }
                       }
-                    }
-                    transition={null}
-                    width={36}
-                  />
-                </View>
+                      transition={null}
+                      width={46.800000000000004}
+                    />
+                  </View>
+                </RNGestureHandlerButton>
               </View>
             </View>
             <View
@@ -41176,86 +45285,94 @@ exports[`Story Snapshots: Error should match snapshot 1`] = `
                     }
                   }
                 >
-                  <View
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
+                  <RNGestureHandlerButton
+                    activeOpacity={1}
                     collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
+                    delayLongPress={600}
+                    enabled={true}
+                    handlerTag={154}
+                    handlerType="NativeViewGestureHandler"
+                    innerRef={null}
+                    onActiveStateChange={[Function]}
+                    onGestureHandlerEvent={[Function]}
+                    onGestureHandlerStateChange={[Function]}
+                    onPress={[Function]}
+                    rippleColor="#E4E7EA"
                     style={
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "flexShrink": 1,
-                        "gap": 4,
-                        "opacity": 1,
-                      }
+                      [
+                        {
+                          "backgroundColor": undefined,
+                          "borderRadius": undefined,
+                          "margin": undefined,
+                          "marginBottom": undefined,
+                          "marginEnd": undefined,
+                          "marginHorizontal": undefined,
+                          "marginLeft": undefined,
+                          "marginRight": undefined,
+                          "marginStart": undefined,
+                          "marginTop": undefined,
+                          "marginVertical": undefined,
+                        },
+                        {
+                          "cursor": undefined,
+                        },
+                      ]
                     }
                     testID="username-header-diego.mello"
+                    underlayColor="#E4E7EA"
                   >
-                    <Text
-                      numberOfLines={1}
+                    <View
+                      collapsable={false}
                       style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "600",
-                            "lineHeight": 22,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#1F2329",
-                          },
-                        ]
+                        {
+                          "backgroundColor": "#E4E7EA",
+                          "borderBottomLeftRadius": undefined,
+                          "borderBottomRightRadius": undefined,
+                          "borderRadius": undefined,
+                          "borderTopLeftRadius": undefined,
+                          "borderTopRightRadius": undefined,
+                          "bottom": 0,
+                          "left": 0,
+                          "opacity": 0,
+                          "position": "absolute",
+                          "right": 0,
+                          "top": 0,
+                        }
                       }
-                    >
-                      diego.mello
-                    </Text>
-                    <Text
+                    />
+                    <View
                       style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
+                        {
+                          "alignItems": "center",
+                          "flexDirection": "row",
+                          "flexShrink": 1,
+                          "gap": 4,
+                        }
                       }
                     >
-                      10:00 AM
-                    </Text>
-                  </View>
+                      <Text
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "flexShrink": 1,
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "600",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#1F2329",
+                            },
+                          ]
+                        }
+                      >
+                        diego.mello
+                      </Text>
+                    </View>
+                  </RNGestureHandlerButton>
                   <View
                     style={
                       {
@@ -41292,7 +45409,80 @@ exports[`Story Snapshots: Error should match snapshot 1`] = `
                           "top": 4,
                         }
                       }
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        {
+                          "paddingLeft": 5,
+                        }
+                      }
+                    >
+                      <Text
+                        allowFontScaling={false}
+                        selectable={false}
+                        style={
+                          [
+                            {
+                              "color": "#2F343D",
+                              "fontSize": 20.8,
+                            },
+                            [
+                              {
+                                "lineHeight": 20.8,
+                              },
+                              undefined,
+                            ],
+                            {
+                              "fontFamily": "custom",
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
+                            },
+                            {},
+                          ]
+                        }
+                      >
+                        
+                      </Text>
+                    </View>
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      collapsable={false}
+                      focusable={true}
+                      hitSlop={
+                        {
+                          "bottom": 4,
+                          "left": 4,
+                          "right": 4,
+                          "top": 4,
+                        }
+                      }
+                      onBlur={[Function]}
                       onClick={[Function]}
+                      onFocus={[Function]}
                       onResponderGrant={[Function]}
                       onResponderMove={[Function]}
                       onResponderRelease={[Function]}
@@ -41301,7 +45491,6 @@ exports[`Story Snapshots: Error should match snapshot 1`] = `
                       onStartShouldSetResponder={[Function]}
                       style={
                         {
-                          "opacity": 1,
                           "paddingLeft": 5,
                         }
                       }
@@ -41313,11 +45502,11 @@ exports[`Story Snapshots: Error should match snapshot 1`] = `
                           [
                             {
                               "color": "#EC0D2A",
-                              "fontSize": 16,
+                              "fontSize": 20.8,
                             },
                             [
                               {
-                                "lineHeight": 16,
+                                "lineHeight": 20.8,
                               },
                               undefined,
                             ],
@@ -41335,6 +45524,25 @@ exports[`Story Snapshots: Error should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 13,
+                        "fontWeight": "400",
+                        "lineHeight": 18,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#6C727A",
+                      },
+                    ]
+                  }
+                >
+                  10:00 AM
+                </Text>
                 <View
                   style={
                     {
@@ -41343,7 +45551,7 @@ exports[`Story Snapshots: Error should match snapshot 1`] = `
                   }
                 >
                   <View
-                    testID="message-content-This message has error"
+                    testID="message-content-This message has error and is encrypted"
                   >
                     <View
                       style={
@@ -41381,7 +45589,7 @@ exports[`Story Snapshots: Error should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            accessibilityLabel="This message has error"
+                            accessibilityLabel="This message has error and is encrypted"
                             style={
                               [
                                 {
@@ -41395,7 +45603,7 @@ exports[`Story Snapshots: Error should match snapshot 1`] = `
                               ]
                             }
                           >
-                            This message has error
+                            This message has error and is encrypted
                           </Text>
                         </Text>
                       </Text>
@@ -41409,443 +45617,713 @@ exports[`Story Snapshots: Error should match snapshot 1`] = `
       </View>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r2o:"
+      orderKey=":r2l:"
     >
-      <View
-        accessibilityLabel="diego.mello 10:00:00 AM  This message has error too.  "
-        accessible={true}
-        style={
-          {
-            "flexDirection": "column",
-            "gap": 8,
-            "paddingHorizontal": 12,
-            "paddingVertical": 4,
-            "width": "100%",
-          }
-        }
-        testID="message-undefined"
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r2l:"
       >
-        <A11yIndexView
-          accessibilityLabel="This message has error too"
-          importantForAccessibility="yes"
-          orderFocusType={0}
-          orderIndex={2}
-          orderKey=":r2o:"
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
         >
           <View
-            accessible={true}
-            style={
-              {
-                "flexDirection": "row",
-              }
-            }
+            style={{}}
           >
             <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Read Receipt encrypted with Header.  Message was read"
+              accessible={true}
               style={
                 {
-                  "alignItems": "flex-end",
-                  "width": 36,
-                }
-              }
-            />
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "marginLeft": 10,
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
               }
+              testID="message-undefined"
             >
-              <View
-                onLayout={[Function]}
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
+              <A11yIndexView
+                accessibilityLabel="Read Receipt encrypted with Header"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r2l:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "gap": 4,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    testID="message-content-This message has error too"
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
                   >
                     <View
+                      accessible={true}
                       style={
-                        {
-                          "gap": 2,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <Text
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={155}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
                         style={
                           [
                             {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "lineHeight": 22,
-                              "textAlign": "left",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
                             {
-                              "color": "#2F343D",
+                              "cursor": undefined,
                             },
                           ]
                         }
+                        underlayColor="#E4E7EA"
                       >
-                        <Text
+                        <View
+                          collapsable={false}
                           style={
                             {
-                              "backgroundColor": "transparent",
-                              "flexShrink": 1,
-                              "fontFamily": "Inter",
-                              "fontWeight": "400",
-                              "textAlign": "left",
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
                             }
                           }
-                        >
-                          <Text
-                            accessibilityLabel="This message has error too"
-                            style={
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
                               [
                                 {
-                                  "flexShrink": 1,
-                                  "fontSize": 16,
-                                  "lineHeight": 22,
-                                },
-                                {
-                                  "color": "#2F343D",
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
                                 },
                               ]
                             }
-                          >
-                            This message has error too
-                          </Text>
-                        </Text>
-                      </Text>
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-              </View>
-            </View>
-            <View
-              style={
-                {
-                  "flexDirection": "row",
-                }
-              }
-            >
-              <View
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                hitSlop={
-                  {
-                    "bottom": 4,
-                    "left": 4,
-                    "right": 4,
-                    "top": 4,
-                  }
-                }
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  {
-                    "opacity": 1,
-                    "paddingLeft": 5,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
+                  <View
+                    style={
                       {
-                        "color": "#EC0D2A",
-                        "fontSize": 16,
-                      },
-                      [
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
                         {
-                          "lineHeight": 16,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={156}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 20.8,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 20.8,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                          <Text
+                            allowFontScaling={false}
+                            selectable={false}
+                            style={
+                              [
+                                {
+                                  "color": "#095AD2",
+                                  "fontSize": 32.5,
+                                },
+                                [
+                                  {
+                                    "lineHeight": 32.5,
+                                  },
+                                  {
+                                    "marginTop": -5,
+                                    "paddingLeft": 5,
+                                  },
+                                ],
+                                {
+                                  "fontFamily": "custom",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "normal",
+                                },
+                                {},
+                              ]
+                            }
+                            testID="read-receipt-read"
+                          >
+                            
+                          </Text>
+                        </View>
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Read Receipt encrypted with Header"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Read Receipt encrypted with Header"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Read Receipt encrypted with Header
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
             </View>
           </View>
-        </A11yIndexView>
-      </View>
+        </View>
+      </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r2p:"
+      orderKey=":r2m:"
     >
-      <View
-        accessibilityLabel="diego.mello 10:00:00 AM  This message has error.  "
-        accessible={true}
-        style={
-          {
-            "flexDirection": "column",
-            "gap": 8,
-            "paddingHorizontal": 12,
-            "paddingVertical": 4,
-            "width": "100%",
-          }
-        }
-        testID="message-undefined"
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r2m:"
       >
-        <A11yIndexView
-          accessibilityLabel="This message has error"
-          importantForAccessibility="yes"
-          orderFocusType={0}
-          orderIndex={2}
-          orderKey=":r2p:"
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
         >
           <View
-            accessible={true}
-            style={
-              {
-                "flexDirection": "row",
-              }
-            }
+            style={{}}
           >
             <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Read Receipt encrypted without Header.  Message was read"
+              accessible={true}
               style={
                 {
-                  "alignItems": "flex-end",
-                  "width": 46.800000000000004,
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
               }
+              testID="message-undefined"
             >
-              <View
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 46.800000000000004,
-                      "width": 46.800000000000004,
-                    },
-                    {
-                      "marginTop": 4,
-                    },
-                  ]
-                }
-                testID="avatar"
+              <A11yIndexView
+                accessibilityLabel="Read Receipt encrypted without Header"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r2m:"
               >
                 <View
-                  accessibilityLabel="diego.mello's avatar"
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
                   accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onClick={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
                   style={
                     {
-                      "opacity": 1,
+                      "flexDirection": "row",
                     }
                   }
                 >
-                  <ViewManagerAdapter_ExpoImage
-                    borderRadius={4}
-                    containerViewRef={"[React.ref]"}
-                    contentFit="cover"
-                    contentPosition={
-                      {
-                        "left": "50%",
-                        "top": "50%",
-                      }
-                    }
-                    height={46.800000000000004}
-                    nativeViewRef={"[React.ref]"}
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    onLoadStart={[Function]}
-                    onProgress={[Function]}
-                    placeholder={[]}
-                    priority="high"
-                    source={
-                      [
-                        {
-                          "headers": {
-                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                          },
-                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
-                        },
-                      ]
-                    }
+                  <View
                     style={
                       {
-                        "borderRadius": 4,
-                        "height": 46.800000000000004,
+                        "alignItems": "flex-end",
                         "width": 46.800000000000004,
                       }
                     }
-                    transition={null}
-                    width={46.800000000000004}
                   />
-                </View>
-              </View>
-            </View>
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "marginLeft": 10,
-                }
-              }
-            >
-              <View
-                onLayout={[Function]}
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flex": 1,
-                      "flexDirection": "row",
-                      "justifyContent": "space-between",
-                    }
-                  }
-                >
                   <View
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "flexShrink": 1,
-                        "gap": 4,
-                        "opacity": 1,
+                        "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
-                    testID="username-header-diego.mello"
                   >
-                    <Text
-                      numberOfLines={1}
+                    <View
+                      onLayout={[Function]}
                       style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "600",
-                            "lineHeight": 22,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#1F2329",
-                          },
-                        ]
+                        {
+                          "flex": 1,
+                        }
                       }
                     >
-                      diego.mello
-                    </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Read Receipt encrypted without Header"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Read Receipt encrypted without Header"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Read Receipt encrypted without Header
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
                   </View>
                   <View
                     style={
@@ -41883,7 +46361,9 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
                           "top": 4,
                         }
                       }
+                      onBlur={[Function]}
                       onClick={[Function]}
+                      onFocus={[Function]}
                       onResponderGrant={[Function]}
                       onResponderMove={[Function]}
                       onResponderRelease={[Function]}
@@ -41892,7 +46372,6 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
                       onStartShouldSetResponder={[Function]}
                       style={
                         {
-                          "opacity": 1,
                           "paddingLeft": 5,
                         }
                       }
@@ -41903,7 +46382,7 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
                         style={
                           [
                             {
-                              "color": "#EC0D2A",
+                              "color": "#2F343D",
                               "fontSize": 20.8,
                             },
                             [
@@ -41921,30 +46400,430 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
                           ]
                         }
                       >
-                        
+                        
                       </Text>
                     </View>
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#095AD2",
+                            "fontSize": 32.5,
+                          },
+                          [
+                            {
+                              "lineHeight": 32.5,
+                            },
+                            {
+                              "marginTop": -5,
+                              "paddingLeft": 5,
+                            },
+                          ],
+                          {
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                      testID="read-receipt-read"
+                    >
+                      
+                    </Text>
                   </View>
                 </View>
-                <Text
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: Error should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
+    <A11yOrderView
+      orderKey=":r2n:"
+    >
+      <View
+        accessibilityLabel="diego.mello 10:00:00 AM  This message has error.  "
+        accessible={true}
+        style={
+          {
+            "flexDirection": "column",
+            "gap": 8,
+            "paddingHorizontal": 12,
+            "paddingVertical": 4,
+            "width": "100%",
+          }
+        }
+        testID="message-undefined"
+      >
+        <A11yIndexView
+          accessibilityLabel="This message has error"
+          importantForAccessibility="yes"
+          orderFocusType={0}
+          orderIndex={2}
+          orderKey=":r2n:"
+        >
+          <View
+            accessible={true}
+            style={
+              {
+                "flexDirection": "row",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "alignItems": "flex-end",
+                  "width": 36,
+                }
+              }
+            >
+              <View
+                accessible={true}
+                style={
+                  [
+                    {
+                      "borderRadius": 4,
+                      "height": 36,
+                      "width": 36,
+                    },
+                    {
+                      "marginTop": 4,
+                    },
+                  ]
+                }
+                testID="avatar"
+              >
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={157}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#E4E7EA"
                   style={
                     [
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 13,
-                        "fontWeight": "400",
-                        "lineHeight": 18,
-                        "textAlign": "left",
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
                       },
                       {
-                        "color": "#6C727A",
+                        "cursor": undefined,
                       },
                     ]
                   }
+                  underlayColor="#E4E7EA"
                 >
-                  10:00 AM
-                </Text>
+                  <View
+                    collapsable={false}
+                    style={
+                      {
+                        "backgroundColor": "#E4E7EA",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityLabel="diego.mello's avatar"
+                    accessible={true}
+                    style={{}}
+                  >
+                    <ViewManagerAdapter_ExpoImage
+                      borderRadius={4}
+                      containerViewRef={"[React.ref]"}
+                      contentFit="cover"
+                      contentPosition={
+                        {
+                          "left": "50%",
+                          "top": "50%",
+                        }
+                      }
+                      height={36}
+                      nativeViewRef={"[React.ref]"}
+                      onError={[Function]}
+                      onLoad={[Function]}
+                      onLoadStart={[Function]}
+                      onProgress={[Function]}
+                      placeholder={[]}
+                      priority="high"
+                      source={
+                        [
+                          {
+                            "headers": {
+                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                            },
+                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                          },
+                        ]
+                      }
+                      style={
+                        {
+                          "borderRadius": 4,
+                          "height": 36,
+                          "width": 36,
+                        }
+                      }
+                      transition={null}
+                      width={36}
+                    />
+                  </View>
+                </RNGestureHandlerButton>
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "flex": 1,
+                  "marginLeft": 10,
+                }
+              }
+            >
+              <View
+                onLayout={[Function]}
+                style={
+                  {
+                    "flex": 1,
+                  }
+                }
+              >
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "flex": 1,
+                      "flexDirection": "row",
+                      "justifyContent": "space-between",
+                    }
+                  }
+                >
+                  <RNGestureHandlerButton
+                    activeOpacity={1}
+                    collapsable={false}
+                    delayLongPress={600}
+                    enabled={true}
+                    handlerTag={158}
+                    handlerType="NativeViewGestureHandler"
+                    innerRef={null}
+                    onActiveStateChange={[Function]}
+                    onGestureHandlerEvent={[Function]}
+                    onGestureHandlerStateChange={[Function]}
+                    onPress={[Function]}
+                    rippleColor="#E4E7EA"
+                    style={
+                      [
+                        {
+                          "backgroundColor": undefined,
+                          "borderRadius": undefined,
+                          "margin": undefined,
+                          "marginBottom": undefined,
+                          "marginEnd": undefined,
+                          "marginHorizontal": undefined,
+                          "marginLeft": undefined,
+                          "marginRight": undefined,
+                          "marginStart": undefined,
+                          "marginTop": undefined,
+                          "marginVertical": undefined,
+                        },
+                        {
+                          "cursor": undefined,
+                        },
+                      ]
+                    }
+                    testID="username-header-diego.mello"
+                    underlayColor="#E4E7EA"
+                  >
+                    <View
+                      collapsable={false}
+                      style={
+                        {
+                          "backgroundColor": "#E4E7EA",
+                          "borderBottomLeftRadius": undefined,
+                          "borderBottomRightRadius": undefined,
+                          "borderRadius": undefined,
+                          "borderTopLeftRadius": undefined,
+                          "borderTopRightRadius": undefined,
+                          "bottom": 0,
+                          "left": 0,
+                          "opacity": 0,
+                          "position": "absolute",
+                          "right": 0,
+                          "top": 0,
+                        }
+                      }
+                    />
+                    <View
+                      style={
+                        {
+                          "alignItems": "center",
+                          "flexDirection": "row",
+                          "flexShrink": 1,
+                          "gap": 4,
+                        }
+                      }
+                    >
+                      <Text
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "flexShrink": 1,
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "600",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#1F2329",
+                            },
+                          ]
+                        }
+                      >
+                        diego.mello
+                      </Text>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                    </View>
+                  </RNGestureHandlerButton>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      collapsable={false}
+                      focusable={true}
+                      hitSlop={
+                        {
+                          "bottom": 4,
+                          "left": 4,
+                          "right": 4,
+                          "top": 4,
+                        }
+                      }
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        {
+                          "paddingLeft": 5,
+                        }
+                      }
+                    >
+                      <Text
+                        allowFontScaling={false}
+                        selectable={false}
+                        style={
+                          [
+                            {
+                              "color": "#EC0D2A",
+                              "fontSize": 16,
+                            },
+                            [
+                              {
+                                "lineHeight": 16,
+                              },
+                              undefined,
+                            ],
+                            {
+                              "fontFamily": "custom",
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
+                            },
+                            {},
+                          ]
+                        }
+                      >
+                        
+                      </Text>
+                    </View>
+                  </View>
+                </View>
                 <View
                   style={
                     {
@@ -42019,7 +46898,7 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
       </View>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r2q:"
+      orderKey=":r2o:"
     >
       <View
         accessibilityLabel="diego.mello 10:00:00 AM  This message has error too.  "
@@ -42040,7 +46919,7 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
           importantForAccessibility="yes"
           orderFocusType={0}
           orderIndex={2}
-          orderKey=":r2q:"
+          orderKey=":r2o:"
         >
           <View
             accessible={true}
@@ -42054,7 +46933,7 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
               style={
                 {
                   "alignItems": "flex-end",
-                  "width": 46.800000000000004,
+                  "width": 36,
                 }
               }
             />
@@ -42179,7 +47058,9 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
                     "top": 4,
                   }
                 }
+                onBlur={[Function]}
                 onClick={[Function]}
+                onFocus={[Function]}
                 onResponderGrant={[Function]}
                 onResponderMove={[Function]}
                 onResponderRelease={[Function]}
@@ -42188,7 +47069,6 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
                 onStartShouldSetResponder={[Function]}
                 style={
                   {
-                    "opacity": 1,
                     "paddingLeft": 5,
                   }
                 }
@@ -42200,11 +47080,11 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
                     [
                       {
                         "color": "#EC0D2A",
-                        "fontSize": 20.8,
+                        "fontSize": 16,
                       },
                       [
                         {
-                          "lineHeight": 20.8,
+                          "lineHeight": 16,
                         },
                         undefined,
                       ],
@@ -42229,7 +47109,7 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
 </RCTScrollView>
 `;
 
-exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`] = `
+exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
 <RCTScrollView
   style={
     {
@@ -42239,104 +47119,284 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
 >
   <View>
     <A11yOrderView
-      orderKey=":r2r:"
+      orderKey=":r2p:"
     >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r2r:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
+      <View
+        accessibilityLabel="diego.mello 10:00:00 AM  This message has error.  "
+        accessible={true}
+        style={
+          {
+            "flexDirection": "column",
+            "gap": 8,
+            "paddingHorizontal": 12,
+            "paddingVertical": 4,
+            "width": "100%",
           }
+        }
+        testID="message-undefined"
+      >
+        <A11yIndexView
+          accessibilityLabel="This message has error"
+          importantForAccessibility="yes"
+          orderFocusType={0}
+          orderIndex={2}
+          orderKey=":r2p:"
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Check out this Python file.  "
             accessible={true}
             style={
               {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
+                "flexDirection": "row",
               }
             }
-            testID="message-undefined"
           >
-            <A11yIndexView
-              accessibilityLabel="Check out this Python file"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r2r:"
+            <View
+              style={
+                {
+                  "alignItems": "flex-end",
+                  "width": 46.800000000000004,
+                }
+              }
             >
               <View
                 accessible={true}
                 style={
-                  {
-                    "flexDirection": "row",
-                  }
+                  [
+                    {
+                      "borderRadius": 4,
+                      "height": 46.800000000000004,
+                      "width": 46.800000000000004,
+                    },
+                    {
+                      "marginTop": 4,
+                    },
+                  ]
                 }
+                testID="avatar"
               >
-                <View
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={159}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#E4E7EA"
                   style={
-                    {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
+                    [
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "cursor": undefined,
+                      },
+                    ]
                   }
+                  underlayColor="#E4E7EA"
                 >
                   <View
+                    collapsable={false}
+                    style={
+                      {
+                        "backgroundColor": "#E4E7EA",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityLabel="diego.mello's avatar"
                     accessible={true}
+                    style={{}}
+                  >
+                    <ViewManagerAdapter_ExpoImage
+                      borderRadius={4}
+                      containerViewRef={"[React.ref]"}
+                      contentFit="cover"
+                      contentPosition={
+                        {
+                          "left": "50%",
+                          "top": "50%",
+                        }
+                      }
+                      height={46.800000000000004}
+                      nativeViewRef={"[React.ref]"}
+                      onError={[Function]}
+                      onLoad={[Function]}
+                      onLoadStart={[Function]}
+                      onProgress={[Function]}
+                      placeholder={[]}
+                      priority="high"
+                      source={
+                        [
+                          {
+                            "headers": {
+                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                            },
+                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                          },
+                        ]
+                      }
+                      style={
+                        {
+                          "borderRadius": 4,
+                          "height": 46.800000000000004,
+                          "width": 46.800000000000004,
+                        }
+                      }
+                      transition={null}
+                      width={46.800000000000004}
+                    />
+                  </View>
+                </RNGestureHandlerButton>
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "flex": 1,
+                  "marginLeft": 10,
+                }
+              }
+            >
+              <View
+                onLayout={[Function]}
+                style={
+                  {
+                    "flex": 1,
+                  }
+                }
+              >
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "flex": 1,
+                      "flexDirection": "row",
+                      "justifyContent": "space-between",
+                    }
+                  }
+                >
+                  <RNGestureHandlerButton
+                    activeOpacity={1}
+                    collapsable={false}
+                    delayLongPress={600}
+                    enabled={true}
+                    handlerTag={160}
+                    handlerType="NativeViewGestureHandler"
+                    innerRef={null}
+                    onActiveStateChange={[Function]}
+                    onGestureHandlerEvent={[Function]}
+                    onGestureHandlerStateChange={[Function]}
+                    onPress={[Function]}
+                    rippleColor="#E4E7EA"
                     style={
                       [
                         {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
+                          "backgroundColor": undefined,
+                          "borderRadius": undefined,
+                          "margin": undefined,
+                          "marginBottom": undefined,
+                          "marginEnd": undefined,
+                          "marginHorizontal": undefined,
+                          "marginLeft": undefined,
+                          "marginRight": undefined,
+                          "marginStart": undefined,
+                          "marginTop": undefined,
+                          "marginVertical": undefined,
                         },
                         {
-                          "marginTop": 4,
+                          "cursor": undefined,
                         },
                       ]
                     }
-                    testID="avatar"
+                    testID="username-header-diego.mello"
+                    underlayColor="#E4E7EA"
+                  >
+                    <View
+                      collapsable={false}
+                      style={
+                        {
+                          "backgroundColor": "#E4E7EA",
+                          "borderBottomLeftRadius": undefined,
+                          "borderBottomRightRadius": undefined,
+                          "borderRadius": undefined,
+                          "borderTopLeftRadius": undefined,
+                          "borderTopRightRadius": undefined,
+                          "bottom": 0,
+                          "left": 0,
+                          "opacity": 0,
+                          "position": "absolute",
+                          "right": 0,
+                          "top": 0,
+                        }
+                      }
+                    />
+                    <View
+                      style={
+                        {
+                          "alignItems": "center",
+                          "flexDirection": "row",
+                          "flexShrink": 1,
+                          "gap": 4,
+                        }
+                      }
+                    >
+                      <Text
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "flexShrink": 1,
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "600",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#1F2329",
+                            },
+                          ]
+                        }
+                      >
+                        diego.mello
+                      </Text>
+                    </View>
+                  </RNGestureHandlerButton>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
                       accessibilityState={
                         {
                           "busy": undefined,
@@ -42357,7 +47417,17 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                       accessible={true}
                       collapsable={false}
                       focusable={true}
+                      hitSlop={
+                        {
+                          "bottom": 4,
+                          "left": 4,
+                          "right": 4,
+                          "top": 4,
+                        }
+                      }
+                      onBlur={[Function]}
                       onClick={[Function]}
+                      onFocus={[Function]}
                       onResponderGrant={[Function]}
                       onResponderMove={[Function]}
                       onResponderRelease={[Function]}
@@ -42366,326 +47436,111 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                       onStartShouldSetResponder={[Function]}
                       style={
                         {
-                          "opacity": 1,
+                          "paddingLeft": 5,
                         }
                       }
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <Text
+                        allowFontScaling={false}
+                        selectable={false}
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                              "color": "#EC0D2A",
+                              "fontSize": 20.8,
+                            },
+                            [
+                              {
+                                "lineHeight": 20.8,
                               },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              undefined,
+                            ],
+                            {
+                              "fontFamily": "custom",
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
                             },
+                            {},
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                      >
+                        
+                      </Text>
                     </View>
                   </View>
                 </View>
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 13,
+                        "fontWeight": "400",
+                        "lineHeight": 18,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#6C727A",
+                      },
+                    ]
+                  }
+                >
+                  10:00 AM
+                </Text>
                 <View
                   style={
                     {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "gap": 4,
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
+                    testID="message-content-This message has error"
                   >
                     <View
                       style={
                         {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
+                          "gap": 2,
                         }
                       }
                     >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
+                      <Text
                         style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                            },
+                          ]
                         }
-                        testID="username-header-diego.mello"
                       >
                         <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        style={
-                          {
-                            "gap": 4,
-                          }
-                        }
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
-                        >
-                          <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
-                              }
-                            }
-                            testID="reply-undefined-undefined"
-                          >
-                            <View
-                              style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
-                                }
-                              }
-                            >
-                              <View
-                                style={
-                                  {
-                                    "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
-                                  }
-                                }
-                              >
-                                <View
-                                  style={
-                                    {
-                                      "alignItems": "center",
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "gap": 4,
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    test.py
-                                  </Text>
-                                </View>
-                                <Text
-                                  accessibilityLabel="test.py"
-                                  numberOfLines={0}
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                        "lineHeight": undefined,
-                                      },
-                                    ]
-                                  }
-                                  testID="markdown-preview-test.py"
-                                >
-                                  test.py
-                                </Text>
-                              </View>
-                            </View>
-                          </View>
-                        </View>
-                      </View>
-                      <View
-                        testID="message-content-Check out this Python file"
-                      >
-                        <View
                           style={
                             {
-                              "gap": 2,
+                              "backgroundColor": "transparent",
+                              "flexShrink": 1,
+                              "fontFamily": "Inter",
+                              "fontWeight": "400",
+                              "textAlign": "left",
                             }
                           }
                         >
                           <Text
+                            accessibilityLabel="This message has error"
                             style={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
+                                  "flexShrink": 1,
                                   "fontSize": 16,
-                                  "fontWeight": "400",
                                   "lineHeight": 22,
-                                  "textAlign": "left",
                                 },
                                 {
                                   "color": "#2F343D",
@@ -42693,495 +47548,128 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                               ]
                             }
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Check out this Python file"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Check out this Python file
-                              </Text>
-                            </Text>
+                            This message has error
                           </Text>
-                        </View>
-                      </View>
+                        </Text>
+                      </Text>
                     </View>
                   </View>
                 </View>
               </View>
-            </A11yIndexView>
+            </View>
           </View>
-        </View>
-      </A11yIndexView>
+        </A11yIndexView>
+      </View>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r2s:"
+      orderKey=":r2q:"
     >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r2s:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
+      <View
+        accessibilityLabel="diego.mello 10:00:00 AM  This message has error too.  "
+        accessible={true}
+        style={
+          {
+            "flexDirection": "column",
+            "gap": 8,
+            "paddingHorizontal": 12,
+            "paddingVertical": 4,
+            "width": "100%",
           }
+        }
+        testID="message-undefined"
+      >
+        <A11yIndexView
+          accessibilityLabel="This message has error too"
+          importantForAccessibility="yes"
+          orderFocusType={0}
+          orderIndex={2}
+          orderKey=":r2q:"
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  TypeScript component.  "
             accessible={true}
             style={
               {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
+                "flexDirection": "row",
               }
             }
-            testID="message-undefined"
           >
-            <A11yIndexView
-              accessibilityLabel="TypeScript component"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r2s:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
+            <View
+              style={
+                {
+                  "alignItems": "flex-end",
+                  "width": 46.800000000000004,
+                }
+              }
+            />
+            <View
+              style={
+                {
+                  "flex": 1,
+                  "marginLeft": 10,
+                }
+              }
+            >
+              <View
+                onLayout={[Function]}
+                style={
+                  {
+                    "flex": 1,
+                  }
+                }
               >
                 <View
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "gap": 4,
                     }
                   }
                 >
                   <View
-                    accessible={true}
-                    style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
+                    testID="message-content-This message has error too"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         {
-                          "opacity": 1,
+                          "gap": 2,
                         }
                       }
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <Text
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
                       >
                         <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        style={
-                          {
-                            "gap": 4,
-                          }
-                        }
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
-                        >
-                          <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
-                              }
-                            }
-                            testID="reply-undefined-undefined"
-                          >
-                            <View
-                              style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
-                                }
-                              }
-                            >
-                              <View
-                                style={
-                                  {
-                                    "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
-                                  }
-                                }
-                              >
-                                <View
-                                  style={
-                                    {
-                                      "alignItems": "center",
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "gap": 4,
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    Component.tsx
-                                  </Text>
-                                </View>
-                                <Text
-                                  accessibilityLabel="Component.tsx"
-                                  numberOfLines={0}
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                        "lineHeight": undefined,
-                                      },
-                                    ]
-                                  }
-                                  testID="markdown-preview-Component.tsx"
-                                >
-                                  Component.tsx
-                                </Text>
-                              </View>
-                            </View>
-                          </View>
-                        </View>
-                      </View>
-                      <View
-                        testID="message-content-TypeScript component"
-                      >
-                        <View
                           style={
                             {
-                              "gap": 2,
+                              "backgroundColor": "transparent",
+                              "flexShrink": 1,
+                              "fontFamily": "Inter",
+                              "fontWeight": "400",
+                              "textAlign": "left",
                             }
                           }
                         >
                           <Text
+                            accessibilityLabel="This message has error too"
                             style={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
+                                  "flexShrink": 1,
                                   "fontSize": 16,
-                                  "fontWeight": "400",
                                   "lineHeight": 22,
-                                  "textAlign": "left",
                                 },
                                 {
                                   "color": "#2F343D",
@@ -43189,55 +47677,119 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                               ]
                             }
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="TypeScript component"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                TypeScript component
-                              </Text>
-                            </Text>
+                            This message has error too
                           </Text>
-                        </View>
-                      </View>
+                        </Text>
+                      </Text>
                     </View>
                   </View>
                 </View>
               </View>
-            </A11yIndexView>
+            </View>
+            <View
+              style={
+                {
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                hitSlop={
+                  {
+                    "bottom": 4,
+                    "left": 4,
+                    "right": 4,
+                    "top": 4,
+                  }
+                }
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  {
+                    "paddingLeft": 5,
+                  }
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#EC0D2A",
+                        "fontSize": 20.8,
+                      },
+                      [
+                        {
+                          "lineHeight": 20.8,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
           </View>
-        </View>
-      </A11yIndexView>
+        </A11yIndexView>
+      </View>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r2t:"
+      orderKey=":r2r:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r2t:"
+        orderKey=":r2r:"
       >
         <View
           accessibilityState={
@@ -43270,260 +47822,318 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Configuration file.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Configuration file"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r2t:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Check out this Python file.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Check out this Python file"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r2r:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={161}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={162}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
                       <View
                         style={
                           {
@@ -43539,201 +48149,214 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-undefined"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-undefined"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      test.py
+                                    </Text>
+                                  </View>
                                   <Text
+                                    accessibilityLabel="test.py"
+                                    numberOfLines={0}
                                     style={
                                       [
                                         {
                                           "backgroundColor": "transparent",
-                                          "flex": 1,
                                           "fontFamily": "Inter",
                                           "fontSize": 16,
-                                          "fontWeight": "500",
+                                          "fontWeight": "400",
+                                          "lineHeight": 22,
                                           "textAlign": "left",
                                         },
                                         {
                                           "color": "#2F343D",
+                                          "lineHeight": undefined,
                                         },
                                       ]
                                     }
+                                    testID="markdown-preview-test.py"
                                   >
-                                    config.json
+                                    test.py
                                   </Text>
                                 </View>
-                                <Text
-                                  accessibilityLabel="config.json"
-                                  numberOfLines={0}
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                        "lineHeight": undefined,
-                                      },
-                                    ]
-                                  }
-                                  testID="markdown-preview-config.json"
-                                >
-                                  config.json
-                                </Text>
                               </View>
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        testID="message-content-Configuration file"
-                      >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Check out this Python file"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Configuration file"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Configuration file
+                                <Text
+                                  accessibilityLabel="Check out this Python file"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Check out this Python file
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r2u:"
+      orderKey=":r2s:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r2u:"
+        orderKey=":r2s:"
       >
         <View
           accessibilityState={
@@ -43766,260 +48389,318 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  File with description.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="File with description"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r2u:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  TypeScript component.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="TypeScript component"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r2s:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={163}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={164}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
                       <View
                         style={
                           {
@@ -44035,105 +48716,112 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-This is the **main** entry point for the application"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-undefined"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
-                                    main.go
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Component.tsx
+                                    </Text>
+                                  </View>
                                   <Text
+                                    accessibilityLabel="Component.tsx"
+                                    numberOfLines={0}
                                     style={
                                       [
                                         {
@@ -44146,167 +48834,96 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                                         },
                                         {
                                           "color": "#2F343D",
+                                          "lineHeight": undefined,
                                         },
                                       ]
                                     }
+                                    testID="markdown-preview-Component.tsx"
                                   >
-                                    <Text
-                                      style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
-                                      }
-                                    >
-                                      <Text
-                                        accessibilityLabel="This is the "
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        This is the 
-                                      </Text>
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontWeight": "700",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="main"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          main
-                                        </Text>
-                                      </Text>
-                                      <Text
-                                        accessibilityLabel=" entry point for the application"
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                         entry point for the application
-                                      </Text>
-                                    </Text>
+                                    Component.tsx
                                   </Text>
                                 </View>
                               </View>
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        testID="message-content-File with description"
-                      >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-TypeScript component"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="File with description"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                File with description
+                                <Text
+                                  accessibilityLabel="TypeScript component"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  TypeScript component
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r2v:"
+      orderKey=":r2t:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r2v:"
+        orderKey=":r2t:"
       >
         <View
           accessibilityState={
@@ -44339,203 +48956,325 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r2v:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Configuration file.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Configuration file"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r2t:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  >
+                    <View
+                      accessible={true}
+                      style={
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
+                      }
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={165}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
                         style={
                           {
-                            "gap": 4,
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
                           }
                         }
                       >
-                        <View
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={166}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
-                            {
-                              "gap": 4,
-                            }
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
+                            collapsable={false}
+                            style={
                               {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
                               }
                             }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
+                          />
+                          <View
                             style={
                               {
                                 "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
                                 "flexDirection": "row",
-                                "opacity": 1,
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-undefined"
                           >
-                            <View
+                            <Text
+                              numberOfLines={1}
                               style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
-                                }
-                              }
-                            >
-                              <View
-                                style={
+                                [
                                   {
-                                    "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
-                                  }
-                                }
-                              >
-                                <View
-                                  style={
-                                    {
-                                      "alignItems": "center",
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "gap": 4,
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    document.pdf
-                                  </Text>
-                                </View>
-                                <Text
-                                  accessibilityLabel="document.pdf"
-                                  numberOfLines={0}
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                        "lineHeight": undefined,
-                                      },
-                                    ]
-                                  }
-                                  testID="markdown-preview-document.pdf"
-                                >
-                                  document.pdf
-                                </Text>
-                              </View>
-                            </View>
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
                           </View>
-                        </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
                         <View
                           style={
                             {
@@ -44544,162 +49283,214 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-undefined"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-undefined"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      config.json
+                                    </Text>
+                                  </View>
                                   <Text
+                                    accessibilityLabel="config.json"
+                                    numberOfLines={0}
                                     style={
                                       [
                                         {
                                           "backgroundColor": "transparent",
-                                          "flex": 1,
                                           "fontFamily": "Inter",
                                           "fontSize": 16,
-                                          "fontWeight": "500",
+                                          "fontWeight": "400",
+                                          "lineHeight": 22,
                                           "textAlign": "left",
                                         },
                                         {
                                           "color": "#2F343D",
+                                          "lineHeight": undefined,
                                         },
                                       ]
                                     }
+                                    testID="markdown-preview-config.json"
                                   >
-                                    image.png
+                                    config.json
                                   </Text>
                                 </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                        <View
+                          testID="message-content-Configuration file"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
                                 <Text
-                                  accessibilityLabel="image.png"
-                                  numberOfLines={0}
+                                  accessibilityLabel="Configuration file"
                                   style={
                                     [
                                       {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
+                                        "flexShrink": 1,
                                         "fontSize": 16,
-                                        "fontWeight": "400",
                                         "lineHeight": 22,
-                                        "textAlign": "left",
                                       },
                                       {
                                         "color": "#2F343D",
-                                        "lineHeight": undefined,
                                       },
                                     ]
                                   }
-                                  testID="markdown-preview-image.png"
                                 >
-                                  image.png
+                                  Configuration file
                                 </Text>
-                              </View>
-                            </View>
+                              </Text>
+                            </Text>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r30:"
+      orderKey=":r2u:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r30:"
+        orderKey=":r2u:"
       >
         <View
           accessibilityState={
@@ -44732,470 +49523,618 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Check out this Python file.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Check out this Python file"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r30:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  File with description.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="File with description"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r2u:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={167}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={168}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
-                        >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        style={
-                          {
-                            "gap": 4,
-                          }
-                        }
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
+                            collapsable={false}
+                            style={
                               {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
                               }
                             }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
+                          />
+                          <View
                             style={
                               {
                                 "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
                                 "flexDirection": "row",
-                                "opacity": 1,
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-undefined"
                           >
-                            <View
+                            <Text
+                              numberOfLines={1}
                               style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
-                                }
-                              }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "gap": 4,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-This is the **main** entry point for the application"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
-                                    test.py
-                                  </Text>
-                                </View>
-                                <Text
-                                  accessibilityLabel="test.py"
-                                  numberOfLines={0}
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      main.go
+                                    </Text>
+                                  </View>
+                                  <View
+                                    style={
                                       {
-                                        "color": "#2F343D",
-                                        "lineHeight": undefined,
-                                      },
-                                    ]
-                                  }
-                                  testID="markdown-preview-test.py"
-                                >
-                                  test.py
-                                </Text>
+                                        "gap": 2,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      <Text
+                                        style={
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          accessibilityLabel="This is the "
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          This is the 
+                                        </Text>
+                                        <Text
+                                          style={
+                                            {
+                                              "backgroundColor": "transparent",
+                                              "fontFamily": "Inter",
+                                              "fontWeight": "700",
+                                              "textAlign": "left",
+                                            }
+                                          }
+                                        >
+                                          <Text
+                                            accessibilityLabel="main"
+                                            style={
+                                              [
+                                                {
+                                                  "flexShrink": 1,
+                                                  "fontSize": 16,
+                                                  "lineHeight": 22,
+                                                },
+                                                {
+                                                  "color": "#2F343D",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            main
+                                          </Text>
+                                        </Text>
+                                        <Text
+                                          accessibilityLabel=" entry point for the application"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                           entry point for the application
+                                        </Text>
+                                      </Text>
+                                    </Text>
+                                  </View>
+                                </View>
                               </View>
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        testID="message-content-Check out this Python file"
-                      >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-File with description"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Check out this Python file"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Check out this Python file
+                                <Text
+                                  accessibilityLabel="File with description"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  File with description
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r31:"
+      orderKey=":r2v:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r31:"
+        orderKey=":r2v:"
       >
         <View
           accessibilityState={
@@ -45228,257 +50167,73 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  TypeScript component.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="TypeScript component"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r31:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r2v:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
                       }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
-                          }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
                     }
-                  }
-                >
+                  />
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
                         }
                       }
                     >
@@ -45497,201 +50252,306 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                           }
                         >
                           <View
-                            accessibilityState={
+                            style={
                               {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
+                                "gap": 4,
                               }
                             }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
-                              }
-                            }
-                            testID="reply-undefined-undefined"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-undefined"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      document.pdf
+                                    </Text>
+                                  </View>
                                   <Text
+                                    accessibilityLabel="document.pdf"
+                                    numberOfLines={0}
                                     style={
                                       [
                                         {
                                           "backgroundColor": "transparent",
-                                          "flex": 1,
                                           "fontFamily": "Inter",
                                           "fontSize": 16,
-                                          "fontWeight": "500",
+                                          "fontWeight": "400",
+                                          "lineHeight": 22,
                                           "textAlign": "left",
                                         },
                                         {
                                           "color": "#2F343D",
+                                          "lineHeight": undefined,
                                         },
                                       ]
                                     }
+                                    testID="markdown-preview-document.pdf"
                                   >
-                                    Component.tsx
+                                    document.pdf
                                   </Text>
                                 </View>
-                                <Text
-                                  accessibilityLabel="Component.tsx"
-                                  numberOfLines={0}
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                        "lineHeight": undefined,
-                                      },
-                                    ]
-                                  }
-                                  testID="markdown-preview-Component.tsx"
-                                >
-                                  Component.tsx
-                                </Text>
                               </View>
                             </View>
                           </View>
-                        </View>
-                      </View>
-                      <View
-                        testID="message-content-TypeScript component"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 4,
+                              }
                             }
                           >
-                            <Text
-                              style={
+                            <View
+                              accessibilityState={
                                 {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-undefined"
                             >
-                              <Text
-                                accessibilityLabel="TypeScript component"
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
+                                  }
                                 }
                               >
-                                TypeScript component
-                              </Text>
-                            </Text>
-                          </Text>
+                                <View
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "flexDirection": "column",
+                                      "gap": 4,
+                                      "width": 200,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      image.png
+                                    </Text>
+                                  </View>
+                                  <Text
+                                    accessibilityLabel="image.png"
+                                    numberOfLines={0}
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 16,
+                                          "fontWeight": "400",
+                                          "lineHeight": 22,
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                          "lineHeight": undefined,
+                                        },
+                                      ]
+                                    }
+                                    testID="markdown-preview-image.png"
+                                  >
+                                    image.png
+                                  </Text>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
+                  />
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r32:"
+      orderKey=":r30:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r32:"
+        orderKey=":r30:"
       >
         <View
           accessibilityState={
@@ -45724,470 +50584,541 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Configuration file.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Configuration file"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r32:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Check out this Python file.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Check out this Python file"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r30:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={169}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={170}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
-                        >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        style={
-                          {
-                            "gap": 4,
-                          }
-                        }
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
+                            collapsable={false}
+                            style={
                               {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
                               }
                             }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
+                          />
+                          <View
                             style={
                               {
                                 "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
                                 "flexDirection": "row",
-                                "opacity": 1,
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-undefined"
                           >
-                            <View
+                            <Text
+                              numberOfLines={1}
                               style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "gap": 4,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-undefined"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      test.py
+                                    </Text>
+                                  </View>
                                   <Text
+                                    accessibilityLabel="test.py"
+                                    numberOfLines={0}
                                     style={
                                       [
                                         {
                                           "backgroundColor": "transparent",
-                                          "flex": 1,
                                           "fontFamily": "Inter",
                                           "fontSize": 16,
-                                          "fontWeight": "500",
+                                          "fontWeight": "400",
+                                          "lineHeight": 22,
                                           "textAlign": "left",
                                         },
                                         {
                                           "color": "#2F343D",
+                                          "lineHeight": undefined,
                                         },
                                       ]
                                     }
+                                    testID="markdown-preview-test.py"
                                   >
-                                    config.json
+                                    test.py
                                   </Text>
                                 </View>
-                                <Text
-                                  accessibilityLabel="config.json"
-                                  numberOfLines={0}
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                        "lineHeight": undefined,
-                                      },
-                                    ]
-                                  }
-                                  testID="markdown-preview-config.json"
-                                >
-                                  config.json
-                                </Text>
                               </View>
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        testID="message-content-Configuration file"
-                      >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Check out this Python file"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Configuration file"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Configuration file
+                                <Text
+                                  accessibilityLabel="Check out this Python file"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Check out this Python file
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r33:"
+      orderKey=":r31:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r33:"
+        orderKey=":r31:"
       >
         <View
           accessibilityState={
@@ -46220,260 +51151,318 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  File with description.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="File with description"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r33:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  TypeScript component.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="TypeScript component"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r31:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={171}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={172}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -46489,105 +51478,112 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-This is the **main** entry point for the application"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
                                 }
                               }
-                            >
-                              <View
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-undefined"
+                            >
+                              <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
-                                    main.go
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Component.tsx
+                                    </Text>
+                                  </View>
                                   <Text
+                                    accessibilityLabel="Component.tsx"
+                                    numberOfLines={0}
                                     style={
                                       [
                                         {
@@ -46600,167 +51596,96 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                                         },
                                         {
                                           "color": "#2F343D",
+                                          "lineHeight": undefined,
                                         },
                                       ]
                                     }
+                                    testID="markdown-preview-Component.tsx"
                                   >
-                                    <Text
-                                      style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
-                                      }
-                                    >
-                                      <Text
-                                        accessibilityLabel="This is the "
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        This is the 
-                                      </Text>
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontWeight": "700",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="main"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          main
-                                        </Text>
-                                      </Text>
-                                      <Text
-                                        accessibilityLabel=" entry point for the application"
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                         entry point for the application
-                                      </Text>
-                                    </Text>
+                                    Component.tsx
                                   </Text>
                                 </View>
                               </View>
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        testID="message-content-File with description"
-                      >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-TypeScript component"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="File with description"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                File with description
+                                <Text
+                                  accessibilityLabel="TypeScript component"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  TypeScript component
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r34:"
+      orderKey=":r32:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r34:"
+        orderKey=":r32:"
       >
         <View
           accessibilityState={
@@ -46793,354 +51718,541 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r34:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Configuration file.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Configuration file"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r32:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
+                  >
+                    <View
+                      accessible={true}
+                      style={
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
+                      }
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={173}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
                         style={
                           {
-                            "gap": 4,
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
                           }
                         }
                       >
-                        <View
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={174}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
-                            {
-                              "gap": 4,
-                            }
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
                           <View
-                            accessibilityState={
+                            collapsable={false}
+                            style={
                               {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
                               }
                             }
-                            accessibilityValue={
+                          />
+                          <View
+                            style={
                               {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "gap": 4,
+                            }
+                          }
+                        >
+                          <View
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-undefined"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-undefined"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      config.json
+                                    </Text>
+                                  </View>
                                   <Text
+                                    accessibilityLabel="config.json"
+                                    numberOfLines={0}
                                     style={
                                       [
                                         {
                                           "backgroundColor": "transparent",
-                                          "flex": 1,
                                           "fontFamily": "Inter",
                                           "fontSize": 16,
-                                          "fontWeight": "500",
+                                          "fontWeight": "400",
+                                          "lineHeight": 22,
                                           "textAlign": "left",
                                         },
                                         {
                                           "color": "#2F343D",
+                                          "lineHeight": undefined,
                                         },
                                       ]
                                     }
+                                    testID="markdown-preview-config.json"
                                   >
-                                    document.pdf
+                                    config.json
                                   </Text>
                                 </View>
-                                <Text
-                                  accessibilityLabel="document.pdf"
-                                  numberOfLines={0}
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                        "lineHeight": undefined,
-                                      },
-                                    ]
-                                  }
-                                  testID="markdown-preview-document.pdf"
-                                >
-                                  document.pdf
-                                </Text>
                               </View>
                             </View>
                           </View>
                         </View>
                         <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
+                          testID="message-content-Configuration file"
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 2,
                               }
                             }
-                            testID="reply-undefined-undefined"
                           >
-                            <View
+                            <Text
                               style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
-                              <View
+                              <Text
                                 style={
                                   {
-                                    "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
                                   }
                                 }
                               >
-                                <View
-                                  style={
-                                    {
-                                      "alignItems": "center",
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "gap": 4,
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    image.png
-                                  </Text>
-                                </View>
                                 <Text
-                                  accessibilityLabel="image.png"
-                                  numberOfLines={0}
+                                  accessibilityLabel="Configuration file"
                                   style={
                                     [
                                       {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
+                                        "flexShrink": 1,
                                         "fontSize": 16,
-                                        "fontWeight": "400",
                                         "lineHeight": 22,
-                                        "textAlign": "left",
                                       },
                                       {
                                         "color": "#2F343D",
-                                        "lineHeight": undefined,
                                       },
                                     ]
                                   }
-                                  testID="markdown-preview-image.png"
                                 >
-                                  image.png
+                                  Configuration file
                                 </Text>
-                              </View>
-                            </View>
+                              </Text>
+                            </Text>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r35:"
+      orderKey=":r33:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r35:"
+        orderKey=":r33:"
       >
         <View
           accessibilityState={
@@ -47173,260 +52285,318 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  multi file.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="multi file"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r35:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  File with description.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="File with description"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r33:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={175}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={176}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -47442,364 +52612,291 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-File.pdf"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-This is the **main** entry point for the application"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
-                                    }
-                                  }
-                                />
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
                                     <Text
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      main.go
+                                    </Text>
+                                  </View>
+                                  <View
+                                    style={
+                                      {
+                                        "gap": 2,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
-                                        accessibilityLabel="File.pdf"
                                         style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
                                         }
                                       >
-                                        File.pdf
-                                      </Text>
+                                        <Text
+                                          accessibilityLabel="This is the "
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          This is the 
+                                        </Text>
+                                        <Text
+                                          style={
+                                            {
+                                              "backgroundColor": "transparent",
+                                              "fontFamily": "Inter",
+                                              "fontWeight": "700",
+                                              "textAlign": "left",
+                                            }
+                                          }
+                                        >
+                                          <Text
+                                            accessibilityLabel="main"
+                                            style={
+                                              [
+                                                {
+                                                  "flexShrink": 1,
+                                                  "fontSize": 16,
+                                                  "lineHeight": 22,
+                                                },
+                                                {
+                                                  "color": "#2F343D",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            main
+                                          </Text>
+                                        </Text>
+                                        <Text
+                                          accessibilityLabel=" entry point for the application"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                           entry point for the application
+                                        </Text>
+                                      </Text>
                                     </Text>
-                                  </Text>
+                                  </View>
                                 </View>
                               </View>
                             </View>
                           </View>
                         </View>
                         <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
+                          testID="message-content-File with description"
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 2,
                               }
                             }
-                            testID="reply-undefined-File.pdf"
                           >
-                            <View
+                            <Text
                               style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
-                              <View
+                              <Text
                                 style={
                                   {
-                                    "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
                                   }
                                 }
                               >
-                                <View
-                                  style={
-                                    {
-                                      "alignItems": "center",
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "gap": 4,
-                                    }
-                                  }
-                                />
-                                <View
+                                <Text
+                                  accessibilityLabel="File with description"
                                   style={
-                                    {
-                                      "gap": 2,
-                                    }
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
                                   }
                                 >
-                                  <Text
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
-                                      style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
-                                      }
-                                    >
-                                      <Text
-                                        accessibilityLabel="File.pdf"
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        File.pdf
-                                      </Text>
-                                    </Text>
-                                  </Text>
-                                </View>
-                              </View>
-                            </View>
-                          </View>
-                        </View>
-                      </View>
-                      <View
-                        testID="message-content-multi file"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="multi file"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                multi file
+                                  File with description
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: FullName should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r36:"
+      orderKey=":r34:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r36:"
+        orderKey=":r34:"
       >
         <View
           accessibilityState={
@@ -47832,349 +52929,378 @@ exports[`Story Snapshots: FullName should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="Diego Mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r36:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r34:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
                       }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
                     }
-                  }
-                >
+                  />
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
                             "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-Diego Mello"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          Diego Mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message"
                       >
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "gap": 4,
                             }
                           }
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 4,
+                              }
                             }
                           >
-                            <Text
-                              style={
+                            <View
+                              accessibilityState={
                                 {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-undefined"
                             >
-                              <Text
-                                accessibilityLabel="Message"
+                              <View
                                 style={
-                                  [
+                                  {
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
                                     {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                      "flex": 1,
+                                      "flexDirection": "column",
+                                      "gap": 4,
+                                      "width": 200,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      document.pdf
+                                    </Text>
+                                  </View>
+                                  <Text
+                                    accessibilityLabel="document.pdf"
+                                    numberOfLines={0}
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 16,
+                                          "fontWeight": "400",
+                                          "lineHeight": 22,
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                          "lineHeight": undefined,
+                                        },
+                                      ]
+                                    }
+                                    testID="markdown-preview-document.pdf"
+                                  >
+                                    document.pdf
+                                  </Text>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View
+                            style={
+                              {
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-undefined"
+                            >
+                              <View
+                                style={
+                                  {
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
+                                  }
                                 }
                               >
-                                Message
-                              </Text>
-                            </Text>
-                          </Text>
+                                <View
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "flexDirection": "column",
+                                      "gap": 4,
+                                      "width": 200,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      image.png
+                                    </Text>
+                                  </View>
+                                  <Text
+                                    accessibilityLabel="image.png"
+                                    numberOfLines={0}
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 16,
+                                          "fontWeight": "400",
+                                          "lineHeight": 22,
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                          "lineHeight": undefined,
+                                        },
+                                      ]
+                                    }
+                                    testID="markdown-preview-image.png"
+                                  >
+                                    image.png
+                                  </Text>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
+                  />
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: FullNameLargeFont should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r37:"
+      orderKey=":r35:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r37:"
+        orderKey=":r35:"
       >
         <View
           accessibilityState={
@@ -48207,324 +53333,684 @@ exports[`Story Snapshots: FullNameLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="Diego Mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r37:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  multi file.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="multi file"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r35:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={177}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-Diego Mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={178}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          Diego Mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message"
                       >
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "gap": 4,
                             }
                           }
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 4,
+                              }
                             }
                           >
-                            <Text
-                              style={
+                            <View
+                              accessibilityState={
                                 {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-File.pdf"
                             >
-                              <Text
-                                accessibilityLabel="Message"
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
+                                  }
                                 }
                               >
-                                Message
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
+                                <View
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "flexDirection": "column",
+                                      "gap": 4,
+                                      "width": 200,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  />
+                                  <View
+                                    style={
+                                      {
+                                        "gap": 2,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      <Text
+                                        style={
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          accessibilityLabel="File.pdf"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          File.pdf
+                                        </Text>
+                                      </Text>
+                                    </Text>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View
+                            style={
+                              {
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-File.pdf"
+                            >
+                              <View
+                                style={
+                                  {
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "flexDirection": "column",
+                                      "gap": 4,
+                                      "width": 200,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  />
+                                  <View
+                                    style={
+                                      {
+                                        "gap": 2,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      <Text
+                                        style={
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          accessibilityLabel="File.pdf"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          File.pdf
+                                        </Text>
+                                      </Text>
+                                    </Text>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                        <View
+                          testID="message-content-multi file"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="multi file"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  multi file
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -48533,7 +54019,7 @@ exports[`Story Snapshots: FullNameLargeFont should match snapshot 1`] = `
 </RCTScrollView>
 `;
 
-exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
+exports[`Story Snapshots: FullName should match snapshot 1`] = `
 <RCTScrollView
   style={
     {
@@ -48543,13 +54029,13 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
 >
   <View>
     <A11yOrderView
-      orderKey=":r38:"
+      orderKey=":r36:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r38:"
+        orderKey=":r36:"
       >
         <View
           accessibilityState={
@@ -48582,336 +54068,415 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  ....  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="..."
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r38:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="Diego Mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r36:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={179}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={180}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-Diego Mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Diego Mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-..."
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="..."
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                ...
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: FullNameLargeFont should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r39:"
+      orderKey=":r37:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r39:"
+        orderKey=":r37:"
       >
         <View
           accessibilityState={
@@ -48944,336 +54509,415 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 10:00:00 AM  Different user.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Different user"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r39:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="Diego Mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r37:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'s avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={181}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={182}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-Diego Mello"
+                          underlayColor="#E4E7EA"
                         >
-                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Diego Mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Different user"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Different user"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Different user
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r3a:"
+      orderKey=":r38:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3a:"
+        orderKey=":r38:"
       >
         <View
           accessibilityState={
@@ -49306,153 +54950,402 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is the third message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is the third message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3a:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  ....  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="..."
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r38:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
-                        "flex": 1,
+                        "alignItems": "flex-end",
+                        "width": 36,
                       }
                     }
                   >
                     <View
+                      accessible={true}
                       style={
-                        {
-                          "gap": 4,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <View
-                        testID="message-content-This is the third message"
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={183}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
                       >
                         <View
+                          collapsable={false}
                           style={
                             {
-                              "gap": 2,
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
                             }
                           }
-                        >
-                          <Text
-                            style={
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
                                 },
                               ]
                             }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
                               }
-                            >
-                              <Text
-                                accessibilityLabel="This is the third message"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                This is the third message
-                              </Text>
-                            </Text>
-                          </Text>
+                            }
+                            transition={null}
+                            width={36}
+                          />
                         </View>
-                      </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
+                        {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={184}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-..."
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="..."
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  ...
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r3b:"
+      orderKey=":r39:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3b:"
+        orderKey=":r39:"
       >
         <View
           accessibilityState={
@@ -49485,153 +55378,402 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is the second message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is the second message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3b:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 10:00:00 AM  Different user.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Different user"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r39:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  >
+                    <View
+                      accessible={true}
+                      style={
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
+                      }
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={185}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'s avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-This is the second message"
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
                       >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={186}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "flexDirection": "row",
                             }
                           }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Different user"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This is the second message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This is the second message
+                                <Text
+                                  accessibilityLabel="Different user"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Different user
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r3c:"
+      orderKey=":r3a:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3c:"
+        orderKey=":r3a:"
       >
         <View
           accessibilityState={
@@ -49664,349 +55806,167 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is the first message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is the first message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3c:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is the third message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is the third message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3a:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
+                      onLayout={[Function]}
                       style={
                         {
-                          "opacity": 1,
+                          "flex": 1,
                         }
                       }
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
+                      <View
+                        style={
                           {
-                            "left": "50%",
-                            "top": "50%",
+                            "gap": 4,
                           }
                         }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-This is the first message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This is the third message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This is the first message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This is the first message
+                                <Text
+                                  accessibilityLabel="This is the third message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This is the third message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
+                  />
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r3d:"
+      orderKey=":r3b:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3d:"
+        orderKey=":r3b:"
       >
         <View
           accessibilityState={
@@ -50039,336 +55999,167 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  ....  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="..."
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3d:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is the second message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is the second message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3b:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
                       }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
-                          }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
                     }
-                  }
-                >
+                  />
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
                             "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-..."
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This is the second message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="..."
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                ...
+                                <Text
+                                  accessibilityLabel="This is the second message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This is the second message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
+                  />
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r3e:"
+      orderKey=":r3c:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3e:"
+        orderKey=":r3c:"
       >
         <View
           accessibilityState={
@@ -50401,336 +56192,415 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 10:00:00 AM  Different user.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Different user"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3e:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is the first message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is the first message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3c:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'s avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={187}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={188}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Different user"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This is the first message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Different user"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Different user
+                                <Text
+                                  accessibilityLabel="This is the first message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This is the first message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r3f:"
+      orderKey=":r3d:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3f:"
+        orderKey=":r3d:"
       >
         <View
           accessibilityState={
@@ -50763,332 +56633,402 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is the third message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is the third message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3f:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  ....  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="..."
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3d:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
-                        "flex": 1,
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
                       }
                     }
                   >
                     <View
+                      accessible={true}
                       style={
-                        {
-                          "gap": 4,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <View
-                        testID="message-content-This is the third message"
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={189}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
                       >
                         <View
+                          collapsable={false}
                           style={
                             {
-                              "gap": 2,
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
                             }
                           }
-                        >
-                          <Text
-                            style={
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
                                 },
                               ]
                             }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
                               }
-                            >
-                              <Text
-                                accessibilityLabel="This is the third message"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                This is the third message
-                              </Text>
-                            </Text>
-                          </Text>
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
                         </View>
-                      </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                />
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r3g:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r3g:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
-        >
-          <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is the second message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
-          >
-            <A11yIndexView
-              accessibilityLabel="This is the second message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3g:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-This is the second message"
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
                       >
-                        <View
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={190}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
-                            {
-                              "gap": 2,
-                            }
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          <Text
+                          <View
+                            collapsable={false}
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
                           >
                             <Text
+                              numberOfLines={1}
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-..."
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This is the second message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This is the second message
+                                <Text
+                                  accessibilityLabel="..."
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  ...
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r3h:"
+      orderKey=":r3e:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3h:"
+        orderKey=":r3e:"
       >
         <View
           accessibilityState={
@@ -51121,349 +57061,402 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is the first message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is the first message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3h:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 10:00:00 AM  Different user.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Different user"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3e:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={191}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'s avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={192}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-This is the first message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Different user"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This is the first message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This is the first message
+                                <Text
+                                  accessibilityLabel="Different user"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Different user
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: Ignored should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r3i:"
+      orderKey=":r3f:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3i:"
+        orderKey=":r3f:"
       >
         <View
           accessibilityState={
@@ -51496,179 +57489,152 @@ exports[`Story Snapshots: Ignored should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is the third message.  "
+              accessible={true}
+              style={
                 {
                   "flexDirection": "column",
                   "gap": 8,
                   "paddingHorizontal": 12,
                   "paddingVertical": 4,
                   "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
-          >
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
+                }
               }
+              testID="message-undefined"
             >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
-                }
+              <A11yIndexView
+                accessibilityLabel="This is the third message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3f:"
               >
                 <View
                   accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 20,
-                        "width": 20,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "flexDirection": "row",
+                    }
                   }
-                  testID="avatar"
                 >
                   <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
+                    style={
                       {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
                       }
                     }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
+                  />
+                  <View
                     style={
                       {
-                        "opacity": 1,
+                        "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
+                    <View
+                      onLayout={[Function]}
+                      style={
                         {
-                          "left": "50%",
-                          "top": "50%",
+                          "flex": 1,
                         }
                       }
-                      height={20}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
-                        [
+                    >
+                      <View
+                        style={
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                          },
-                        ]
-                      }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 20,
-                          "width": 20,
+                            "gap": 4,
+                          }
                         }
-                      }
-                      transition={null}
-                      width={20}
-                    />
+                      >
+                        <View
+                          testID="message-content-This is the third message"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="This is the third message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This is the third message
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
                   </View>
-                </View>
-              </View>
-              <A11yIndexView
-                accessibilityLabel=""
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r3i:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    testID="message-content-"
-                  >
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
+                    style={
+                      {
+                        "flexDirection": "row",
                       }
-                      testID="message-ignored-undefined"
-                    >
-                      Message ignored. Tap to display it.
-                    </Text>
-                  </View>
+                    }
+                  />
                 </View>
               </A11yIndexView>
             </View>
@@ -51676,27 +57642,14 @@ exports[`Story Snapshots: Ignored should match snapshot 1`] = `
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: IgnoredLargeFont should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r3j:"
+      orderKey=":r3g:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3j:"
+        orderKey=":r3g:"
       >
         <View
           accessibilityState={
@@ -51729,179 +57682,152 @@ exports[`Story Snapshots: IgnoredLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is the second message.  "
+              accessible={true}
+              style={
                 {
                   "flexDirection": "column",
                   "gap": 8,
                   "paddingHorizontal": 12,
                   "paddingVertical": 4,
                   "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
-          >
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
+                }
               }
+              testID="message-undefined"
             >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
-                  }
-                }
+              <A11yIndexView
+                accessibilityLabel="This is the second message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3g:"
               >
                 <View
                   accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 26,
-                        "width": 26,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "flexDirection": "row",
+                    }
                   }
-                  testID="avatar"
                 >
                   <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
+                    style={
                       {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
                       }
                     }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
+                  />
+                  <View
                     style={
                       {
-                        "opacity": 1,
+                        "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
+                    <View
+                      onLayout={[Function]}
+                      style={
                         {
-                          "left": "50%",
-                          "top": "50%",
+                          "flex": 1,
                         }
                       }
-                      height={26}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
-                        [
+                    >
+                      <View
+                        style={
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                          },
-                        ]
-                      }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 26,
-                          "width": 26,
+                            "gap": 4,
+                          }
                         }
-                      }
-                      transition={null}
-                      width={26}
-                    />
+                      >
+                        <View
+                          testID="message-content-This is the second message"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="This is the second message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This is the second message
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
                   </View>
-                </View>
-              </View>
-              <A11yIndexView
-                accessibilityLabel=""
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r3j:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    testID="message-content-"
-                  >
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
+                    style={
+                      {
+                        "flexDirection": "row",
                       }
-                      testID="message-ignored-undefined"
-                    >
-                      Message ignored. Tap to display it.
-                    </Text>
-                  </View>
+                    }
+                  />
                 </View>
               </A11yIndexView>
             </View>
@@ -51909,27 +57835,14 @@ exports[`Story Snapshots: IgnoredLargeFont should match snapshot 1`] = `
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: InlineKatex should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r3k:"
+      orderKey=":r3h:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3k:"
+        orderKey=":r3h:"
       >
         <View
           accessibilityState={
@@ -51962,310 +57875,390 @@ exports[`Story Snapshots: InlineKatex should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  \\(xˆ2 + yˆ2 - zˆ2\\).  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="\\(xˆ2 + yˆ2 - zˆ2\\)"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3k:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is the first message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is the first message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3h:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={193}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={194}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-\\(xˆ2 + yˆ2 - zˆ2\\)"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This is the first message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
-                              <Text>
-                                xˆ2 + yˆ2 - zˆ2
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="This is the first message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This is the first message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -52274,7 +58267,7 @@ exports[`Story Snapshots: InlineKatex should match snapshot 1`] = `
 </RCTScrollView>
 `;
 
-exports[`Story Snapshots: InlineKatexLargeFont should match snapshot 1`] = `
+exports[`Story Snapshots: Ignored should match snapshot 1`] = `
 <RCTScrollView
   style={
     {
@@ -52284,13 +58277,13 @@ exports[`Story Snapshots: InlineKatexLargeFont should match snapshot 1`] = `
 >
   <View>
     <A11yOrderView
-      orderKey=":r3l:"
+      orderKey=":r3i:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3l:"
+        orderKey=":r3i:"
       >
         <View
           accessibilityState={
@@ -52323,44 +58316,56 @@ exports[`Story Snapshots: InlineKatexLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  \\(xˆ2 + yˆ2 - zˆ2\\).  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="\\(xˆ2 + yˆ2 - zˆ2\\)"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3l:"
+            <View
+              style={
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
+              }
             >
               <View
+                accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
                 accessible={true}
                 style={
-                  {
-                    "flexDirection": "row",
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
                   style={
                     {
                       "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "width": 36,
                     }
                   }
                 >
@@ -52370,263 +58375,162 @@ exports[`Story Snapshots: InlineKatexLargeFont should match snapshot 1`] = `
                       [
                         {
                           "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
+                          "height": 20,
+                          "width": 20,
                         },
+                        undefined,
                       ]
                     }
                     testID="avatar"
                   >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
                       collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={195}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
+                          },
+                        ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
+                      <View
+                        collapsable={false}
+                        style={
                           {
-                            "left": "50%",
-                            "top": "50%",
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
                           }
                         }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={20}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
                               },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                            ]
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
-                    </View>
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 20,
+                              "width": 20,
+                            }
+                          }
+                          transition={null}
+                          width={20}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
                 </View>
-                <View
+                <A11yIndexView
+                  accessibilityLabel=""
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r3i:"
                   style={
                     {
                       "flex": 1,
-                      "marginLeft": 10,
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
-                      style={
-                        {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
+                      testID="message-content-"
                     >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
-                      <View
-                        testID="message-content-\\(xˆ2 + yˆ2 - zˆ2\\)"
+                        testID="message-ignored-undefined"
                       >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text>
-                                xˆ2 + yˆ2 - zˆ2
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
+                        Message ignored. Tap to display it.
+                      </Text>
                     </View>
                   </View>
-                </View>
+                </A11yIndexView>
               </View>
-            </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -52635,7 +58539,7 @@ exports[`Story Snapshots: InlineKatexLargeFont should match snapshot 1`] = `
 </RCTScrollView>
 `;
 
-exports[`Story Snapshots: Katex should match snapshot 1`] = `
+exports[`Story Snapshots: IgnoredLargeFont should match snapshot 1`] = `
 <RCTScrollView
   style={
     {
@@ -52645,13 +58549,13 @@ exports[`Story Snapshots: Katex should match snapshot 1`] = `
 >
   <View>
     <A11yOrderView
-      orderKey=":r3m:"
+      orderKey=":r3j:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3m:"
+        orderKey=":r3j:"
       >
         <View
           accessibilityState={
@@ -52684,44 +58588,56 @@ exports[`Story Snapshots: Katex should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  \\[ \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }\\].  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="\\[ \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }\\]"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3m:"
+            <View
+              style={
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
+              }
             >
               <View
+                accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
                 accessible={true}
                 style={
-                  {
-                    "flexDirection": "row",
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
                   style={
                     {
                       "alignItems": "flex-end",
-                      "width": 36,
+                      "width": 46.800000000000004,
                     }
                   }
                 >
@@ -52731,231 +58647,162 @@ exports[`Story Snapshots: Katex should match snapshot 1`] = `
                       [
                         {
                           "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
+                          "height": 26,
+                          "width": 26,
                         },
+                        undefined,
                       ]
                     }
                     testID="avatar"
                   >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
                       collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={196}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
+                          },
+                        ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
+                      <View
+                        collapsable={false}
+                        style={
                           {
-                            "left": "50%",
-                            "top": "50%",
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
                           }
                         }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={26}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
                               },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                            ]
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 26,
+                              "width": 26,
+                            }
+                          }
+                          transition={null}
+                          width={26}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
                 </View>
-                <View
+                <A11yIndexView
+                  accessibilityLabel=""
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r3j:"
                   style={
                     {
                       "flex": 1,
-                      "marginLeft": 10,
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
-                      style={
-                        {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
+                      testID="message-content-"
                     >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
-                      <View
-                        testID="message-content-\\[ \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }\\]"
+                        testID="message-ignored-undefined"
                       >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <View />
-                        </View>
-                      </View>
+                        Message ignored. Tap to display it.
+                      </Text>
                     </View>
                   </View>
-                </View>
+                </A11yIndexView>
               </View>
-            </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -52964,7 +58811,7 @@ exports[`Story Snapshots: Katex should match snapshot 1`] = `
 </RCTScrollView>
 `;
 
-exports[`Story Snapshots: KatexArray should match snapshot 1`] = `
+exports[`Story Snapshots: InlineKatex should match snapshot 1`] = `
 <RCTScrollView
   style={
     {
@@ -52974,13 +58821,13 @@ exports[`Story Snapshots: KatexArray should match snapshot 1`] = `
 >
   <View>
     <A11yOrderView
-      orderKey=":r3n:"
+      orderKey=":r3k:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3n:"
+        orderKey=":r3k:"
       >
         <View
           accessibilityState={
@@ -53013,278 +58860,376 @@ exports[`Story Snapshots: KatexArray should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  \\begin{array}{|c|c|c|c|c|c|} \\hline \\text{...} & \\text{...} \\\\ \\hline \\end{array}.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="\\begin{array}{|c|c|c|c|c|c|} \\hline \\text{...} & \\text{...} \\\\ \\hline \\end{array}"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3n:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  \\(xˆ2 + yˆ2 - zˆ2\\).  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="\\(xˆ2 + yˆ2 - zˆ2\\)"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3k:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={197}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={198}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-\\begin{array}{|c|c|c|c|c|c|} \\hline \\text{...} & \\text{...} \\\\ \\hline \\end{array}"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-\\(xˆ2 + yˆ2 - zˆ2\\)"
                         >
-                          <View />
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text>
+                                  xˆ2 + yˆ2 - zˆ2
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -53293,7 +59238,7 @@ exports[`Story Snapshots: KatexArray should match snapshot 1`] = `
 </RCTScrollView>
 `;
 
-exports[`Story Snapshots: KatexArrayLargeFont should match snapshot 1`] = `
+exports[`Story Snapshots: InlineKatexLargeFont should match snapshot 1`] = `
 <RCTScrollView
   style={
     {
@@ -53303,13 +59248,13 @@ exports[`Story Snapshots: KatexArrayLargeFont should match snapshot 1`] = `
 >
   <View>
     <A11yOrderView
-      orderKey=":r3o:"
+      orderKey=":r3l:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3o:"
+        orderKey=":r3l:"
       >
         <View
           accessibilityState={
@@ -53342,278 +59287,376 @@ exports[`Story Snapshots: KatexArrayLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  \\begin{array}{|c|c|c|c|c|c|} \\hline \\text{...} & \\text{...} \\\\ \\hline \\end{array}.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="\\begin{array}{|c|c|c|c|c|c|} \\hline \\text{...} & \\text{...} \\\\ \\hline \\end{array}"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3o:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  \\(xˆ2 + yˆ2 - zˆ2\\).  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="\\(xˆ2 + yˆ2 - zˆ2\\)"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3l:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={199}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={200}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-\\begin{array}{|c|c|c|c|c|c|} \\hline \\text{...} & \\text{...} \\\\ \\hline \\end{array}"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-\\(xˆ2 + yˆ2 - zˆ2\\)"
                         >
-                          <View />
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text>
+                                  xˆ2 + yˆ2 - zˆ2
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -53622,7 +59665,7 @@ exports[`Story Snapshots: KatexArrayLargeFont should match snapshot 1`] = `
 </RCTScrollView>
 `;
 
-exports[`Story Snapshots: KatexLargeFont should match snapshot 1`] = `
+exports[`Story Snapshots: Katex should match snapshot 1`] = `
 <RCTScrollView
   style={
     {
@@ -53632,13 +59675,13 @@ exports[`Story Snapshots: KatexLargeFont should match snapshot 1`] = `
 >
   <View>
     <A11yOrderView
-      orderKey=":r3p:"
+      orderKey=":r3m:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3p:"
+        orderKey=":r3m:"
       >
         <View
           accessibilityState={
@@ -53671,278 +59714,344 @@ exports[`Story Snapshots: KatexLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  \\[ \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }\\].  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="\\[ \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }\\]"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3p:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  \\[ \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }\\].  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="\\[ \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }\\]"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3m:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={201}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={202}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-\\[ \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }\\]"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-\\[ \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }\\]"
                         >
-                          <View />
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <View />
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -53951,7 +60060,7 @@ exports[`Story Snapshots: KatexLargeFont should match snapshot 1`] = `
 </RCTScrollView>
 `;
 
-exports[`Story Snapshots: Lists should match snapshot 1`] = `
+exports[`Story Snapshots: KatexArray should match snapshot 1`] = `
 <RCTScrollView
   style={
     {
@@ -53961,13 +60070,13 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
 >
   <View>
     <A11yOrderView
-      orderKey=":r3q:"
+      orderKey=":r3n:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3q:"
+        orderKey=":r3n:"
       >
         <View
           accessibilityState={
@@ -54000,518 +60109,369 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  * Dogs
-* cats
-- cats.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="* Dogs
-* cats
-- cats"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3q:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  \\begin{array}{|c|c|c|c|c|c|} \\hline \\text{...} & \\text{...} \\\\ \\hline \\end{array}.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="\\begin{array}{|c|c|c|c|c|c|} \\hline \\text{...} & \\text{...} \\\\ \\hline \\end{array}"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3n:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={203}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
+                    style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={204}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-* Dogs
-* cats
-- cats"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-\\begin{array}{|c|c|c|c|c|c|} \\hline \\text{...} & \\text{...} \\\\ \\hline \\end{array}"
                         >
-                          <View>
-                            <View
-                              style={
-                                {
-                                  "flexDirection": "row",
-                                }
-                              }
-                            >
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                • 
-                              </Text>
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                <Text
-                                  style={
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    accessibilityLabel="Dogs"
-                                    style={
-                                      [
-                                        {
-                                          "flexShrink": 1,
-                                          "fontSize": 16,
-                                          "lineHeight": 22,
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    Dogs
-                                  </Text>
-                                </Text>
-                              </Text>
-                            </View>
-                            <View
-                              style={
-                                {
-                                  "flexDirection": "row",
-                                }
-                              }
-                            >
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                • 
-                              </Text>
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                <Text
-                                  style={
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    accessibilityLabel="cats"
-                                    style={
-                                      [
-                                        {
-                                          "flexShrink": 1,
-                                          "fontSize": 16,
-                                          "lineHeight": 22,
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    cats
-                                  </Text>
-                                </Text>
-                              </Text>
-                            </View>
-                          </View>
-                          <View>
-                            <View
-                              style={
-                                {
-                                  "flexDirection": "row",
-                                }
+                          <View
+                            style={
+                              {
+                                "gap": 2,
                               }
-                            >
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                • 
-                              </Text>
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                <Text
-                                  style={
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    accessibilityLabel="cats"
-                                    style={
-                                      [
-                                        {
-                                          "flexShrink": 1,
-                                          "fontSize": 16,
-                                          "lineHeight": 22,
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    cats
-                                  </Text>
-                                </Text>
-                              </Text>
-                            </View>
+                            }
+                          >
+                            <View />
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: KatexArrayLargeFont should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r3r:"
+      orderKey=":r3o:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3r:"
+        orderKey=":r3o:"
       >
         <View
           accessibilityState={
@@ -54544,468 +60504,369 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  1. Dogs 
-2. Cats.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="1. Dogs 
-2. Cats"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3r:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  \\begin{array}{|c|c|c|c|c|c|} \\hline \\text{...} & \\text{...} \\\\ \\hline \\end{array}.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="\\begin{array}{|c|c|c|c|c|c|} \\hline \\text{...} & \\text{...} \\\\ \\hline \\end{array}"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3o:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={205}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={206}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-1. Dogs 
-2. Cats"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-\\begin{array}{|c|c|c|c|c|c|} \\hline \\text{...} & \\text{...} \\\\ \\hline \\end{array}"
                         >
-                          <View>
-                            <View
-                              style={
-                                {
-                                  "flexDirection": "row",
-                                }
-                              }
-                            >
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                1
-                                . 
-                              </Text>
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                <Text
-                                  style={
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    accessibilityLabel="Dogs "
-                                    style={
-                                      [
-                                        {
-                                          "flexShrink": 1,
-                                          "fontSize": 16,
-                                          "lineHeight": 22,
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    Dogs 
-                                  </Text>
-                                </Text>
-                              </Text>
-                            </View>
-                            <View
-                              style={
-                                {
-                                  "flexDirection": "row",
-                                }
+                          <View
+                            style={
+                              {
+                                "gap": 2,
                               }
-                            >
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                2
-                                . 
-                              </Text>
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                <Text
-                                  style={
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    accessibilityLabel="Cats"
-                                    style={
-                                      [
-                                        {
-                                          "flexShrink": 1,
-                                          "fontSize": 16,
-                                          "lineHeight": 22,
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    Cats
-                                  </Text>
-                                </Text>
-                              </Text>
-                            </View>
+                            }
+                          >
+                            <View />
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: KatexLargeFont should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r3s:"
+      orderKey=":r3p:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3s:"
+        orderKey=":r3p:"
       >
         <View
           accessibilityState={
@@ -55038,587 +60899,344 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  1. Dogs.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="1. Dogs"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3s:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  \\[ \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }\\].  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="\\[ \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }\\]"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3p:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={207}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={208}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-1. Dogs"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-\\[ \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }\\]"
                         >
-                          <View>
-                            <View
-                              style={
-                                {
-                                  "flexDirection": "row",
-                                }
-                              }
-                            >
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                1
-                                . 
-                              </Text>
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                <Text
-                                  style={
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    accessibilityLabel="Dogs"
-                                    style={
-                                      [
-                                        {
-                                          "flexShrink": 1,
-                                          "fontSize": 16,
-                                          "lineHeight": 22,
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    Dogs
-                                  </Text>
-                                </Text>
-                              </Text>
-                            </View>
-                          </View>
-                        </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r3t:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r3t:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
-        >
-          <View
-            accessibilityLabel="diego.mello 10:00:00 AM  2. Cats.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
-          >
-            <A11yIndexView
-              accessibilityLabel="2. Cats"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3t:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-2. Cats"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <View>
-                            <View
-                              style={
-                                {
-                                  "flexDirection": "row",
-                                }
+                          <View
+                            style={
+                              {
+                                "gap": 2,
                               }
-                            >
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                2
-                                . 
-                              </Text>
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                <Text
-                                  style={
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    accessibilityLabel="Cats"
-                                    style={
-                                      [
-                                        {
-                                          "flexShrink": 1,
-                                          "fontSize": 16,
-                                          "lineHeight": 22,
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    Cats
-                                  </Text>
-                                </Text>
-                              </Text>
-                            </View>
+                            }
+                          >
+                            <View />
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -55627,7 +61245,7 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
 </RCTScrollView>
 `;
 
-exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
+exports[`Story Snapshots: Lists should match snapshot 1`] = `
 <RCTScrollView
   style={
     {
@@ -55637,13 +61255,13 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
 >
   <View>
     <A11yOrderView
-      orderKey=":r3u:"
+      orderKey=":r3q:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3u:"
+        orderKey=":r3q:"
       >
         <View
           accessibilityState={
@@ -55676,497 +61294,563 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  * Dogs
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  * Dogs
 * cats
 - cats.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
+                }
               }
-            }
-            testID="message-undefined"
-          >
-            <A11yIndexView
-              accessibilityLabel="* Dogs
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="* Dogs
 * cats
 - cats"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3u:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3q:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={209}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={210}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-* Dogs
-* cats
-- cats"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-* Dogs
+* cats
+- cats"
                         >
-                          <View>
-                            <View
-                              style={
-                                {
-                                  "flexDirection": "row",
-                                }
+                          <View
+                            style={
+                              {
+                                "gap": 2,
                               }
-                            >
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                • 
-                              </Text>
-                              <Text
+                            }
+                          >
+                            <View>
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "flexDirection": "row",
+                                  }
                                 }
                               >
                                 <Text
                                   style={
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    }
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  • 
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
                                   }
                                 >
                                   <Text
-                                    accessibilityLabel="Dogs"
                                     style={
-                                      [
-                                        {
-                                          "flexShrink": 1,
-                                          "fontSize": 16,
-                                          "lineHeight": 22,
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      }
                                     }
                                   >
-                                    Dogs
+                                    <Text
+                                      accessibilityLabel="Dogs"
+                                      style={
+                                        [
+                                          {
+                                            "flexShrink": 1,
+                                            "fontSize": 16,
+                                            "lineHeight": 22,
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Dogs
+                                    </Text>
                                   </Text>
                                 </Text>
-                              </Text>
-                            </View>
-                            <View
-                              style={
-                                {
-                                  "flexDirection": "row",
-                                }
-                              }
-                            >
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                • 
-                              </Text>
-                              <Text
+                              </View>
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "flexDirection": "row",
+                                  }
                                 }
                               >
                                 <Text
                                   style={
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    }
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  • 
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
                                   }
                                 >
                                   <Text
-                                    accessibilityLabel="cats"
                                     style={
-                                      [
-                                        {
-                                          "flexShrink": 1,
-                                          "fontSize": 16,
-                                          "lineHeight": 22,
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      }
                                     }
                                   >
-                                    cats
+                                    <Text
+                                      accessibilityLabel="cats"
+                                      style={
+                                        [
+                                          {
+                                            "flexShrink": 1,
+                                            "fontSize": 16,
+                                            "lineHeight": 22,
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      cats
+                                    </Text>
                                   </Text>
                                 </Text>
-                              </Text>
+                              </View>
                             </View>
-                          </View>
-                          <View>
-                            <View
-                              style={
-                                {
-                                  "flexDirection": "row",
-                                }
-                              }
-                            >
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                • 
-                              </Text>
-                              <Text
+                            <View>
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "flexDirection": "row",
+                                  }
                                 }
                               >
                                 <Text
                                   style={
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    }
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  • 
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
                                   }
                                 >
                                   <Text
-                                    accessibilityLabel="cats"
                                     style={
-                                      [
-                                        {
-                                          "flexShrink": 1,
-                                          "fontSize": 16,
-                                          "lineHeight": 22,
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      }
                                     }
                                   >
-                                    cats
+                                    <Text
+                                      accessibilityLabel="cats"
+                                      style={
+                                        [
+                                          {
+                                            "flexShrink": 1,
+                                            "fontSize": 16,
+                                            "lineHeight": 22,
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      cats
+                                    </Text>
                                   </Text>
                                 </Text>
-                              </Text>
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -56174,20 +61858,20 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r3v:"
+      orderKey=":r3r:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r3v:"
+        orderKey=":r3r:"
       >
         <View
           accessibilityState={
@@ -56220,447 +61904,513 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  1. Dogs 
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  1. Dogs 
 2. Cats.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
+                }
               }
-            }
-            testID="message-undefined"
-          >
-            <A11yIndexView
-              accessibilityLabel="1. Dogs 
-2. Cats"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3v:"
+              testID="message-undefined"
             >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
+              <A11yIndexView
+                accessibilityLabel="1. Dogs 
+2. Cats"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3r:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={211}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={212}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-1. Dogs 
-2. Cats"
-                      >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "flexDirection": "row",
                             }
                           }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-1. Dogs 
+2. Cats"
                         >
-                          <View>
-                            <View
-                              style={
-                                {
-                                  "flexDirection": "row",
-                                }
+                          <View
+                            style={
+                              {
+                                "gap": 2,
                               }
-                            >
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                1
-                                . 
-                              </Text>
-                              <Text
+                            }
+                          >
+                            <View>
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "flexDirection": "row",
+                                  }
                                 }
                               >
                                 <Text
                                   style={
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    }
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  1
+                                  . 
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
                                   }
                                 >
                                   <Text
-                                    accessibilityLabel="Dogs "
                                     style={
-                                      [
-                                        {
-                                          "flexShrink": 1,
-                                          "fontSize": 16,
-                                          "lineHeight": 22,
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      }
                                     }
                                   >
-                                    Dogs 
+                                    <Text
+                                      accessibilityLabel="Dogs "
+                                      style={
+                                        [
+                                          {
+                                            "flexShrink": 1,
+                                            "fontSize": 16,
+                                            "lineHeight": 22,
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Dogs 
+                                    </Text>
                                   </Text>
                                 </Text>
-                              </Text>
-                            </View>
-                            <View
-                              style={
-                                {
-                                  "flexDirection": "row",
-                                }
-                              }
-                            >
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                2
-                                . 
-                              </Text>
-                              <Text
+                              </View>
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "flexDirection": "row",
+                                  }
                                 }
                               >
                                 <Text
                                   style={
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    }
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  2
+                                  . 
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
                                   }
                                 >
                                   <Text
-                                    accessibilityLabel="Cats"
                                     style={
-                                      [
-                                        {
-                                          "flexShrink": 1,
-                                          "fontSize": 16,
-                                          "lineHeight": 22,
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      }
                                     }
                                   >
-                                    Cats
+                                    <Text
+                                      accessibilityLabel="Cats"
+                                      style={
+                                        [
+                                          {
+                                            "flexShrink": 1,
+                                            "fontSize": 16,
+                                            "lineHeight": 22,
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Cats
+                                    </Text>
                                   </Text>
                                 </Text>
-                              </Text>
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -56668,20 +62418,20 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r40:"
+      orderKey=":r3s:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r40:"
+        orderKey=":r3s:"
       >
         <View
           accessibilityState={
@@ -56714,357 +62464,423 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  1. Dogs.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="1. Dogs"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r40:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  1. Dogs.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="1. Dogs"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3s:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={213}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={214}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-1. Dogs"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-1. Dogs"
                         >
-                          <View>
-                            <View
-                              style={
-                                {
-                                  "flexDirection": "row",
-                                }
+                          <View
+                            style={
+                              {
+                                "gap": 2,
                               }
-                            >
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                1
-                                . 
-                              </Text>
-                              <Text
+                            }
+                          >
+                            <View>
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "flexDirection": "row",
+                                  }
                                 }
                               >
                                 <Text
                                   style={
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    }
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  1
+                                  . 
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
                                   }
                                 >
                                   <Text
-                                    accessibilityLabel="Dogs"
                                     style={
-                                      [
-                                        {
-                                          "flexShrink": 1,
-                                          "fontSize": 16,
-                                          "lineHeight": 22,
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      }
                                     }
                                   >
-                                    Dogs
+                                    <Text
+                                      accessibilityLabel="Dogs"
+                                      style={
+                                        [
+                                          {
+                                            "flexShrink": 1,
+                                            "fontSize": 16,
+                                            "lineHeight": 22,
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Dogs
+                                    </Text>
                                   </Text>
                                 </Text>
-                              </Text>
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -57072,20 +62888,20 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r41:"
+      orderKey=":r3t:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r41:"
+        orderKey=":r3t:"
       >
         <View
           accessibilityState={
@@ -57118,183 +62934,197 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  2. Cats.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="2. Cats"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r41:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  2. Cats.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="2. Cats"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3t:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-2. Cats"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-2. Cats"
                         >
-                          <View>
-                            <View
-                              style={
-                                {
-                                  "flexDirection": "row",
-                                }
+                          <View
+                            style={
+                              {
+                                "gap": 2,
                               }
-                            >
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                2
-                                . 
-                              </Text>
-                              <Text
+                            }
+                          >
+                            <View>
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "flexDirection": "row",
+                                  }
                                 }
                               >
                                 <Text
                                   style={
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "flexShrink": 1,
-                                      "fontFamily": "Inter",
-                                      "fontWeight": "400",
-                                      "textAlign": "left",
-                                    }
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  2
+                                  . 
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
                                   }
                                 >
                                   <Text
-                                    accessibilityLabel="Cats"
                                     style={
-                                      [
-                                        {
-                                          "flexShrink": 1,
-                                          "fontSize": 16,
-                                          "lineHeight": 22,
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      }
                                     }
                                   >
-                                    Cats
+                                    <Text
+                                      accessibilityLabel="Cats"
+                                      style={
+                                        [
+                                          {
+                                            "flexShrink": 1,
+                                            "fontSize": 16,
+                                            "lineHeight": 22,
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Cats
+                                    </Text>
                                   </Text>
                                 </Text>
-                              </Text>
+                              </View>
                             </View>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -57303,7 +63133,7 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
 </RCTScrollView>
 `;
 
-exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
+exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
 <RCTScrollView
   style={
     {
@@ -57313,13 +63143,13 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
 >
   <View>
     <A11yOrderView
-      orderKey=":r42:"
+      orderKey=":r3u:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r42:"
+        orderKey=":r3u:"
       >
         <View
           accessibilityState={
@@ -57352,336 +63182,584 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="Long name user looooong name user 10:00:00 AM  this is a normal message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="this is a normal message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r42:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  * Dogs
+* cats
+- cats.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="* Dogs
+* cats
+- cats"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3u:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="Long name user looooong name user's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={215}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-Long name user looooong name user"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={216}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          Long name user looooong name user
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-this is a normal message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-* Dogs
+* cats
+- cats"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
+                            <View>
+                              <View
+                                style={
+                                  {
+                                    "flexDirection": "row",
+                                  }
                                 }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="this is a normal message"
+                              >
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  • 
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <Text
+                                    style={
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      accessibilityLabel="Dogs"
+                                      style={
+                                        [
+                                          {
+                                            "flexShrink": 1,
+                                            "fontSize": 16,
+                                            "lineHeight": 22,
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Dogs
+                                    </Text>
+                                  </Text>
+                                </Text>
+                              </View>
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "flexDirection": "row",
+                                  }
                                 }
                               >
-                                this is a normal message
-                              </Text>
-                            </Text>
-                          </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  • 
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <Text
+                                    style={
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      accessibilityLabel="cats"
+                                      style={
+                                        [
+                                          {
+                                            "flexShrink": 1,
+                                            "fontSize": 16,
+                                            "lineHeight": 22,
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      cats
+                                    </Text>
+                                  </Text>
+                                </Text>
+                              </View>
+                            </View>
+                            <View>
+                              <View
+                                style={
+                                  {
+                                    "flexDirection": "row",
+                                  }
+                                }
+                              >
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  • 
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <Text
+                                    style={
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      accessibilityLabel="cats"
+                                      style={
+                                        [
+                                          {
+                                            "flexShrink": 1,
+                                            "fontSize": 16,
+                                            "lineHeight": 22,
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      cats
+                                    </Text>
+                                  </Text>
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r43:"
+      orderKey=":r3v:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r43:"
+        orderKey=":r3v:"
       >
         <View
           accessibilityState={
@@ -57714,372 +63792,534 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="Long name user looooong name user 10:00:00 AM  Edited message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Edited message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r43:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  1. Dogs 
+2. Cats.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="1. Dogs 
+2. Cats"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3v:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="Long name user looooong name user's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={217}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-Long name user looooong name user"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={218}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          Long name user looooong name user
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <View
-                          style={
-                            {
-                              "paddingLeft": 5,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                          testID="undefined-edited"
-                        >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
+                          />
+                          <View
                             style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                  "fontSize": 16,
-                                },
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
                                 [
                                   {
-                                    "lineHeight": 16,
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
                                   },
-                                  undefined,
-                                ],
-                                {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
-                                },
-                                {},
-                              ]
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
                             }
-                          >
-                            
-                          </Text>
-                        </View>
+                          }
+                        />
                       </View>
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
-                        testID="message-content-Edited message"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-1. Dogs 
+2. Cats"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
+                            <View>
+                              <View
+                                style={
+                                  {
+                                    "flexDirection": "row",
+                                  }
                                 }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Edited message"
+                              >
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  1
+                                  . 
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <Text
+                                    style={
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      accessibilityLabel="Dogs "
+                                      style={
+                                        [
+                                          {
+                                            "flexShrink": 1,
+                                            "fontSize": 16,
+                                            "lineHeight": 22,
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Dogs 
+                                    </Text>
+                                  </Text>
+                                </Text>
+                              </View>
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "flexDirection": "row",
+                                  }
                                 }
                               >
-                                Edited message
-                              </Text>
-                            </Text>
-                          </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  2
+                                  . 
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <Text
+                                    style={
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      accessibilityLabel="Cats"
+                                      style={
+                                        [
+                                          {
+                                            "flexShrink": 1,
+                                            "fontSize": 16,
+                                            "lineHeight": 22,
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Cats
+                                    </Text>
+                                  </Text>
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r44:"
+      orderKey=":r40:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r44:"
+        orderKey=":r40:"
       >
         <View
           accessibilityState={
@@ -58112,372 +64352,444 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="Long name user looooong name user 10:00:00 AM Message translated into English"
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Translated message"
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  1. Dogs.  "
               accessible={true}
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r44:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="1. Dogs"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r40:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="Long name user looooong name user's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={219}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
+                        style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-Long name user looooong name user"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={220}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          Long name user looooong name user
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <View
-                          style={
-                            {
-                              "paddingLeft": 5,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
+                          />
+                          <View
                             style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                  "fontSize": 16,
-                                },
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
                                 [
                                   {
-                                    "lineHeight": 16,
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
                                   },
-                                  undefined,
-                                ],
-                                {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
-                                },
-                                {},
-                              ]
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
                             }
-                          >
-                            
-                          </Text>
-                        </View>
+                          }
+                        />
                       </View>
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
-                        testID="message-content-Translated message"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-1. Dogs"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Translated message"
+                            <View>
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "flexDirection": "row",
+                                  }
                                 }
                               >
-                                Translated message
-                              </Text>
-                            </Text>
-                          </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  1
+                                  . 
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <Text
+                                    style={
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      accessibilityLabel="Dogs"
+                                      style={
+                                        [
+                                          {
+                                            "flexShrink": 1,
+                                            "fontSize": 16,
+                                            "lineHeight": 22,
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Dogs
+                                    </Text>
+                                  </Text>
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r45:"
+      orderKey=":r41:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r45:"
+        orderKey=":r41:"
       >
         <View
           accessibilityState={
@@ -58510,804 +64822,657 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="Long name user looooong name user 10:00:00 AM  Encrypted message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Encrypted message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r45:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  2. Cats.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="2. Cats"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r41:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="Long name user looooong name user's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
                       }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=72",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
                     }
-                  }
-                >
+                  />
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
                             "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-Long name user looooong name user"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          Long name user looooong name user
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={false}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "opacity": 1,
-                              "paddingLeft": 5,
-                            }
                           }
-                        >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
-                            style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                  "fontSize": 16,
-                                },
-                                [
-                                  {
-                                    "lineHeight": 16,
-                                  },
-                                  undefined,
-                                ],
-                                {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            
-                          </Text>
-                        </View>
-                      </View>
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
                         }
-                      }
-                    >
-                      <View
-                        testID="message-content-Encrypted message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-2. Cats"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Encrypted message"
+                            <View>
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "flexDirection": "row",
+                                  }
                                 }
                               >
-                                Encrypted message
-                              </Text>
-                            </Text>
-                          </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  2
+                                  . 
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <Text
+                                    style={
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontWeight": "400",
+                                        "textAlign": "left",
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      accessibilityLabel="Cats"
+                                      style={
+                                        [
+                                          {
+                                            "flexShrink": 1,
+                                            "fontSize": 16,
+                                            "lineHeight": 22,
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Cats
+                                    </Text>
+                                  </Text>
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
+                  />
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r46:"
+      orderKey=":r42:"
     >
-      <View
-        accessibilityLabel="Long name user looooong name user 10:00:00 AM  Error message.  "
-        accessible={true}
-        style={
-          {
-            "flexDirection": "column",
-            "gap": 8,
-            "paddingHorizontal": 12,
-            "paddingVertical": 4,
-            "width": "100%",
-          }
-        }
-        testID="message-undefined"
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r42:"
       >
-        <A11yIndexView
-          accessibilityLabel="Error message"
-          importantForAccessibility="yes"
-          orderFocusType={0}
-          orderIndex={2}
-          orderKey=":r46:"
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
         >
           <View
-            accessible={true}
-            style={
-              {
-                "flexDirection": "row",
-              }
-            }
+            style={{}}
           >
             <View
+              accessibilityLabel="Long name user looooong name user 10:00:00 AM  this is a normal message.  "
+              accessible={true}
               style={
                 {
-                  "alignItems": "flex-end",
-                  "width": 36,
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
               }
+              testID="message-undefined"
             >
-              <View
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 36,
-                      "width": 36,
-                    },
-                    {
-                      "marginTop": 4,
-                    },
-                  ]
-                }
-                testID="avatar"
+              <A11yIndexView
+                accessibilityLabel="this is a normal message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r42:"
               >
                 <View
-                  accessibilityLabel="Long name user looooong name user's avatar"
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
                   accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onClick={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  style={
-                    {
-                      "opacity": 1,
-                    }
-                  }
-                >
-                  <ViewManagerAdapter_ExpoImage
-                    borderRadius={4}
-                    containerViewRef={"[React.ref]"}
-                    contentFit="cover"
-                    contentPosition={
-                      {
-                        "left": "50%",
-                        "top": "50%",
-                      }
-                    }
-                    height={36}
-                    nativeViewRef={"[React.ref]"}
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    onLoadStart={[Function]}
-                    onProgress={[Function]}
-                    placeholder={[]}
-                    priority="high"
-                    source={
-                      [
-                        {
-                          "headers": {
-                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                          },
-                          "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=72",
-                        },
-                      ]
-                    }
-                    style={
-                      {
-                        "borderRadius": 4,
-                        "height": 36,
-                        "width": 36,
-                      }
-                    }
-                    transition={null}
-                    width={36}
-                  />
-                </View>
-              </View>
-            </View>
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "marginLeft": 10,
-                }
-              }
-            >
-              <View
-                onLayout={[Function]}
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
                   style={
                     {
-                      "alignItems": "center",
-                      "flex": 1,
                       "flexDirection": "row",
-                      "justifyContent": "space-between",
                     }
                   }
                 >
                   <View
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "flexShrink": 1,
-                        "gap": 4,
-                        "opacity": 1,
+                        "alignItems": "flex-end",
+                        "width": 36,
                       }
                     }
-                    testID="username-header-Long name user looooong name user"
                   >
-                    <Text
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "600",
-                            "lineHeight": 22,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#1F2329",
-                          },
-                        ]
-                      }
-                    >
-                      Long name user looooong name user
-                    </Text>
-                    <Text
+                    <View
+                      accessible={true}
                       style={
                         [
                           {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
                           },
                           {
-                            "color": "#6C727A",
+                            "marginTop": 4,
                           },
                         ]
                       }
+                      testID="avatar"
                     >
-                      10:00 AM
-                    </Text>
-                  </View>
-                  <View
-                    style={
-                      {
-                        "flexDirection": "row",
-                      }
-                    }
-                  >
-                    <View
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      hitSlop={
-                        {
-                          "bottom": 4,
-                          "left": 4,
-                          "right": 4,
-                          "top": 4,
-                        }
-                      }
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                          "paddingLeft": 5,
-                        }
-                      }
-                    >
-                      <Text
-                        allowFontScaling={false}
-                        selectable={false}
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={221}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
                         style={
                           [
                             {
-                              "color": "#EC0D2A",
-                              "fontSize": 16,
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
-                            [
-                              {
-                                "lineHeight": 16,
-                              },
-                              undefined,
-                            ],
                             {
-                              "fontFamily": "custom",
-                              "fontStyle": "normal",
-                              "fontWeight": "normal",
+                              "cursor": undefined,
                             },
-                            {},
                           ]
                         }
+                        underlayColor="#E4E7EA"
                       >
-                        
-                      </Text>
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="Long name user looooong name user's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "gap": 4,
-                    }
-                  }
-                >
                   <View
-                    testID="message-content-Error message"
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 2,
+                          "flex": 1,
                         }
                       }
                     >
-                      <Text
+                      <View
                         style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "lineHeight": 22,
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#2F343D",
-                            },
-                          ]
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
                         }
                       >
-                        <Text
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={222}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
-                            {
-                              "backgroundColor": "transparent",
-                              "flexShrink": 1,
-                              "fontFamily": "Inter",
-                              "fontWeight": "400",
-                              "textAlign": "left",
-                            }
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
                           }
+                          testID="username-header-Long name user looooong name user"
+                          underlayColor="#E4E7EA"
                         >
-                          <Text
-                            accessibilityLabel="Error message"
+                          <View
+                            collapsable={false}
                             style={
-                              [
-                                {
-                                  "flexShrink": 1,
-                                  "fontSize": 16,
-                                  "lineHeight": 22,
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
                           >
-                            Error message
-                          </Text>
-                        </Text>
-                      </Text>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </A11yIndexView>
-      </View>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r47:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r47:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Long name user looooong name user
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-this is a normal message"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="this is a normal message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  this is a normal message
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r43:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r43:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
               "expanded": undefined,
               "selected": undefined,
             }
@@ -59333,367 +65498,438 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="Long name user looooong name user 10:00:00 AM  Message with read receipt.  Message was read"
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message with read receipt"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r47:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="Long name user looooong name user 10:00:00 AM  Edited message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Edited message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r43:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="Long name user looooong name user's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={223}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="Long name user looooong name user's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-Long name user looooong name user"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={224}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-Long name user looooong name user"
+                          underlayColor="#E4E7EA"
                         >
-                          Long name user looooong name user
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Long name user looooong name user
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
                         >
-                          10:00 AM
-                        </Text>
+                          <View
+                            style={
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                            testID="undefined-edited"
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 16,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 16,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <Text
-                          allowFontScaling={false}
-                          selectable={false}
-                          style={
-                            [
-                              {
-                                "color": "#095AD2",
-                                "fontSize": 25,
-                              },
-                              [
-                                {
-                                  "lineHeight": 25,
-                                },
-                                {
-                                  "marginTop": -5,
-                                  "paddingLeft": 5,
-                                },
-                              ],
-                              {
-                                "fontFamily": "custom",
-                                "fontStyle": "normal",
-                                "fontWeight": "normal",
-                              },
-                              {},
-                            ]
+                            "gap": 4,
                           }
-                          testID="read-receipt-read"
-                        >
-                          
-                        </Text>
-                      </View>
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
                         }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message with read receipt"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Edited message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message with read receipt"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message with read receipt
+                                <Text
+                                  accessibilityLabel="Edited message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Edited message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r48:"
+      orderKey=":r44:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r48:"
+        orderKey=":r44:"
       >
         <View
           accessibilityState={
@@ -59726,560 +65962,1085 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="Long name user looooong name user 10:00:00 AM  Message with read receipt.  Message was read"
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message with read receipt"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r48:"
+            <View
+              accessibilityLabel="Long name user looooong name user 10:00:00 AM Message translated into English"
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
+                }
+              }
+              testID="message-undefined"
             >
-              <View
+              <A11yIndexView
+                accessibilityLabel="Translated message"
                 accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r44:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="Long name user looooong name user's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={225}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="Long name user looooong name user's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-Long name user looooong name user"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={226}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-Long name user looooong name user"
+                          underlayColor="#E4E7EA"
                         >
-                          Long name user looooong name user
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={false}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Long name user looooong name user
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
                           style={
                             {
-                              "opacity": 1,
-                              "paddingLeft": 5,
+                              "flexDirection": "row",
                             }
                           }
                         >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
+                          <View
                             style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                  "fontSize": 16,
-                                },
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
                                 [
                                   {
-                                    "lineHeight": 16,
+                                    "color": "#2F343D",
+                                    "fontSize": 16,
                                   },
-                                  undefined,
-                                ],
-                                {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            
-                          </Text>
+                                  [
+                                    {
+                                      "lineHeight": 16,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
                         </View>
-                        <Text
-                          allowFontScaling={false}
-                          selectable={false}
-                          style={
-                            [
-                              {
-                                "color": "#095AD2",
-                                "fontSize": 25,
-                              },
-                              [
-                                {
-                                  "lineHeight": 25,
-                                },
-                                {
-                                  "marginTop": -5,
-                                  "paddingLeft": 5,
-                                },
-                              ],
-                              {
-                                "fontFamily": "custom",
-                                "fontStyle": "normal",
-                                "fontWeight": "normal",
-                              },
-                              {},
-                            ]
-                          }
-                          testID="read-receipt-read"
-                        >
-                          
-                        </Text>
                       </View>
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
                       <View
-                        testID="message-content-Message with read receipt"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Translated message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message with read receipt"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message with read receipt
+                                <Text
+                                  accessibilityLabel="Translated message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Translated message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r49:"
+      orderKey=":r45:"
     >
-      <View
-        accessibilityLabel="Long name user looooong name user 10:00:00 AM Message translated into English"
-        accessible={true}
-        style={
-          {
-            "flexDirection": "column",
-            "gap": 8,
-            "paddingHorizontal": 12,
-            "paddingVertical": 4,
-            "width": "100%",
-          }
-        }
-        testID="message-undefined"
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r45:"
       >
-        <A11yIndexView
-          accessibilityLabel="Show all icons "
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
           accessible={true}
-          importantForAccessibility="yes"
-          orderFocusType={0}
-          orderIndex={2}
-          orderKey=":r49:"
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
         >
           <View
-            accessible={true}
-            style={
-              {
-                "flexDirection": "row",
-              }
-            }
+            style={{}}
           >
             <View
+              accessibilityLabel="Long name user looooong name user 10:00:00 AM  Encrypted message.  "
+              accessible={true}
               style={
                 {
-                  "alignItems": "flex-end",
-                  "width": 36,
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
               }
+              testID="message-undefined"
             >
-              <View
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 36,
-                      "width": 36,
-                    },
-                    {
-                      "marginTop": 4,
-                    },
-                  ]
-                }
-                testID="avatar"
+              <A11yIndexView
+                accessibilityLabel="Encrypted message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r45:"
               >
                 <View
-                  accessibilityLabel="Long name user looooong name user's avatar"
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
                   accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onClick={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
                   style={
                     {
-                      "opacity": 1,
+                      "flexDirection": "row",
                     }
                   }
                 >
-                  <ViewManagerAdapter_ExpoImage
-                    borderRadius={4}
-                    containerViewRef={"[React.ref]"}
-                    contentFit="cover"
-                    contentPosition={
-                      {
-                        "left": "50%",
-                        "top": "50%",
-                      }
-                    }
-                    height={36}
-                    nativeViewRef={"[React.ref]"}
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    onLoadStart={[Function]}
-                    onProgress={[Function]}
-                    placeholder={[]}
-                    priority="high"
-                    source={
-                      [
-                        {
-                          "headers": {
-                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                          },
-                          "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=72",
-                        },
-                      ]
-                    }
+                  <View
                     style={
                       {
-                        "borderRadius": 4,
-                        "height": 36,
+                        "alignItems": "flex-end",
                         "width": 36,
                       }
                     }
-                    transition={null}
-                    width={36}
-                  />
+                  >
+                    <View
+                      accessible={true}
+                      style={
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
+                      }
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={227}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="Long name user looooong name user's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
+                        {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={228}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-Long name user looooong name user"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Long name user looooong name user
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 16,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 16,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Encrypted message"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Encrypted message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Encrypted message
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
                 </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r46:"
+    >
+      <View
+        accessibilityLabel="Long name user looooong name user 10:00:00 AM  Error message.  "
+        accessible={true}
+        style={
+          {
+            "flexDirection": "column",
+            "gap": 8,
+            "paddingHorizontal": 12,
+            "paddingVertical": 4,
+            "width": "100%",
+          }
+        }
+        testID="message-undefined"
+      >
+        <A11yIndexView
+          accessibilityLabel="Error message"
+          importantForAccessibility="yes"
+          orderFocusType={0}
+          orderIndex={2}
+          orderKey=":r46:"
+        >
+          <View
+            accessible={true}
+            style={
+              {
+                "flexDirection": "row",
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "alignItems": "flex-end",
+                  "width": 36,
+                }
+              }
+            >
+              <View
+                accessible={true}
+                style={
+                  [
+                    {
+                      "borderRadius": 4,
+                      "height": 36,
+                      "width": 36,
+                    },
+                    {
+                      "marginTop": 4,
+                    },
+                  ]
+                }
+                testID="avatar"
+              >
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={229}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#E4E7EA"
+                  style={
+                    [
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "cursor": undefined,
+                      },
+                    ]
+                  }
+                  underlayColor="#E4E7EA"
+                >
+                  <View
+                    collapsable={false}
+                    style={
+                      {
+                        "backgroundColor": "#E4E7EA",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityLabel="Long name user looooong name user's avatar"
+                    accessible={true}
+                    style={{}}
+                  >
+                    <ViewManagerAdapter_ExpoImage
+                      borderRadius={4}
+                      containerViewRef={"[React.ref]"}
+                      contentFit="cover"
+                      contentPosition={
+                        {
+                          "left": "50%",
+                          "top": "50%",
+                        }
+                      }
+                      height={36}
+                      nativeViewRef={"[React.ref]"}
+                      onError={[Function]}
+                      onLoad={[Function]}
+                      onLoadStart={[Function]}
+                      onProgress={[Function]}
+                      placeholder={[]}
+                      priority="high"
+                      source={
+                        [
+                          {
+                            "headers": {
+                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                            },
+                            "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=72",
+                          },
+                        ]
+                      }
+                      style={
+                        {
+                          "borderRadius": 4,
+                          "height": 36,
+                          "width": 36,
+                        }
+                      }
+                      transition={null}
+                      width={36}
+                    />
+                  </View>
+                </RNGestureHandlerButton>
               </View>
             </View>
             <View
@@ -60308,86 +67069,113 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                     }
                   }
                 >
-                  <View
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
+                  <RNGestureHandlerButton
+                    activeOpacity={1}
                     collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
+                    delayLongPress={600}
+                    enabled={true}
+                    handlerTag={230}
+                    handlerType="NativeViewGestureHandler"
+                    innerRef={null}
+                    onActiveStateChange={[Function]}
+                    onGestureHandlerEvent={[Function]}
+                    onGestureHandlerStateChange={[Function]}
+                    onPress={[Function]}
+                    rippleColor="#E4E7EA"
                     style={
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "flexShrink": 1,
-                        "gap": 4,
-                        "opacity": 1,
-                      }
+                      [
+                        {
+                          "backgroundColor": undefined,
+                          "borderRadius": undefined,
+                          "margin": undefined,
+                          "marginBottom": undefined,
+                          "marginEnd": undefined,
+                          "marginHorizontal": undefined,
+                          "marginLeft": undefined,
+                          "marginRight": undefined,
+                          "marginStart": undefined,
+                          "marginTop": undefined,
+                          "marginVertical": undefined,
+                        },
+                        {
+                          "cursor": undefined,
+                        },
+                      ]
                     }
                     testID="username-header-Long name user looooong name user"
+                    underlayColor="#E4E7EA"
                   >
-                    <Text
-                      numberOfLines={1}
+                    <View
+                      collapsable={false}
                       style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "600",
-                            "lineHeight": 22,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#1F2329",
-                          },
-                        ]
+                        {
+                          "backgroundColor": "#E4E7EA",
+                          "borderBottomLeftRadius": undefined,
+                          "borderBottomRightRadius": undefined,
+                          "borderRadius": undefined,
+                          "borderTopLeftRadius": undefined,
+                          "borderTopRightRadius": undefined,
+                          "bottom": 0,
+                          "left": 0,
+                          "opacity": 0,
+                          "position": "absolute",
+                          "right": 0,
+                          "top": 0,
+                        }
                       }
-                    >
-                      Long name user looooong name user
-                    </Text>
-                    <Text
+                    />
+                    <View
                       style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
+                        {
+                          "alignItems": "center",
+                          "flexDirection": "row",
+                          "flexShrink": 1,
+                          "gap": 4,
+                        }
                       }
                     >
-                      10:00 AM
-                    </Text>
-                  </View>
+                      <Text
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "flexShrink": 1,
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "600",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#1F2329",
+                            },
+                          ]
+                        }
+                      >
+                        Long name user looooong name user
+                      </Text>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                    </View>
+                  </RNGestureHandlerButton>
                   <View
                     style={
                       {
@@ -60415,7 +67203,7 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                       }
                       accessible={true}
                       collapsable={false}
-                      focusable={false}
+                      focusable={true}
                       hitSlop={
                         {
                           "bottom": 4,
@@ -60424,7 +67212,9 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                           "top": 4,
                         }
                       }
+                      onBlur={[Function]}
                       onClick={[Function]}
+                      onFocus={[Function]}
                       onResponderGrant={[Function]}
                       onResponderMove={[Function]}
                       onResponderRelease={[Function]}
@@ -60433,7 +67223,6 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                       onStartShouldSetResponder={[Function]}
                       style={
                         {
-                          "opacity": 1,
                           "paddingLeft": 5,
                         }
                       }
@@ -60444,7 +67233,7 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                         style={
                           [
                             {
-                              "color": "#2F343D",
+                              "color": "#EC0D2A",
                               "fontSize": 16,
                             },
                             [
@@ -60462,210 +67251,41 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                           ]
                         }
                       >
-                        
+                        
                       </Text>
                     </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "gap": 4,
+                    }
+                  }
+                >
+                  <View
+                    testID="message-content-Error message"
+                  >
                     <View
                       style={
                         {
-                          "paddingLeft": 5,
+                          "gap": 2,
                         }
                       }
-                      testID="undefined-edited"
                     >
                       <Text
-                        allowFontScaling={false}
-                        selectable={false}
                         style={
                           [
                             {
-                              "color": "#2F343D",
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
                               "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
                             },
-                            [
-                              {
-                                "lineHeight": 16,
-                              },
-                              undefined,
-                            ],
                             {
-                              "fontFamily": "custom",
-                              "fontStyle": "normal",
-                              "fontWeight": "normal",
-                            },
-                            {},
-                          ]
-                        }
-                      >
-                        
-                      </Text>
-                    </View>
-                    <View
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      hitSlop={
-                        {
-                          "bottom": 4,
-                          "left": 4,
-                          "right": 4,
-                          "top": 4,
-                        }
-                      }
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                          "paddingLeft": 5,
-                        }
-                      }
-                    >
-                      <Text
-                        allowFontScaling={false}
-                        selectable={false}
-                        style={
-                          [
-                            {
-                              "color": "#EC0D2A",
-                              "fontSize": 16,
-                            },
-                            [
-                              {
-                                "lineHeight": 16,
-                              },
-                              undefined,
-                            ],
-                            {
-                              "fontFamily": "custom",
-                              "fontStyle": "normal",
-                              "fontWeight": "normal",
-                            },
-                            {},
-                          ]
-                        }
-                      >
-                        
-                      </Text>
-                    </View>
-                    <View
-                      style={
-                        {
-                          "paddingLeft": 5,
-                        }
-                      }
-                    >
-                      <Text
-                        allowFontScaling={false}
-                        selectable={false}
-                        style={
-                          [
-                            {
-                              "color": "#2F343D",
-                              "fontSize": 16,
-                            },
-                            [
-                              {
-                                "lineHeight": 16,
-                              },
-                              undefined,
-                            ],
-                            {
-                              "fontFamily": "custom",
-                              "fontStyle": "normal",
-                              "fontWeight": "normal",
-                            },
-                            {},
-                          ]
-                        }
-                      >
-                        
-                      </Text>
-                    </View>
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#095AD2",
-                            "fontSize": 25,
-                          },
-                          [
-                            {
-                              "lineHeight": 25,
-                            },
-                            {
-                              "marginTop": -5,
-                              "paddingLeft": 5,
-                            },
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                      testID="read-receipt-read"
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "gap": 4,
-                    }
-                  }
-                >
-                  <View
-                    testID="message-content-Show all icons "
-                  >
-                    <View
-                      style={
-                        {
-                          "gap": 2,
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "lineHeight": 22,
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#2F343D",
+                              "color": "#2F343D",
                             },
                           ]
                         }
@@ -60682,7 +67302,7 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            accessibilityLabel="Show all icons "
+                            accessibilityLabel="Error message"
                             style={
                               [
                                 {
@@ -60696,7 +67316,7 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                               ]
                             }
                           >
-                            Show all icons 
+                            Error message
                           </Text>
                         </Text>
                       </Text>
@@ -60710,1233 +67330,1293 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
       </View>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r4a:"
+      orderKey=":r47:"
     >
-      <View
-        accessibilityLabel="Long name user looooong name user 10:00:00 AM Message translated into English"
-        accessible={true}
-        style={
-          {
-            "flexDirection": "column",
-            "gap": 8,
-            "paddingHorizontal": 12,
-            "paddingVertical": 4,
-            "width": "100%",
-          }
-        }
-        testID="message-undefined"
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r47:"
       >
-        <A11yIndexView
-          accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
           accessible={true}
-          importantForAccessibility="yes"
-          orderFocusType={0}
-          orderIndex={2}
-          orderKey=":r4a:"
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
         >
           <View
-            accessible={true}
-            style={
-              {
-                "flexDirection": "row",
-              }
-            }
+            style={{}}
           >
             <View
+              accessibilityLabel="Long name user looooong name user 10:00:00 AM  Message with read receipt.  Message was read"
+              accessible={true}
               style={
                 {
-                  "alignItems": "flex-end",
-                  "width": 36,
-                }
-              }
-            />
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "marginLeft": 10,
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
               }
+              testID="message-undefined"
             >
-              <View
-                onLayout={[Function]}
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
+              <A11yIndexView
+                accessibilityLabel="Message with read receipt"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r47:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "gap": 4,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
                   >
                     <View
+                      accessible={true}
                       style={
-                        {
-                          "gap": 2,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <Text
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={231}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
                         style={
                           [
                             {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "lineHeight": 22,
-                              "textAlign": "left",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
                             {
-                              "color": "#2F343D",
+                              "cursor": undefined,
                             },
                           ]
                         }
+                        underlayColor="#E4E7EA"
                       >
-                        <Text
+                        <View
+                          collapsable={false}
                           style={
                             {
-                              "backgroundColor": "transparent",
-                              "flexShrink": 1,
-                              "fontFamily": "Inter",
-                              "fontWeight": "400",
-                              "textAlign": "left",
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="Long name user looooong name user's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
+                        {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={232}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-Long name user looooong name user"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Long name user looooong name user
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
                             }
                           }
                         >
                           <Text
-                            accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                            allowFontScaling={false}
+                            selectable={false}
                             style={
                               [
                                 {
-                                  "flexShrink": 1,
-                                  "fontSize": 16,
-                                  "lineHeight": 22,
+                                  "color": "#095AD2",
+                                  "fontSize": 25,
                                 },
+                                [
+                                  {
+                                    "lineHeight": 25,
+                                  },
+                                  {
+                                    "marginTop": -5,
+                                    "paddingLeft": 5,
+                                  },
+                                ],
                                 {
-                                  "color": "#2F343D",
+                                  "fontFamily": "custom",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "normal",
                                 },
+                                {},
                               ]
                             }
+                            testID="read-receipt-read"
                           >
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            
                           </Text>
-                        </Text>
-                      </Text>
+                        </View>
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Message with read receipt"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Message with read receipt"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message with read receipt
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </View>
-            <View
-              style={
-                {
-                  "flexDirection": "row",
-                }
-              }
-            >
-              <View
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={false}
-                hitSlop={
-                  {
-                    "bottom": 4,
-                    "left": 4,
-                    "right": 4,
-                    "top": 4,
-                  }
-                }
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  {
-                    "opacity": 1,
-                    "paddingLeft": 5,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 16,
-                      },
-                      [
-                        {
-                          "lineHeight": 16,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <View
-                style={
-                  {
-                    "paddingLeft": 5,
-                  }
-                }
-                testID="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.-edited"
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 16,
-                      },
-                      [
-                        {
-                          "lineHeight": 16,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <View
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                hitSlop={
-                  {
-                    "bottom": 4,
-                    "left": 4,
-                    "right": 4,
-                    "top": 4,
-                  }
-                }
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  {
-                    "opacity": 1,
-                    "paddingLeft": 5,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#EC0D2A",
-                        "fontSize": 16,
-                      },
-                      [
-                        {
-                          "lineHeight": 16,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <View
-                style={
-                  {
-                    "paddingLeft": 5,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 16,
-                      },
-                      [
-                        {
-                          "lineHeight": 16,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <Text
-                allowFontScaling={false}
-                selectable={false}
-                style={
-                  [
-                    {
-                      "color": "#095AD2",
-                      "fontSize": 25,
-                    },
-                    [
-                      {
-                        "lineHeight": 25,
-                      },
-                      {
-                        "marginTop": -5,
-                        "paddingLeft": 5,
-                      },
-                    ],
-                    {
-                      "fontFamily": "custom",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    {},
-                  ]
-                }
-                testID="read-receipt-read"
-              >
-                
-              </Text>
+              </A11yIndexView>
             </View>
           </View>
-        </A11yIndexView>
-      </View>
+        </View>
+      </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r4b:"
+      orderKey=":r48:"
     >
-      <View
-        accessibilityLabel="Long name user looooong name user 10:00:00 AM Message translated into English"
-        accessible={true}
-        style={
-          {
-            "flexDirection": "column",
-            "gap": 8,
-            "paddingHorizontal": 12,
-            "paddingVertical": 4,
-            "width": "100%",
-          }
-        }
-        testID="message-undefined"
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r48:"
       >
-        <A11yIndexView
-          accessibilityLabel="small message"
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
           accessible={true}
-          importantForAccessibility="yes"
-          orderFocusType={0}
-          orderIndex={2}
-          orderKey=":r4b:"
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
         >
           <View
-            accessible={true}
-            style={
-              {
-                "flexDirection": "row",
-              }
-            }
+            style={{}}
           >
             <View
+              accessibilityLabel="Long name user looooong name user 10:00:00 AM  Message with read receipt.  Message was read"
+              accessible={true}
               style={
                 {
-                  "alignItems": "flex-end",
-                  "width": 36,
-                }
-              }
-            />
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "marginLeft": 10,
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
               }
+              testID="message-undefined"
             >
-              <View
-                onLayout={[Function]}
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
+              <A11yIndexView
+                accessibilityLabel="Message with read receipt"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r48:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "gap": 4,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    testID="message-content-small message"
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
                   >
                     <View
+                      accessible={true}
                       style={
-                        {
-                          "gap": 2,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <Text
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={233}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
                         style={
                           [
                             {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "lineHeight": 22,
-                              "textAlign": "left",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
                             {
-                              "color": "#2F343D",
+                              "cursor": undefined,
                             },
                           ]
                         }
+                        underlayColor="#E4E7EA"
                       >
-                        <Text
+                        <View
+                          collapsable={false}
                           style={
                             {
-                              "backgroundColor": "transparent",
-                              "flexShrink": 1,
-                              "fontFamily": "Inter",
-                              "fontWeight": "400",
-                              "textAlign": "left",
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
                             }
                           }
-                        >
-                          <Text
-                            accessibilityLabel="small message"
-                            style={
+                        />
+                        <View
+                          accessibilityLabel="Long name user looooong name user's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
                               [
                                 {
-                                  "flexShrink": 1,
-                                  "fontSize": 16,
-                                  "lineHeight": 22,
-                                },
-                                {
-                                  "color": "#2F343D",
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=72",
                                 },
                               ]
                             }
-                          >
-                            small message
-                          </Text>
-                        </Text>
-                      </Text>
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-              </View>
-            </View>
-            <View
-              style={
-                {
-                  "flexDirection": "row",
-                }
-              }
-            >
-              <View
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={false}
-                hitSlop={
-                  {
-                    "bottom": 4,
-                    "left": 4,
-                    "right": 4,
-                    "top": 4,
-                  }
-                }
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  {
-                    "opacity": 1,
-                    "paddingLeft": 5,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 16,
-                      },
-                      [
-                        {
-                          "lineHeight": 16,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <View
-                style={
-                  {
-                    "paddingLeft": 5,
-                  }
-                }
-                testID="small message-edited"
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
+                  <View
+                    style={
                       {
-                        "color": "#2F343D",
-                        "fontSize": 16,
-                      },
-                      [
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
                         {
-                          "lineHeight": 16,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <View
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                hitSlop={
-                  {
-                    "bottom": 4,
-                    "left": 4,
-                    "right": 4,
-                    "top": 4,
-                  }
-                }
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  {
-                    "opacity": 1,
-                    "paddingLeft": 5,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#EC0D2A",
-                        "fontSize": 16,
-                      },
-                      [
-                        {
-                          "lineHeight": 16,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <View
-                style={
-                  {
-                    "paddingLeft": 5,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 16,
-                      },
-                      [
-                        {
-                          "lineHeight": 16,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <Text
-                allowFontScaling={false}
-                selectable={false}
-                style={
-                  [
-                    {
-                      "color": "#095AD2",
-                      "fontSize": 25,
-                    },
-                    [
-                      {
-                        "lineHeight": 25,
-                      },
-                      {
-                        "marginTop": -5,
-                        "paddingLeft": 5,
-                      },
-                    ],
-                    {
-                      "fontFamily": "custom",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    {},
-                  ]
-                }
-                testID="read-receipt-read"
-              >
-                
-              </Text>
-            </View>
-          </View>
-        </A11yIndexView>
-      </View>
-    </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
-    <A11yOrderView
-      orderKey=":r4c:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r4c:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
-        >
-          <View
-            accessibilityLabel="Long name user looooong name user 10:00:00 AM  this is a normal message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
-          >
-            <A11yIndexView
-              accessibilityLabel="this is a normal message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r4c:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                >
-                  <View
-                    accessible={true}
-                    style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="Long name user looooong name user's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
-                      }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=93.60000000000001",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
-                          }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-Long name user looooong name user"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={234}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-Long name user looooong name user"
+                          underlayColor="#E4E7EA"
                         >
-                          Long name user looooong name user
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-this is a normal message"
-                      >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Long name user looooong name user
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "flexDirection": "row",
                             }
                           }
                         >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 16,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 16,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
                           <Text
+                            allowFontScaling={false}
+                            selectable={false}
                             style={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
+                                  "color": "#095AD2",
+                                  "fontSize": 25,
                                 },
+                                [
+                                  {
+                                    "lineHeight": 25,
+                                  },
+                                  {
+                                    "marginTop": -5,
+                                    "paddingLeft": 5,
+                                  },
+                                ],
                                 {
-                                  "color": "#2F343D",
+                                  "fontFamily": "custom",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "normal",
                                 },
+                                {},
                               ]
                             }
+                            testID="read-receipt-read"
+                          >
+                            
+                          </Text>
+                        </View>
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Message with read receipt"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="this is a normal message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                this is a normal message
+                                <Text
+                                  accessibilityLabel="Message with read receipt"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message with read receipt
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r4d:"
+      orderKey=":r49:"
     >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r4d:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+      <View
+        accessibilityLabel="Long name user looooong name user 10:00:00 AM Message translated into English"
+        accessible={true}
+        style={
+          {
+            "flexDirection": "column",
+            "gap": 8,
+            "paddingHorizontal": 12,
+            "paddingVertical": 4,
+            "width": "100%",
           }
+        }
+        testID="message-undefined"
+      >
+        <A11yIndexView
+          accessibilityLabel="Show all icons "
           accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
+          importantForAccessibility="yes"
+          orderFocusType={0}
+          orderIndex={2}
+          orderKey=":r49:"
         >
           <View
-            accessibilityLabel="Long name user looooong name user 10:00:00 AM  Edited message.  "
             accessible={true}
             style={
               {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
+                "flexDirection": "row",
               }
             }
-            testID="message-undefined"
           >
-            <A11yIndexView
-              accessibilityLabel="Edited message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r4d:"
+            <View
+              style={
+                {
+                  "alignItems": "flex-end",
+                  "width": 36,
+                }
+              }
             >
               <View
                 accessible={true}
+                style={
+                  [
+                    {
+                      "borderRadius": 4,
+                      "height": 36,
+                      "width": 36,
+                    },
+                    {
+                      "marginTop": 4,
+                    },
+                  ]
+                }
+                testID="avatar"
+              >
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={235}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#E4E7EA"
+                  style={
+                    [
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "cursor": undefined,
+                      },
+                    ]
+                  }
+                  underlayColor="#E4E7EA"
+                >
+                  <View
+                    collapsable={false}
+                    style={
+                      {
+                        "backgroundColor": "#E4E7EA",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityLabel="Long name user looooong name user's avatar"
+                    accessible={true}
+                    style={{}}
+                  >
+                    <ViewManagerAdapter_ExpoImage
+                      borderRadius={4}
+                      containerViewRef={"[React.ref]"}
+                      contentFit="cover"
+                      contentPosition={
+                        {
+                          "left": "50%",
+                          "top": "50%",
+                        }
+                      }
+                      height={36}
+                      nativeViewRef={"[React.ref]"}
+                      onError={[Function]}
+                      onLoad={[Function]}
+                      onLoadStart={[Function]}
+                      onProgress={[Function]}
+                      placeholder={[]}
+                      priority="high"
+                      source={
+                        [
+                          {
+                            "headers": {
+                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                            },
+                            "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=72",
+                          },
+                        ]
+                      }
+                      style={
+                        {
+                          "borderRadius": 4,
+                          "height": 36,
+                          "width": 36,
+                        }
+                      }
+                      transition={null}
+                      width={36}
+                    />
+                  </View>
+                </RNGestureHandlerButton>
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "flex": 1,
+                  "marginLeft": 10,
+                }
+              }
+            >
+              <View
+                onLayout={[Function]}
                 style={
                   {
-                    "flexDirection": "row",
+                    "flex": 1,
                   }
                 }
               >
                 <View
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "alignItems": "center",
+                      "flex": 1,
+                      "flexDirection": "row",
+                      "justifyContent": "space-between",
                     }
                   }
                 >
-                  <View
-                    accessible={true}
+                  <RNGestureHandlerButton
+                    activeOpacity={1}
+                    collapsable={false}
+                    delayLongPress={600}
+                    enabled={true}
+                    handlerTag={236}
+                    handlerType="NativeViewGestureHandler"
+                    innerRef={null}
+                    onActiveStateChange={[Function]}
+                    onGestureHandlerEvent={[Function]}
+                    onGestureHandlerStateChange={[Function]}
+                    onPress={[Function]}
+                    rippleColor="#E4E7EA"
                     style={
                       [
                         {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
+                          "backgroundColor": undefined,
+                          "borderRadius": undefined,
+                          "margin": undefined,
+                          "marginBottom": undefined,
+                          "marginEnd": undefined,
+                          "marginHorizontal": undefined,
+                          "marginLeft": undefined,
+                          "marginRight": undefined,
+                          "marginStart": undefined,
+                          "marginTop": undefined,
+                          "marginVertical": undefined,
                         },
                         {
-                          "marginTop": 4,
+                          "cursor": undefined,
                         },
                       ]
                     }
-                    testID="avatar"
+                    testID="username-header-Long name user looooong name user"
+                    underlayColor="#E4E7EA"
+                  >
+                    <View
+                      collapsable={false}
+                      style={
+                        {
+                          "backgroundColor": "#E4E7EA",
+                          "borderBottomLeftRadius": undefined,
+                          "borderBottomRightRadius": undefined,
+                          "borderRadius": undefined,
+                          "borderTopLeftRadius": undefined,
+                          "borderTopRightRadius": undefined,
+                          "bottom": 0,
+                          "left": 0,
+                          "opacity": 0,
+                          "position": "absolute",
+                          "right": 0,
+                          "top": 0,
+                        }
+                      }
+                    />
+                    <View
+                      style={
+                        {
+                          "alignItems": "center",
+                          "flexDirection": "row",
+                          "flexShrink": 1,
+                          "gap": 4,
+                        }
+                      }
+                    >
+                      <Text
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "flexShrink": 1,
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "600",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#1F2329",
+                            },
+                          ]
+                        }
+                      >
+                        Long name user looooong name user
+                      </Text>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                    </View>
+                  </RNGestureHandlerButton>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
                   >
                     <View
-                      accessibilityLabel="Long name user looooong name user's avatar"
                       accessibilityState={
                         {
                           "busy": undefined,
@@ -61957,7 +68637,17 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                       accessible={true}
                       collapsable={false}
                       focusable={true}
+                      hitSlop={
+                        {
+                          "bottom": 4,
+                          "left": 4,
+                          "right": 4,
+                          "top": 4,
+                        }
+                      }
+                      onBlur={[Function]}
                       onClick={[Function]}
+                      onFocus={[Function]}
                       onResponderGrant={[Function]}
                       onResponderMove={[Function]}
                       onResponderRelease={[Function]}
@@ -61966,228 +68656,262 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                       onStartShouldSetResponder={[Function]}
                       style={
                         {
-                          "opacity": 1,
+                          "paddingLeft": 5,
                         }
                       }
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <Text
+                        allowFontScaling={false}
+                        selectable={false}
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                              "color": "#2F343D",
+                              "fontSize": 16,
+                            },
+                            [
+                              {
+                                "lineHeight": 16,
                               },
-                              "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=93.60000000000001",
+                              undefined,
+                            ],
+                            {
+                              "fontFamily": "custom",
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
                             },
+                            {},
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
-                          }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                      >
+                        
+                      </Text>
                     </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
                     <View
                       style={
                         {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
+                          "paddingLeft": 5,
                         }
                       }
+                      testID="undefined-edited"
                     >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
+                      <Text
+                        allowFontScaling={false}
+                        selectable={false}
                         style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-Long name user looooong name user"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
+                          [
+                            {
+                              "color": "#2F343D",
+                              "fontSize": 16,
+                            },
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
+                                "lineHeight": 16,
                               },
-                            ]
-                          }
-                        >
-                          Long name user looooong name user
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
+                              undefined,
+                            ],
+                            {
+                              "fontFamily": "custom",
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
+                            },
+                            {},
+                          ]
                         }
                       >
-                        <View
-                          style={
-                            {
-                              "paddingLeft": 5,
-                            }
-                          }
-                          testID="undefined-edited"
-                        >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
-                            style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                  "fontSize": 20.8,
-                                },
-                                [
-                                  {
-                                    "lineHeight": 20.8,
-                                  },
-                                  undefined,
-                                ],
-                                {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            
-                          </Text>
-                        </View>
-                      </View>
+                        
+                      </Text>
                     </View>
-                    <Text
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      collapsable={false}
+                      focusable={true}
+                      hitSlop={
+                        {
+                          "bottom": 4,
+                          "left": 4,
+                          "right": 4,
+                          "top": 4,
+                        }
+                      }
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
                       style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
+                        {
+                          "paddingLeft": 5,
+                        }
                       }
                     >
-                      10:00 AM
-                    </Text>
+                      <Text
+                        allowFontScaling={false}
+                        selectable={false}
+                        style={
+                          [
+                            {
+                              "color": "#EC0D2A",
+                              "fontSize": 16,
+                            },
+                            [
+                              {
+                                "lineHeight": 16,
+                              },
+                              undefined,
+                            ],
+                            {
+                              "fontFamily": "custom",
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
+                            },
+                            {},
+                          ]
+                        }
+                      >
+                        
+                      </Text>
+                    </View>
                     <View
                       style={
                         {
-                          "gap": 4,
+                          "paddingLeft": 5,
                         }
                       }
                     >
-                      <View
-                        testID="message-content-Edited message"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
+                      <Text
+                        allowFontScaling={false}
+                        selectable={false}
+                        style={
+                          [
+                            {
+                              "color": "#2F343D",
+                              "fontSize": 16,
+                            },
+                            [
+                              {
+                                "lineHeight": 16,
+                              },
+                              undefined,
+                            ],
+                            {
+                              "fontFamily": "custom",
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
+                            },
+                            {},
+                          ]
+                        }
+                      >
+                        
+                      </Text>
+                    </View>
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#095AD2",
+                            "fontSize": 25,
+                          },
+                          [
+                            {
+                              "lineHeight": 25,
+                            },
+                            {
+                              "marginTop": -5,
+                              "paddingLeft": 5,
+                            },
+                          ],
+                          {
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                      testID="read-receipt-read"
+                    >
+                      
+                    </Text>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "gap": 4,
+                    }
+                  }
+                >
+                  <View
+                    testID="message-content-Show all icons "
+                  >
+                    <View
+                      style={
+                        {
+                          "gap": 2,
+                        }
+                      }
+                    >
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                            },
+                          ]
+                        }
+                      >
+                        <Text
+                          style={
+                            {
+                              "backgroundColor": "transparent",
+                              "flexShrink": 1,
+                              "fontFamily": "Inter",
+                              "fontWeight": "400",
+                              "textAlign": "left",
+                            }
                           }
                         >
                           <Text
+                            accessibilityLabel="Show all icons "
                             style={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
+                                  "flexShrink": 1,
                                   "fontSize": 16,
-                                  "fontWeight": "400",
                                   "lineHeight": 22,
-                                  "textAlign": "left",
                                 },
                                 {
                                   "color": "#2F343D",
@@ -62195,397 +68919,129 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                               ]
                             }
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Edited message"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Edited message
-                              </Text>
-                            </Text>
+                            Show all icons 
                           </Text>
-                        </View>
-                      </View>
+                        </Text>
+                      </Text>
                     </View>
                   </View>
                 </View>
               </View>
-            </A11yIndexView>
+            </View>
           </View>
-        </View>
-      </A11yIndexView>
+        </A11yIndexView>
+      </View>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r4e:"
+      orderKey=":r4a:"
     >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r4e:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+      <View
+        accessibilityLabel="Long name user looooong name user 10:00:00 AM Message translated into English"
+        accessible={true}
+        style={
+          {
+            "flexDirection": "column",
+            "gap": 8,
+            "paddingHorizontal": 12,
+            "paddingVertical": 4,
+            "width": "100%",
           }
+        }
+        testID="message-undefined"
+      >
+        <A11yIndexView
+          accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
           accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
+          importantForAccessibility="yes"
+          orderFocusType={0}
+          orderIndex={2}
+          orderKey=":r4a:"
         >
           <View
-            accessibilityLabel="Long name user looooong name user 10:00:00 AM Message translated into English"
             accessible={true}
             style={
               {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
+                "flexDirection": "row",
               }
             }
-            testID="message-undefined"
           >
-            <A11yIndexView
-              accessibilityLabel="Translated message"
-              accessible={true}
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r4e:"
+            <View
+              style={
+                {
+                  "alignItems": "flex-end",
+                  "width": 36,
+                }
+              }
+            />
+            <View
+              style={
+                {
+                  "flex": 1,
+                  "marginLeft": 10,
+                }
+              }
             >
               <View
-                accessible={true}
+                onLayout={[Function]}
                 style={
                   {
-                    "flexDirection": "row",
+                    "flex": 1,
                   }
                 }
               >
                 <View
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "gap": 4,
                     }
                   }
                 >
                   <View
-                    accessible={true}
-                    style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
+                    testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                   >
                     <View
-                      accessibilityLabel="Long name user looooong name user's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         {
-                          "opacity": 1,
+                          "gap": 2,
                         }
                       }
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <Text
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=93.60000000000001",
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
-                          }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-Long name user looooong name user"
                       >
                         <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          Long name user looooong name user
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <View
-                          style={
-                            {
-                              "paddingLeft": 5,
-                            }
-                          }
-                        >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
-                            style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                  "fontSize": 20.8,
-                                },
-                                [
-                                  {
-                                    "lineHeight": 20.8,
-                                  },
-                                  undefined,
-                                ],
-                                {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            
-                          </Text>
-                        </View>
-                      </View>
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Translated message"
-                      >
-                        <View
                           style={
                             {
-                              "gap": 2,
+                              "backgroundColor": "transparent",
+                              "flexShrink": 1,
+                              "fontFamily": "Inter",
+                              "fontWeight": "400",
+                              "textAlign": "left",
                             }
                           }
                         >
                           <Text
+                            accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                             style={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
+                                  "flexShrink": 1,
                                   "fontSize": 16,
-                                  "fontWeight": "400",
                                   "lineHeight": 22,
-                                  "textAlign": "left",
                                 },
                                 {
                                   "color": "#2F343D",
@@ -62593,485 +69049,273 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                               ]
                             }
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Translated message"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Translated message
-                              </Text>
-                            </Text>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                           </Text>
-                        </View>
-                      </View>
+                        </Text>
+                      </Text>
                     </View>
                   </View>
                 </View>
               </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r4f:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r4f:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
-        >
-          <View
-            accessibilityLabel="Long name user looooong name user 10:00:00 AM  Encrypted message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
-          >
-            <A11yIndexView
-              accessibilityLabel="Encrypted message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r4f:"
+            </View>
+            <View
+              style={
+                {
+                  "flexDirection": "row",
+                }
+              }
             >
               <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
                 accessible={true}
+                collapsable={false}
+                focusable={true}
+                hitSlop={
+                  {
+                    "bottom": 4,
+                    "left": 4,
+                    "right": 4,
+                    "top": 4,
+                  }
+                }
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
                 style={
                   {
-                    "flexDirection": "row",
+                    "paddingLeft": 5,
                   }
                 }
               >
-                <View
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
                   style={
-                    {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
+                    [
+                      {
+                        "color": "#2F343D",
+                        "fontSize": 16,
+                      },
+                      [
+                        {
+                          "lineHeight": 16,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
                   }
                 >
-                  <View
-                    accessible={true}
-                    style={
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  {
+                    "paddingLeft": 5,
+                  }
+                }
+                testID="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.-edited"
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#2F343D",
+                        "fontSize": 16,
+                      },
                       [
                         {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
+                          "lineHeight": 16,
                         },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                hitSlop={
+                  {
+                    "bottom": 4,
+                    "left": 4,
+                    "right": 4,
+                    "top": 4,
+                  }
+                }
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  {
+                    "paddingLeft": 5,
+                  }
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#EC0D2A",
+                        "fontSize": 16,
+                      },
+                      [
                         {
-                          "marginTop": 4,
+                          "lineHeight": 16,
                         },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="Long name user looooong name user's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
-                      }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=93.60000000000001",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
-                          }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
                   }
                 >
-                  <View
-                    onLayout={[Function]}
-                    style={
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  {
+                    "paddingLeft": 5,
+                  }
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
                       {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-Long name user looooong name user"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          Long name user looooong name user
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={false}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "opacity": 1,
-                              "paddingLeft": 5,
-                            }
-                          }
-                        >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
-                            style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                  "fontSize": 20.8,
-                                },
-                                [
-                                  {
-                                    "lineHeight": 20.8,
-                                  },
-                                  undefined,
-                                ],
-                                {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            
-                          </Text>
-                        </View>
-                      </View>
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
+                        "color": "#2F343D",
+                        "fontSize": 16,
+                      },
+                      [
                         {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Encrypted message"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Encrypted message"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Encrypted message
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
+                          "lineHeight": 16,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
               </View>
-            </A11yIndexView>
+              <Text
+                allowFontScaling={false}
+                selectable={false}
+                style={
+                  [
+                    {
+                      "color": "#095AD2",
+                      "fontSize": 25,
+                    },
+                    [
+                      {
+                        "lineHeight": 25,
+                      },
+                      {
+                        "marginTop": -5,
+                        "paddingLeft": 5,
+                      },
+                    ],
+                    {
+                      "fontFamily": "custom",
+                      "fontStyle": "normal",
+                      "fontWeight": "normal",
+                    },
+                    {},
+                  ]
+                }
+                testID="read-receipt-read"
+              >
+                
+              </Text>
+            </View>
           </View>
-        </View>
-      </A11yIndexView>
+        </A11yIndexView>
+      </View>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r4g:"
+      orderKey=":r4b:"
     >
       <View
-        accessibilityLabel="Long name user looooong name user 10:00:00 AM  Error message.  "
+        accessibilityLabel="Long name user looooong name user 10:00:00 AM Message translated into English"
         accessible={true}
         style={
           {
@@ -63085,11 +69329,12 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
         testID="message-undefined"
       >
         <A11yIndexView
-          accessibilityLabel="Error message"
+          accessibilityLabel="small message"
+          accessible={true}
           importantForAccessibility="yes"
           orderFocusType={0}
           orderIndex={2}
-          orderKey=":r4g:"
+          orderKey=":r4b:"
         >
           <View
             accessible={true}
@@ -63103,102 +69348,10 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
               style={
                 {
                   "alignItems": "flex-end",
-                  "width": 46.800000000000004,
+                  "width": 36,
                 }
               }
-            >
-              <View
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 46.800000000000004,
-                      "width": 46.800000000000004,
-                    },
-                    {
-                      "marginTop": 4,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <View
-                  accessibilityLabel="Long name user looooong name user's avatar"
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onClick={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  style={
-                    {
-                      "opacity": 1,
-                    }
-                  }
-                >
-                  <ViewManagerAdapter_ExpoImage
-                    borderRadius={4}
-                    containerViewRef={"[React.ref]"}
-                    contentFit="cover"
-                    contentPosition={
-                      {
-                        "left": "50%",
-                        "top": "50%",
-                      }
-                    }
-                    height={46.800000000000004}
-                    nativeViewRef={"[React.ref]"}
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    onLoadStart={[Function]}
-                    onProgress={[Function]}
-                    placeholder={[]}
-                    priority="high"
-                    source={
-                      [
-                        {
-                          "headers": {
-                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                          },
-                          "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=93.60000000000001",
-                        },
-                      ]
-                    }
-                    style={
-                      {
-                        "borderRadius": 4,
-                        "height": 46.800000000000004,
-                        "width": 46.800000000000004,
-                      }
-                    }
-                    transition={null}
-                    width={46.800000000000004}
-                  />
-                </View>
-              </View>
-            </View>
+            />
             <View
               style={
                 {
@@ -63215,175 +69368,6 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                   }
                 }
               >
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flex": 1,
-                      "flexDirection": "row",
-                      "justifyContent": "space-between",
-                    }
-                  }
-                >
-                  <View
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "flexShrink": 1,
-                        "gap": 4,
-                        "opacity": 1,
-                      }
-                    }
-                    testID="username-header-Long name user looooong name user"
-                  >
-                    <Text
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "600",
-                            "lineHeight": 22,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#1F2329",
-                          },
-                        ]
-                      }
-                    >
-                      Long name user looooong name user
-                    </Text>
-                  </View>
-                  <View
-                    style={
-                      {
-                        "flexDirection": "row",
-                      }
-                    }
-                  >
-                    <View
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      hitSlop={
-                        {
-                          "bottom": 4,
-                          "left": 4,
-                          "right": 4,
-                          "top": 4,
-                        }
-                      }
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                          "paddingLeft": 5,
-                        }
-                      }
-                    >
-                      <Text
-                        allowFontScaling={false}
-                        selectable={false}
-                        style={
-                          [
-                            {
-                              "color": "#EC0D2A",
-                              "fontSize": 20.8,
-                            },
-                            [
-                              {
-                                "lineHeight": 20.8,
-                              },
-                              undefined,
-                            ],
-                            {
-                              "fontFamily": "custom",
-                              "fontStyle": "normal",
-                              "fontWeight": "normal",
-                            },
-                            {},
-                          ]
-                        }
-                      >
-                        
-                      </Text>
-                    </View>
-                  </View>
-                </View>
-                <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 13,
-                        "fontWeight": "400",
-                        "lineHeight": 18,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                >
-                  10:00 AM
-                </Text>
                 <View
                   style={
                     {
@@ -63392,7 +69376,7 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                   }
                 >
                   <View
-                    testID="message-content-Error message"
+                    testID="message-content-small message"
                   >
                     <View
                       style={
@@ -63430,7 +69414,7 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            accessibilityLabel="Error message"
+                            accessibilityLabel="small message"
                             style={
                               [
                                 {
@@ -63444,7 +69428,7 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                               ]
                             }
                           >
-                            Error message
+                            small message
                           </Text>
                         </Text>
                       </Text>
@@ -63453,18 +69437,280 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                 </View>
               </View>
             </View>
+            <View
+              style={
+                {
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                hitSlop={
+                  {
+                    "bottom": 4,
+                    "left": 4,
+                    "right": 4,
+                    "top": 4,
+                  }
+                }
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  {
+                    "paddingLeft": 5,
+                  }
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#2F343D",
+                        "fontSize": 16,
+                      },
+                      [
+                        {
+                          "lineHeight": 16,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  {
+                    "paddingLeft": 5,
+                  }
+                }
+                testID="small message-edited"
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#2F343D",
+                        "fontSize": 16,
+                      },
+                      [
+                        {
+                          "lineHeight": 16,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                hitSlop={
+                  {
+                    "bottom": 4,
+                    "left": 4,
+                    "right": 4,
+                    "top": 4,
+                  }
+                }
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  {
+                    "paddingLeft": 5,
+                  }
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#EC0D2A",
+                        "fontSize": 16,
+                      },
+                      [
+                        {
+                          "lineHeight": 16,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  {
+                    "paddingLeft": 5,
+                  }
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#2F343D",
+                        "fontSize": 16,
+                      },
+                      [
+                        {
+                          "lineHeight": 16,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <Text
+                allowFontScaling={false}
+                selectable={false}
+                style={
+                  [
+                    {
+                      "color": "#095AD2",
+                      "fontSize": 25,
+                    },
+                    [
+                      {
+                        "lineHeight": 25,
+                      },
+                      {
+                        "marginTop": -5,
+                        "paddingLeft": 5,
+                      },
+                    ],
+                    {
+                      "fontFamily": "custom",
+                      "fontStyle": "normal",
+                      "fontWeight": "normal",
+                    },
+                    {},
+                  ]
+                }
+                testID="read-receipt-read"
+              >
+                
+              </Text>
+            </View>
           </View>
         </A11yIndexView>
       </View>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r4h:"
+      orderKey=":r4c:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r4h:"
+        orderKey=":r4c:"
       >
         <View
           accessibilityState={
@@ -63497,367 +69743,402 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="Long name user looooong name user 10:00:00 AM  Message with read receipt.  Message was read"
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message with read receipt"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r4h:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="Long name user looooong name user 10:00:00 AM  this is a normal message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="this is a normal message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r4c:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
                   >
                     <View
-                      accessibilityLabel="Long name user looooong name user's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={237}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="Long name user looooong name user's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-Long name user looooong name user"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={238}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-Long name user looooong name user"
+                          underlayColor="#E4E7EA"
                         >
-                          Long name user looooong name user
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <Text
-                          allowFontScaling={false}
-                          selectable={false}
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "color": "#095AD2",
-                                "fontSize": 32.5,
-                              },
-                              [
-                                {
-                                  "lineHeight": 32.5,
-                                },
-                                {
-                                  "marginTop": -5,
-                                  "paddingLeft": 5,
-                                },
-                              ],
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "fontFamily": "custom",
-                                "fontStyle": "normal",
-                                "fontWeight": "normal",
-                              },
-                              {},
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Long name user looooong name user
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                          testID="read-receipt-read"
-                        >
-                          
-                        </Text>
+                        />
                       </View>
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
-                        testID="message-content-Message with read receipt"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-this is a normal message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message with read receipt"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message with read receipt
+                                <Text
+                                  accessibilityLabel="this is a normal message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  this is a normal message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r4i:"
+      orderKey=":r4d:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r4i:"
+        orderKey=":r4d:"
       >
         <View
           accessibilityState={
@@ -63890,1371 +70171,1399 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="Long name user looooong name user 10:00:00 AM  Message with read receipt.  Message was read"
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message with read receipt"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r4i:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="Long name user looooong name user 10:00:00 AM  Edited message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Edited message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r4d:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="Long name user looooong name user's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={239}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="Long name user looooong name user's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-Long name user looooong name user"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={240}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-Long name user looooong name user"
+                          underlayColor="#E4E7EA"
                         >
-                          Long name user looooong name user
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={false}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Long name user looooong name user
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
                           style={
                             {
-                              "opacity": 1,
-                              "paddingLeft": 5,
+                              "flexDirection": "row",
                             }
                           }
                         >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
+                          <View
                             style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                  "fontSize": 20.8,
-                                },
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                            testID="undefined-edited"
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
                                 [
                                   {
-                                    "lineHeight": 20.8,
+                                    "color": "#2F343D",
+                                    "fontSize": 20.8,
                                   },
-                                  undefined,
-                                ],
-                                {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            
-                          </Text>
+                                  [
+                                    {
+                                      "lineHeight": 20.8,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
                         </View>
-                        <Text
-                          allowFontScaling={false}
-                          selectable={false}
-                          style={
-                            [
-                              {
-                                "color": "#095AD2",
-                                "fontSize": 32.5,
-                              },
-                              [
-                                {
-                                  "lineHeight": 32.5,
-                                },
-                                {
-                                  "marginTop": -5,
-                                  "paddingLeft": 5,
-                                },
-                              ],
-                              {
-                                "fontFamily": "custom",
-                                "fontStyle": "normal",
-                                "fontWeight": "normal",
-                              },
-                              {},
-                            ]
-                          }
-                          testID="read-receipt-read"
-                        >
-                          
-                        </Text>
                       </View>
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
-                        testID="message-content-Message with read receipt"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Edited message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message with read receipt"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message with read receipt
+                                <Text
+                                  accessibilityLabel="Edited message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Edited message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r4j:"
+      orderKey=":r4e:"
     >
-      <View
-        accessibilityLabel="Long name user looooong name user 10:00:00 AM Message translated into English"
-        accessible={true}
-        style={
-          {
-            "flexDirection": "column",
-            "gap": 8,
-            "paddingHorizontal": 12,
-            "paddingVertical": 4,
-            "width": "100%",
-          }
-        }
-        testID="message-undefined"
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r4e:"
       >
-        <A11yIndexView
-          accessibilityLabel="Show all icons "
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
           accessible={true}
-          importantForAccessibility="yes"
-          orderFocusType={0}
-          orderIndex={2}
-          orderKey=":r4j:"
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
         >
           <View
-            accessible={true}
-            style={
-              {
-                "flexDirection": "row",
-              }
-            }
+            style={{}}
           >
             <View
+              accessibilityLabel="Long name user looooong name user 10:00:00 AM Message translated into English"
+              accessible={true}
               style={
                 {
-                  "alignItems": "flex-end",
-                  "width": 46.800000000000004,
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
               }
+              testID="message-undefined"
             >
-              <View
+              <A11yIndexView
+                accessibilityLabel="Translated message"
                 accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 46.800000000000004,
-                      "width": 46.800000000000004,
-                    },
-                    {
-                      "marginTop": 4,
-                    },
-                  ]
-                }
-                testID="avatar"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r4e:"
               >
                 <View
-                  accessibilityLabel="Long name user looooong name user's avatar"
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
                   accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onClick={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  style={
-                    {
-                      "opacity": 1,
-                    }
-                  }
-                >
-                  <ViewManagerAdapter_ExpoImage
-                    borderRadius={4}
-                    containerViewRef={"[React.ref]"}
-                    contentFit="cover"
-                    contentPosition={
-                      {
-                        "left": "50%",
-                        "top": "50%",
-                      }
-                    }
-                    height={46.800000000000004}
-                    nativeViewRef={"[React.ref]"}
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    onLoadStart={[Function]}
-                    onProgress={[Function]}
-                    placeholder={[]}
-                    priority="high"
-                    source={
-                      [
-                        {
-                          "headers": {
-                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                          },
-                          "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=93.60000000000001",
-                        },
-                      ]
-                    }
-                    style={
-                      {
-                        "borderRadius": 4,
-                        "height": 46.800000000000004,
-                        "width": 46.800000000000004,
-                      }
-                    }
-                    transition={null}
-                    width={46.800000000000004}
-                  />
-                </View>
-              </View>
-            </View>
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "marginLeft": 10,
-                }
-              }
-            >
-              <View
-                onLayout={[Function]}
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
                   style={
                     {
-                      "alignItems": "center",
-                      "flex": 1,
                       "flexDirection": "row",
-                      "justifyContent": "space-between",
                     }
                   }
                 >
                   <View
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "flexShrink": 1,
-                        "gap": 4,
-                        "opacity": 1,
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
                       }
                     }
-                    testID="username-header-Long name user looooong name user"
                   >
-                    <Text
-                      numberOfLines={1}
+                    <View
+                      accessible={true}
                       style={
                         [
                           {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "600",
-                            "lineHeight": 22,
-                            "textAlign": "left",
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
                           },
                           {
-                            "color": "#1F2329",
+                            "marginTop": 4,
                           },
                         ]
                       }
+                      testID="avatar"
                     >
-                      Long name user looooong name user
-                    </Text>
-                  </View>
-                  <View
-                    style={
-                      {
-                        "flexDirection": "row",
-                      }
-                    }
-                  >
-                    <View
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={false}
-                      hitSlop={
-                        {
-                          "bottom": 4,
-                          "left": 4,
-                          "right": 4,
-                          "top": 4,
-                        }
-                      }
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                          "paddingLeft": 5,
-                        }
-                      }
-                    >
-                      <Text
-                        allowFontScaling={false}
-                        selectable={false}
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={241}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
                         style={
                           [
                             {
-                              "color": "#2F343D",
-                              "fontSize": 20.8,
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
-                            [
-                              {
-                                "lineHeight": 20.8,
-                              },
-                              undefined,
-                            ],
                             {
-                              "fontFamily": "custom",
-                              "fontStyle": "normal",
-                              "fontWeight": "normal",
+                              "cursor": undefined,
                             },
-                            {},
                           ]
                         }
+                        underlayColor="#E4E7EA"
                       >
-                        
-                      </Text>
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="Long name user looooong name user's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
+                  </View>
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "paddingLeft": 5,
+                          "flex": 1,
                         }
                       }
-                      testID="undefined-edited"
                     >
-                      <Text
-                        allowFontScaling={false}
-                        selectable={false}
+                      <View
                         style={
-                          [
-                            {
-                              "color": "#2F343D",
-                              "fontSize": 20.8,
-                            },
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={242}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
                             [
                               {
-                                "lineHeight": 20.8,
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
-                              undefined,
-                            ],
-                            {
-                              "fontFamily": "custom",
-                              "fontStyle": "normal",
-                              "fontWeight": "normal",
-                            },
-                            {},
-                          ]
-                        }
-                      >
-                        
-                      </Text>
-                    </View>
-                    <View
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      hitSlop={
-                        {
-                          "bottom": 4,
-                          "left": 4,
-                          "right": 4,
-                          "top": 4,
-                        }
-                      }
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                          "paddingLeft": 5,
-                        }
-                      }
-                    >
-                      <Text
-                        allowFontScaling={false}
-                        selectable={false}
-                        style={
-                          [
-                            {
-                              "color": "#EC0D2A",
-                              "fontSize": 20.8,
-                            },
-                            [
                               {
-                                "lineHeight": 20.8,
+                                "cursor": undefined,
                               },
-                              undefined,
-                            ],
-                            {
-                              "fontFamily": "custom",
-                              "fontStyle": "normal",
-                              "fontWeight": "normal",
-                            },
-                            {},
-                          ]
-                        }
-                      >
-                        
-                      </Text>
-                    </View>
-                    <View
-                      style={
-                        {
-                          "paddingLeft": 5,
-                        }
-                      }
-                    >
-                      <Text
-                        allowFontScaling={false}
-                        selectable={false}
-                        style={
-                          [
-                            {
-                              "color": "#2F343D",
-                              "fontSize": 20.8,
-                            },
-                            [
+                            ]
+                          }
+                          testID="username-header-Long name user looooong name user"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "lineHeight": 20.8,
-                              },
-                              undefined,
-                            ],
-                            {
-                              "fontFamily": "custom",
-                              "fontStyle": "normal",
-                              "fontWeight": "normal",
-                            },
-                            {},
-                          ]
-                        }
-                      >
-                        
-                      </Text>
-                    </View>
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#095AD2",
-                            "fontSize": 32.5,
-                          },
-                          [
-                            {
-                              "lineHeight": 32.5,
-                            },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Long name user looooong name user
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
                             {
-                              "marginTop": -5,
-                              "paddingLeft": 5,
-                            },
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                      testID="read-receipt-read"
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-                <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 13,
-                        "fontWeight": "400",
-                        "lineHeight": 18,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                >
-                  10:00 AM
-                </Text>
-                <View
-                  style={
-                    {
-                      "gap": 4,
-                    }
-                  }
-                >
-                  <View
-                    testID="message-content-Show all icons "
-                  >
-                    <View
-                      style={
-                        {
-                          "gap": 2,
-                        }
-                      }
-                    >
+                              "flexDirection": "row",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 20.8,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 20.8,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
                       <Text
                         style={
                           [
                             {
                               "backgroundColor": "transparent",
                               "fontFamily": "Inter",
-                              "fontSize": 16,
+                              "fontSize": 13,
                               "fontWeight": "400",
-                              "lineHeight": 22,
+                              "lineHeight": 18,
                               "textAlign": "left",
                             },
                             {
-                              "color": "#2F343D",
+                              "color": "#6C727A",
                             },
                           ]
                         }
                       >
-                        <Text
-                          style={
-                            {
-                              "backgroundColor": "transparent",
-                              "flexShrink": 1,
-                              "fontFamily": "Inter",
-                              "fontWeight": "400",
-                              "textAlign": "left",
-                            }
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
                           }
+                        }
+                      >
+                        <View
+                          testID="message-content-Translated message"
                         >
-                          <Text
-                            accessibilityLabel="Show all icons "
+                          <View
                             style={
-                              [
-                                {
-                                  "flexShrink": 1,
-                                  "fontSize": 16,
-                                  "lineHeight": 22,
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
-                            Show all icons 
-                          </Text>
-                        </Text>
-                      </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Translated message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Translated message
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
                     </View>
                   </View>
                 </View>
-              </View>
+              </A11yIndexView>
             </View>
           </View>
-        </A11yIndexView>
-      </View>
+        </View>
+      </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r4k:"
+      orderKey=":r4f:"
     >
-      <View
-        accessibilityLabel="Long name user looooong name user 10:00:00 AM Message translated into English"
-        accessible={true}
-        style={
-          {
-            "flexDirection": "column",
-            "gap": 8,
-            "paddingHorizontal": 12,
-            "paddingVertical": 4,
-            "width": "100%",
-          }
-        }
-        testID="message-undefined"
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r4f:"
       >
-        <A11yIndexView
-          accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
           accessible={true}
-          importantForAccessibility="yes"
-          orderFocusType={0}
-          orderIndex={2}
-          orderKey=":r4k:"
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
         >
           <View
-            accessible={true}
-            style={
-              {
-                "flexDirection": "row",
-              }
-            }
+            style={{}}
           >
             <View
+              accessibilityLabel="Long name user looooong name user 10:00:00 AM  Encrypted message.  "
+              accessible={true}
               style={
                 {
-                  "alignItems": "flex-end",
-                  "width": 46.800000000000004,
-                }
-              }
-            />
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "marginLeft": 10,
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
               }
+              testID="message-undefined"
             >
-              <View
-                onLayout={[Function]}
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
+              <A11yIndexView
+                accessibilityLabel="Encrypted message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r4f:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "gap": 4,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
                   >
                     <View
+                      accessible={true}
                       style={
-                        {
-                          "gap": 2,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <Text
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={243}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
                         style={
                           [
                             {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "lineHeight": 22,
-                              "textAlign": "left",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
                             {
-                              "color": "#2F343D",
+                              "cursor": undefined,
                             },
                           ]
                         }
+                        underlayColor="#E4E7EA"
                       >
-                        <Text
+                        <View
+                          collapsable={false}
                           style={
                             {
-                              "backgroundColor": "transparent",
-                              "flexShrink": 1,
-                              "fontFamily": "Inter",
-                              "fontWeight": "400",
-                              "textAlign": "left",
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
                             }
                           }
-                        >
-                          <Text
-                            accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                            style={
+                        />
+                        <View
+                          accessibilityLabel="Long name user looooong name user's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
                               [
                                 {
-                                  "flexShrink": 1,
-                                  "fontSize": 16,
-                                  "lineHeight": 22,
-                                },
-                                {
-                                  "color": "#2F343D",
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=93.60000000000001",
                                 },
                               ]
                             }
-                          >
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                          </Text>
-                        </Text>
-                      </Text>
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-              </View>
-            </View>
-            <View
-              style={
-                {
-                  "flexDirection": "row",
-                }
-              }
-            >
-              <View
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={false}
-                hitSlop={
-                  {
-                    "bottom": 4,
-                    "left": 4,
-                    "right": 4,
-                    "top": 4,
-                  }
-                }
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  {
-                    "opacity": 1,
-                    "paddingLeft": 5,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 20.8,
-                      },
-                      [
-                        {
-                          "lineHeight": 20.8,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <View
-                style={
-                  {
-                    "paddingLeft": 5,
-                  }
-                }
-                testID="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.-edited"
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 20.8,
-                      },
-                      [
-                        {
-                          "lineHeight": 20.8,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <View
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                hitSlop={
-                  {
-                    "bottom": 4,
-                    "left": 4,
-                    "right": 4,
-                    "top": 4,
-                  }
-                }
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  {
-                    "opacity": 1,
-                    "paddingLeft": 5,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#EC0D2A",
-                        "fontSize": 20.8,
-                      },
-                      [
-                        {
-                          "lineHeight": 20.8,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <View
-                style={
-                  {
-                    "paddingLeft": 5,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
+                  <View
+                    style={
                       {
-                        "color": "#2F343D",
-                        "fontSize": 20.8,
-                      },
-                      [
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
                         {
-                          "lineHeight": 20.8,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <Text
-                allowFontScaling={false}
-                selectable={false}
-                style={
-                  [
-                    {
-                      "color": "#095AD2",
-                      "fontSize": 32.5,
-                    },
-                    [
-                      {
-                        "lineHeight": 32.5,
-                      },
-                      {
-                        "marginTop": -5,
-                        "paddingLeft": 5,
-                      },
-                    ],
-                    {
-                      "fontFamily": "custom",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    {},
-                  ]
-                }
-                testID="read-receipt-read"
-              >
-                
-              </Text>
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={244}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-Long name user looooong name user"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Long name user looooong name user
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 20.8,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 20.8,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Encrypted message"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Encrypted message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Encrypted message
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
             </View>
           </View>
-        </A11yIndexView>
-      </View>
+        </View>
+      </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r4l:"
+      orderKey=":r4g:"
     >
       <View
-        accessibilityLabel="Long name user looooong name user 10:00:00 AM Message translated into English"
+        accessibilityLabel="Long name user looooong name user 10:00:00 AM  Error message.  "
         accessible={true}
         style={
           {
@@ -65268,12 +71577,11 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
         testID="message-undefined"
       >
         <A11yIndexView
-          accessibilityLabel="small message"
-          accessible={true}
+          accessibilityLabel="Error message"
           importantForAccessibility="yes"
           orderFocusType={0}
           orderIndex={2}
-          orderKey=":r4l:"
+          orderKey=":r4g:"
         >
           <View
             accessible={true}
@@ -65290,364 +71598,418 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                   "width": 46.800000000000004,
                 }
               }
-            />
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "marginLeft": 10,
-                }
-              }
             >
               <View
-                onLayout={[Function]}
+                accessible={true}
                 style={
-                  {
-                    "flex": 1,
-                  }
+                  [
+                    {
+                      "borderRadius": 4,
+                      "height": 46.800000000000004,
+                      "width": 46.800000000000004,
+                    },
+                    {
+                      "marginTop": 4,
+                    },
+                  ]
                 }
+                testID="avatar"
               >
-                <View
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={245}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#E4E7EA"
                   style={
-                    {
-                      "gap": 4,
-                    }
+                    [
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "cursor": undefined,
+                      },
+                    ]
                   }
+                  underlayColor="#E4E7EA"
                 >
                   <View
-                    testID="message-content-small message"
+                    collapsable={false}
+                    style={
+                      {
+                        "backgroundColor": "#E4E7EA",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityLabel="Long name user looooong name user's avatar"
+                    accessible={true}
+                    style={{}}
                   >
-                    <View
-                      style={
+                    <ViewManagerAdapter_ExpoImage
+                      borderRadius={4}
+                      containerViewRef={"[React.ref]"}
+                      contentFit="cover"
+                      contentPosition={
                         {
-                          "gap": 2,
+                          "left": "50%",
+                          "top": "50%",
                         }
                       }
-                    >
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "lineHeight": 22,
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#2F343D",
+                      height={46.800000000000004}
+                      nativeViewRef={"[React.ref]"}
+                      onError={[Function]}
+                      onLoad={[Function]}
+                      onLoadStart={[Function]}
+                      onProgress={[Function]}
+                      placeholder={[]}
+                      priority="high"
+                      source={
+                        [
+                          {
+                            "headers": {
+                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
                             },
-                          ]
+                            "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=93.60000000000001",
+                          },
+                        ]
+                      }
+                      style={
+                        {
+                          "borderRadius": 4,
+                          "height": 46.800000000000004,
+                          "width": 46.800000000000004,
                         }
-                      >
-                        <Text
-                          style={
-                            {
-                              "backgroundColor": "transparent",
-                              "flexShrink": 1,
-                              "fontFamily": "Inter",
-                              "fontWeight": "400",
-                              "textAlign": "left",
-                            }
-                          }
-                        >
-                          <Text
-                            accessibilityLabel="small message"
-                            style={
-                              [
-                                {
-                                  "flexShrink": 1,
-                                  "fontSize": 16,
-                                  "lineHeight": 22,
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            small message
-                          </Text>
-                        </Text>
-                      </Text>
-                    </View>
+                      }
+                      transition={null}
+                      width={46.800000000000004}
+                    />
                   </View>
-                </View>
+                </RNGestureHandlerButton>
               </View>
             </View>
             <View
               style={
                 {
-                  "flexDirection": "row",
+                  "flex": 1,
+                  "marginLeft": 10,
                 }
               }
             >
               <View
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={false}
-                hitSlop={
-                  {
-                    "bottom": 4,
-                    "left": 4,
-                    "right": 4,
-                    "top": 4,
-                  }
-                }
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                onLayout={[Function]}
                 style={
                   {
-                    "opacity": 1,
-                    "paddingLeft": 5,
+                    "flex": 1,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 20.8,
-                      },
-                      [
-                        {
-                          "lineHeight": 20.8,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flex": 1,
+                      "flexDirection": "row",
+                      "justifyContent": "space-between",
+                    }
                   }
                 >
-                  
-                </Text>
-              </View>
-              <View
-                style={
-                  {
-                    "paddingLeft": 5,
-                  }
-                }
-                testID="small message-edited"
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 20.8,
-                      },
+                  <RNGestureHandlerButton
+                    activeOpacity={1}
+                    collapsable={false}
+                    delayLongPress={600}
+                    enabled={true}
+                    handlerTag={246}
+                    handlerType="NativeViewGestureHandler"
+                    innerRef={null}
+                    onActiveStateChange={[Function]}
+                    onGestureHandlerEvent={[Function]}
+                    onGestureHandlerStateChange={[Function]}
+                    onPress={[Function]}
+                    rippleColor="#E4E7EA"
+                    style={
                       [
                         {
-                          "lineHeight": 20.8,
+                          "backgroundColor": undefined,
+                          "borderRadius": undefined,
+                          "margin": undefined,
+                          "marginBottom": undefined,
+                          "marginEnd": undefined,
+                          "marginHorizontal": undefined,
+                          "marginLeft": undefined,
+                          "marginRight": undefined,
+                          "marginStart": undefined,
+                          "marginTop": undefined,
+                          "marginVertical": undefined,
                         },
-                        undefined,
-                      ],
+                        {
+                          "cursor": undefined,
+                        },
+                      ]
+                    }
+                    testID="username-header-Long name user looooong name user"
+                    underlayColor="#E4E7EA"
+                  >
+                    <View
+                      collapsable={false}
+                      style={
+                        {
+                          "backgroundColor": "#E4E7EA",
+                          "borderBottomLeftRadius": undefined,
+                          "borderBottomRightRadius": undefined,
+                          "borderRadius": undefined,
+                          "borderTopLeftRadius": undefined,
+                          "borderTopRightRadius": undefined,
+                          "bottom": 0,
+                          "left": 0,
+                          "opacity": 0,
+                          "position": "absolute",
+                          "right": 0,
+                          "top": 0,
+                        }
+                      }
+                    />
+                    <View
+                      style={
+                        {
+                          "alignItems": "center",
+                          "flexDirection": "row",
+                          "flexShrink": 1,
+                          "gap": 4,
+                        }
+                      }
+                    >
+                      <Text
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "flexShrink": 1,
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "600",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#1F2329",
+                            },
+                          ]
+                        }
+                      >
+                        Long name user looooong name user
+                      </Text>
+                    </View>
+                  </RNGestureHandlerButton>
+                  <View
+                    style={
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <View
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                hitSlop={
-                  {
-                    "bottom": 4,
-                    "left": 4,
-                    "right": 4,
-                    "top": 4,
-                  }
-                }
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  {
-                    "opacity": 1,
-                    "paddingLeft": 5,
-                  }
-                }
-              >
+                        "flexDirection": "row",
+                      }
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      collapsable={false}
+                      focusable={true}
+                      hitSlop={
+                        {
+                          "bottom": 4,
+                          "left": 4,
+                          "right": 4,
+                          "top": 4,
+                        }
+                      }
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        {
+                          "paddingLeft": 5,
+                        }
+                      }
+                    >
+                      <Text
+                        allowFontScaling={false}
+                        selectable={false}
+                        style={
+                          [
+                            {
+                              "color": "#EC0D2A",
+                              "fontSize": 20.8,
+                            },
+                            [
+                              {
+                                "lineHeight": 20.8,
+                              },
+                              undefined,
+                            ],
+                            {
+                              "fontFamily": "custom",
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
+                            },
+                            {},
+                          ]
+                        }
+                      >
+                        
+                      </Text>
+                    </View>
+                  </View>
+                </View>
                 <Text
-                  allowFontScaling={false}
-                  selectable={false}
                   style={
                     [
                       {
-                        "color": "#EC0D2A",
-                        "fontSize": 20.8,
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 13,
+                        "fontWeight": "400",
+                        "lineHeight": 18,
+                        "textAlign": "left",
                       },
-                      [
-                        {
-                          "lineHeight": 20.8,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "color": "#6C727A",
                       },
-                      {},
                     ]
                   }
                 >
-                  
+                  10:00 AM
                 </Text>
-              </View>
-              <View
-                style={
-                  {
-                    "paddingLeft": 5,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 20.8,
-                      },
-                      [
-                        {
-                          "lineHeight": 20.8,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
+                    {
+                      "gap": 4,
+                    }
                   }
                 >
-                  
-                </Text>
+                  <View
+                    testID="message-content-Error message"
+                  >
+                    <View
+                      style={
+                        {
+                          "gap": 2,
+                        }
+                      }
+                    >
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                            },
+                          ]
+                        }
+                      >
+                        <Text
+                          style={
+                            {
+                              "backgroundColor": "transparent",
+                              "flexShrink": 1,
+                              "fontFamily": "Inter",
+                              "fontWeight": "400",
+                              "textAlign": "left",
+                            }
+                          }
+                        >
+                          <Text
+                            accessibilityLabel="Error message"
+                            style={
+                              [
+                                {
+                                  "flexShrink": 1,
+                                  "fontSize": 16,
+                                  "lineHeight": 22,
+                                },
+                                {
+                                  "color": "#2F343D",
+                                },
+                              ]
+                            }
+                          >
+                            Error message
+                          </Text>
+                        </Text>
+                      </Text>
+                    </View>
+                  </View>
+                </View>
               </View>
-              <Text
-                allowFontScaling={false}
-                selectable={false}
-                style={
-                  [
-                    {
-                      "color": "#095AD2",
-                      "fontSize": 32.5,
-                    },
-                    [
-                      {
-                        "lineHeight": 32.5,
-                      },
-                      {
-                        "marginTop": -5,
-                        "paddingLeft": 5,
-                      },
-                    ],
-                    {
-                      "fontFamily": "custom",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    {},
-                  ]
-                }
-                testID="read-receipt-read"
-              >
-                
-              </Text>
             </View>
           </View>
         </A11yIndexView>
       </View>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: Mentions should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r4m:"
+      orderKey=":r4h:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r4m:"
+        orderKey=":r4h:"
       >
         <View
           accessibilityState={
@@ -65680,515 +72042,433 @@ exports[`Story Snapshots: Mentions should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  rocket.cat diego.mello all here general @team.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="@rocket.cat @diego.mello @all @here #general @team"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r4m:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="Long name user looooong name user 10:00:00 AM  Message with read receipt.  Message was read"
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message with read receipt"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r4h:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={247}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="Long name user looooong name user's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={248}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-Long name user looooong name user"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-@rocket.cat @diego.mello @all @here #general @team"
-                      >
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Long name user looooong name user
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "flexDirection": "row",
                             }
                           }
                         >
                           <Text
+                            allowFontScaling={false}
+                            selectable={false}
                             style={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
+                                  "color": "#095AD2",
+                                  "fontSize": 32.5,
                                 },
+                                [
+                                  {
+                                    "lineHeight": 32.5,
+                                  },
+                                  {
+                                    "marginTop": -5,
+                                    "paddingLeft": 5,
+                                  },
+                                ],
                                 {
-                                  "color": "#2F343D",
+                                  "fontFamily": "custom",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "normal",
                                 },
+                                {},
                               ]
                             }
+                            testID="read-receipt-read"
+                          >
+                            
+                          </Text>
+                        </View>
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Message with read receipt"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
-                              <Text
-                                onPress={[Function]}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#8E6300",
-                                    },
-                                  ]
-                                }
-                              >
-                                rocket.cat
-                              </Text>
-                              <Text
-                                accessibilityLabel=" "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 
-                              </Text>
-                              <Text
-                                onPress={[Function]}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#9B1325",
-                                    },
-                                  ]
-                                }
-                              >
-                                diego.mello
-                              </Text>
-                              <Text
-                                accessibilityLabel=" "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 
-                              </Text>
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#974809",
-                                    },
-                                  ]
-                                }
-                              >
-                                all
-                              </Text>
-                              <Text
-                                accessibilityLabel=" "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 
-                              </Text>
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#974809",
-                                    },
-                                  ]
-                                }
-                              >
-                                here
-                              </Text>
-                              <Text
-                                accessibilityLabel=" "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 
-                              </Text>
-                              <Text
-                                onPress={[Function]}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#095AD2",
-                                    },
-                                  ]
-                                }
-                              >
-                                general
-                              </Text>
-                              <Text
-                                accessibilityLabel=" "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 
-                              </Text>
                               <Text
                                 style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#8E6300",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                team
+                                <Text
+                                  accessibilityLabel="Message with read receipt"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message with read receipt
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r4n:"
+      orderKey=":r4i:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r4n:"
+        orderKey=":r4i:"
       >
         <View
           accessibilityState={
@@ -66221,601 +72501,776 @@ exports[`Story Snapshots: Mentions should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  rocket.cat Lorem ipsum dolor diego.mello sit amet, all consectetur adipiscing here elit, sed do eiusmod tempor general incididunt ut labore et dolore magna aliqua..  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="@rocket.cat Lorem ipsum dolor @diego.mello sit amet, @all consectetur adipiscing @here elit, sed do eiusmod tempor #general incididunt ut labore et dolore magna aliqua."
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r4n:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="Long name user looooong name user 10:00:00 AM  Message with read receipt.  Message was read"
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message with read receipt"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r4i:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={249}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="Long name user looooong name user's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={250}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-Long name user looooong name user"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-@rocket.cat Lorem ipsum dolor @diego.mello sit amet, @all consectetur adipiscing @here elit, sed do eiusmod tempor #general incididunt ut labore et dolore magna aliqua."
-                      >
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Long name user looooong name user
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "flexDirection": "row",
                             }
                           }
                         >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 20.8,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 20.8,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
                           <Text
+                            allowFontScaling={false}
+                            selectable={false}
                             style={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
+                                  "color": "#095AD2",
+                                  "fontSize": 32.5,
                                 },
+                                [
+                                  {
+                                    "lineHeight": 32.5,
+                                  },
+                                  {
+                                    "marginTop": -5,
+                                    "paddingLeft": 5,
+                                  },
+                                ],
                                 {
-                                  "color": "#2F343D",
+                                  "fontFamily": "custom",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "normal",
                                 },
+                                {},
                               ]
                             }
+                            testID="read-receipt-read"
+                          >
+                            
+                          </Text>
+                        </View>
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Message with read receipt"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                onPress={[Function]}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#8E6300",
-                                    },
-                                  ]
-                                }
-                              >
-                                rocket.cat
-                              </Text>
-                              <Text
-                                accessibilityLabel=" Lorem ipsum dolor "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 Lorem ipsum dolor 
-                              </Text>
-                              <Text
-                                onPress={[Function]}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#9B1325",
-                                    },
-                                  ]
-                                }
-                              >
-                                diego.mello
-                              </Text>
-                              <Text
-                                accessibilityLabel=" sit amet, "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 sit amet, 
-                              </Text>
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#974809",
-                                    },
-                                  ]
-                                }
-                              >
-                                all
-                              </Text>
-                              <Text
-                                accessibilityLabel=" consectetur adipiscing "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 consectetur adipiscing 
-                              </Text>
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#974809",
-                                    },
-                                  ]
-                                }
-                              >
-                                here
-                              </Text>
-                              <Text
-                                accessibilityLabel=" elit, sed do eiusmod tempor "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 elit, sed do eiusmod tempor 
-                              </Text>
-                              <Text
-                                onPress={[Function]}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#095AD2",
-                                    },
-                                  ]
-                                }
-                              >
-                                general
-                              </Text>
-                              <Text
-                                accessibilityLabel=" incididunt ut labore et dolore magna aliqua."
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                 incididunt ut labore et dolore magna aliqua.
+                                <Text
+                                  accessibilityLabel="Message with read receipt"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message with read receipt
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: MentionsLargeFont should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r4o:"
+      orderKey=":r4j:"
     >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r4o:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+      <View
+        accessibilityLabel="Long name user looooong name user 10:00:00 AM Message translated into English"
+        accessible={true}
+        style={
+          {
+            "flexDirection": "column",
+            "gap": 8,
+            "paddingHorizontal": 12,
+            "paddingVertical": 4,
+            "width": "100%",
           }
+        }
+        testID="message-undefined"
+      >
+        <A11yIndexView
+          accessibilityLabel="Show all icons "
           accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
+          importantForAccessibility="yes"
+          orderFocusType={0}
+          orderIndex={2}
+          orderKey=":r4j:"
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  rocket.cat diego.mello all here general @team.  "
             accessible={true}
             style={
               {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
+                "flexDirection": "row",
               }
             }
-            testID="message-undefined"
           >
-            <A11yIndexView
-              accessibilityLabel="@rocket.cat @diego.mello @all @here #general @team"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r4o:"
+            <View
+              style={
+                {
+                  "alignItems": "flex-end",
+                  "width": 46.800000000000004,
+                }
+              }
             >
               <View
                 accessible={true}
+                style={
+                  [
+                    {
+                      "borderRadius": 4,
+                      "height": 46.800000000000004,
+                      "width": 46.800000000000004,
+                    },
+                    {
+                      "marginTop": 4,
+                    },
+                  ]
+                }
+                testID="avatar"
+              >
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={251}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#E4E7EA"
+                  style={
+                    [
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "cursor": undefined,
+                      },
+                    ]
+                  }
+                  underlayColor="#E4E7EA"
+                >
+                  <View
+                    collapsable={false}
+                    style={
+                      {
+                        "backgroundColor": "#E4E7EA",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityLabel="Long name user looooong name user's avatar"
+                    accessible={true}
+                    style={{}}
+                  >
+                    <ViewManagerAdapter_ExpoImage
+                      borderRadius={4}
+                      containerViewRef={"[React.ref]"}
+                      contentFit="cover"
+                      contentPosition={
+                        {
+                          "left": "50%",
+                          "top": "50%",
+                        }
+                      }
+                      height={46.800000000000004}
+                      nativeViewRef={"[React.ref]"}
+                      onError={[Function]}
+                      onLoad={[Function]}
+                      onLoadStart={[Function]}
+                      onProgress={[Function]}
+                      placeholder={[]}
+                      priority="high"
+                      source={
+                        [
+                          {
+                            "headers": {
+                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                            },
+                            "uri": "https://open.rocket.chat/avatar/Long name user looooong name user?format=png&size=93.60000000000001",
+                          },
+                        ]
+                      }
+                      style={
+                        {
+                          "borderRadius": 4,
+                          "height": 46.800000000000004,
+                          "width": 46.800000000000004,
+                        }
+                      }
+                      transition={null}
+                      width={46.800000000000004}
+                    />
+                  </View>
+                </RNGestureHandlerButton>
+              </View>
+            </View>
+            <View
+              style={
+                {
+                  "flex": 1,
+                  "marginLeft": 10,
+                }
+              }
+            >
+              <View
+                onLayout={[Function]}
                 style={
                   {
-                    "flexDirection": "row",
+                    "flex": 1,
                   }
                 }
               >
                 <View
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "alignItems": "center",
+                      "flex": 1,
+                      "flexDirection": "row",
+                      "justifyContent": "space-between",
                     }
                   }
                 >
-                  <View
-                    accessible={true}
+                  <RNGestureHandlerButton
+                    activeOpacity={1}
+                    collapsable={false}
+                    delayLongPress={600}
+                    enabled={true}
+                    handlerTag={252}
+                    handlerType="NativeViewGestureHandler"
+                    innerRef={null}
+                    onActiveStateChange={[Function]}
+                    onGestureHandlerEvent={[Function]}
+                    onGestureHandlerStateChange={[Function]}
+                    onPress={[Function]}
+                    rippleColor="#E4E7EA"
                     style={
                       [
                         {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
+                          "backgroundColor": undefined,
+                          "borderRadius": undefined,
+                          "margin": undefined,
+                          "marginBottom": undefined,
+                          "marginEnd": undefined,
+                          "marginHorizontal": undefined,
+                          "marginLeft": undefined,
+                          "marginRight": undefined,
+                          "marginStart": undefined,
+                          "marginTop": undefined,
+                          "marginVertical": undefined,
                         },
                         {
-                          "marginTop": 4,
+                          "cursor": undefined,
                         },
                       ]
                     }
-                    testID="avatar"
+                    testID="username-header-Long name user looooong name user"
+                    underlayColor="#E4E7EA"
+                  >
+                    <View
+                      collapsable={false}
+                      style={
+                        {
+                          "backgroundColor": "#E4E7EA",
+                          "borderBottomLeftRadius": undefined,
+                          "borderBottomRightRadius": undefined,
+                          "borderRadius": undefined,
+                          "borderTopLeftRadius": undefined,
+                          "borderTopRightRadius": undefined,
+                          "bottom": 0,
+                          "left": 0,
+                          "opacity": 0,
+                          "position": "absolute",
+                          "right": 0,
+                          "top": 0,
+                        }
+                      }
+                    />
+                    <View
+                      style={
+                        {
+                          "alignItems": "center",
+                          "flexDirection": "row",
+                          "flexShrink": 1,
+                          "gap": 4,
+                        }
+                      }
+                    >
+                      <Text
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "flexShrink": 1,
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "600",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#1F2329",
+                            },
+                          ]
+                        }
+                      >
+                        Long name user looooong name user
+                      </Text>
+                    </View>
+                  </RNGestureHandlerButton>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
                       accessibilityState={
                         {
                           "busy": undefined,
@@ -66836,7 +73291,17 @@ exports[`Story Snapshots: MentionsLargeFont should match snapshot 1`] = `
                       accessible={true}
                       collapsable={false}
                       focusable={true}
+                      hitSlop={
+                        {
+                          "bottom": 4,
+                          "left": 4,
+                          "right": 4,
+                          "top": 4,
+                        }
+                      }
+                      onBlur={[Function]}
                       onClick={[Function]}
+                      onFocus={[Function]}
                       onResponderGrant={[Function]}
                       onResponderMove={[Function]}
                       onResponderRelease={[Function]}
@@ -66845,192 +73310,281 @@ exports[`Story Snapshots: MentionsLargeFont should match snapshot 1`] = `
                       onStartShouldSetResponder={[Function]}
                       style={
                         {
-                          "opacity": 1,
+                          "paddingLeft": 5,
                         }
                       }
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <Text
+                        allowFontScaling={false}
+                        selectable={false}
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                              "color": "#2F343D",
+                              "fontSize": 20.8,
+                            },
+                            [
+                              {
+                                "lineHeight": 20.8,
                               },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              undefined,
+                            ],
+                            {
+                              "fontFamily": "custom",
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
                             },
+                            {},
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
-                          }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                      >
+                        
+                      </Text>
                     </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
                     <View
                       style={
                         {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
+                          "paddingLeft": 5,
                         }
                       }
+                      testID="undefined-edited"
                     >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
+                      <Text
+                        allowFontScaling={false}
+                        selectable={false}
                         style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
+                          [
+                            {
+                              "color": "#2F343D",
+                              "fontSize": 20.8,
+                            },
+                            [
+                              {
+                                "lineHeight": 20.8,
+                              },
+                              undefined,
+                            ],
+                            {
+                              "fontFamily": "custom",
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
+                            },
+                            {},
+                          ]
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
-                          style={
+                        
+                      </Text>
+                    </View>
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      collapsable={false}
+                      focusable={true}
+                      hitSlop={
+                        {
+                          "bottom": 4,
+                          "left": 4,
+                          "right": 4,
+                          "top": 4,
+                        }
+                      }
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        {
+                          "paddingLeft": 5,
+                        }
+                      }
+                    >
+                      <Text
+                        allowFontScaling={false}
+                        selectable={false}
+                        style={
+                          [
+                            {
+                              "color": "#EC0D2A",
+                              "fontSize": 20.8,
+                            },
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "lineHeight": 20.8,
                               },
+                              undefined,
+                            ],
+                            {
+                              "fontFamily": "custom",
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
+                            },
+                            {},
+                          ]
+                        }
+                      >
+                        
+                      </Text>
+                    </View>
+                    <View
+                      style={
+                        {
+                          "paddingLeft": 5,
+                        }
+                      }
+                    >
+                      <Text
+                        allowFontScaling={false}
+                        selectable={false}
+                        style={
+                          [
+                            {
+                              "color": "#2F343D",
+                              "fontSize": 20.8,
+                            },
+                            [
                               {
-                                "color": "#1F2329",
+                                "lineHeight": 20.8,
                               },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
+                              undefined,
+                            ],
+                            {
+                              "fontFamily": "custom",
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
+                            },
+                            {},
+                          ]
                         }
-                      />
+                      >
+                        
+                      </Text>
                     </View>
                     <Text
+                      allowFontScaling={false}
+                      selectable={false}
                       style={
                         [
                           {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
+                            "color": "#095AD2",
+                            "fontSize": 32.5,
                           },
+                          [
+                            {
+                              "lineHeight": 32.5,
+                            },
+                            {
+                              "marginTop": -5,
+                              "paddingLeft": 5,
+                            },
+                          ],
                           {
-                            "color": "#6C727A",
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
                           },
+                          {},
                         ]
                       }
+                      testID="read-receipt-read"
                     >
-                      10:00 AM
+                      
                     </Text>
+                  </View>
+                </View>
+                <Text
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 13,
+                        "fontWeight": "400",
+                        "lineHeight": 18,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#6C727A",
+                      },
+                    ]
+                  }
+                >
+                  10:00 AM
+                </Text>
+                <View
+                  style={
+                    {
+                      "gap": 4,
+                    }
+                  }
+                >
+                  <View
+                    testID="message-content-Show all icons "
+                  >
                     <View
                       style={
                         {
-                          "gap": 4,
+                          "gap": 2,
                         }
                       }
                     >
-                      <View
-                        testID="message-content-@rocket.cat @diego.mello @all @here #general @team"
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                            },
+                          ]
+                        }
                       >
-                        <View
+                        <Text
                           style={
                             {
-                              "gap": 2,
+                              "backgroundColor": "transparent",
+                              "flexShrink": 1,
+                              "fontFamily": "Inter",
+                              "fontWeight": "400",
+                              "textAlign": "left",
                             }
                           }
                         >
                           <Text
+                            accessibilityLabel="Show all icons "
                             style={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
+                                  "flexShrink": 1,
                                   "fontSize": 16,
-                                  "fontWeight": "400",
                                   "lineHeight": 22,
-                                  "textAlign": "left",
                                 },
                                 {
                                   "color": "#2F343D",
@@ -67038,540 +73592,129 @@ exports[`Story Snapshots: MentionsLargeFont should match snapshot 1`] = `
                               ]
                             }
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                onPress={[Function]}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#8E6300",
-                                    },
-                                  ]
-                                }
-                              >
-                                rocket.cat
-                              </Text>
-                              <Text
-                                accessibilityLabel=" "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 
-                              </Text>
-                              <Text
-                                onPress={[Function]}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#9B1325",
-                                    },
-                                  ]
-                                }
-                              >
-                                diego.mello
-                              </Text>
-                              <Text
-                                accessibilityLabel=" "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 
-                              </Text>
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#974809",
-                                    },
-                                  ]
-                                }
-                              >
-                                all
-                              </Text>
-                              <Text
-                                accessibilityLabel=" "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 
-                              </Text>
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#974809",
-                                    },
-                                  ]
-                                }
-                              >
-                                here
-                              </Text>
-                              <Text
-                                accessibilityLabel=" "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 
-                              </Text>
-                              <Text
-                                onPress={[Function]}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#095AD2",
-                                    },
-                                  ]
-                                }
-                              >
-                                general
-                              </Text>
-                              <Text
-                                accessibilityLabel=" "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 
-                              </Text>
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#8E6300",
-                                    },
-                                  ]
-                                }
-                              >
-                                team
-                              </Text>
-                            </Text>
+                            Show all icons 
                           </Text>
-                        </View>
-                      </View>
+                        </Text>
+                      </Text>
                     </View>
                   </View>
                 </View>
               </View>
-            </A11yIndexView>
+            </View>
           </View>
-        </View>
-      </A11yIndexView>
+        </A11yIndexView>
+      </View>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r4p:"
+      orderKey=":r4k:"
     >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r4p:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+      <View
+        accessibilityLabel="Long name user looooong name user 10:00:00 AM Message translated into English"
+        accessible={true}
+        style={
+          {
+            "flexDirection": "column",
+            "gap": 8,
+            "paddingHorizontal": 12,
+            "paddingVertical": 4,
+            "width": "100%",
           }
+        }
+        testID="message-undefined"
+      >
+        <A11yIndexView
+          accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
           accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
+          importantForAccessibility="yes"
+          orderFocusType={0}
+          orderIndex={2}
+          orderKey=":r4k:"
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  rocket.cat Lorem ipsum dolor diego.mello sit amet, all consectetur adipiscing here elit, sed do eiusmod tempor general incididunt ut labore et dolore magna aliqua..  "
             accessible={true}
             style={
               {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
+                "flexDirection": "row",
               }
             }
-            testID="message-undefined"
           >
-            <A11yIndexView
-              accessibilityLabel="@rocket.cat Lorem ipsum dolor @diego.mello sit amet, @all consectetur adipiscing @here elit, sed do eiusmod tempor #general incididunt ut labore et dolore magna aliqua."
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r4p:"
+            <View
+              style={
+                {
+                  "alignItems": "flex-end",
+                  "width": 46.800000000000004,
+                }
+              }
+            />
+            <View
+              style={
+                {
+                  "flex": 1,
+                  "marginLeft": 10,
+                }
+              }
             >
               <View
-                accessible={true}
+                onLayout={[Function]}
                 style={
                   {
-                    "flexDirection": "row",
+                    "flex": 1,
                   }
                 }
               >
                 <View
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "gap": 4,
                     }
                   }
                 >
                   <View
-                    accessible={true}
-                    style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
+                    testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         {
-                          "opacity": 1,
+                          "gap": 2,
                         }
                       }
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <Text
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
-                          }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
                       >
                         <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-@rocket.cat Lorem ipsum dolor @diego.mello sit amet, @all consectetur adipiscing @here elit, sed do eiusmod tempor #general incididunt ut labore et dolore magna aliqua."
-                      >
-                        <View
                           style={
                             {
-                              "gap": 2,
+                              "backgroundColor": "transparent",
+                              "flexShrink": 1,
+                              "fontFamily": "Inter",
+                              "fontWeight": "400",
+                              "textAlign": "left",
                             }
                           }
                         >
                           <Text
+                            accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                             style={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
+                                  "flexShrink": 1,
                                   "fontSize": 16,
-                                  "fontWeight": "400",
                                   "lineHeight": 22,
-                                  "textAlign": "left",
                                 },
                                 {
                                   "color": "#2F343D",
@@ -67579,528 +73722,652 @@ exports[`Story Snapshots: MentionsLargeFont should match snapshot 1`] = `
                               ]
                             }
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                onPress={[Function]}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#8E6300",
-                                    },
-                                  ]
-                                }
-                              >
-                                rocket.cat
-                              </Text>
-                              <Text
-                                accessibilityLabel=" Lorem ipsum dolor "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 Lorem ipsum dolor 
-                              </Text>
-                              <Text
-                                onPress={[Function]}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#9B1325",
-                                    },
-                                  ]
-                                }
-                              >
-                                diego.mello
-                              </Text>
-                              <Text
-                                accessibilityLabel=" sit amet, "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 sit amet, 
-                              </Text>
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#974809",
-                                    },
-                                  ]
-                                }
-                              >
-                                all
-                              </Text>
-                              <Text
-                                accessibilityLabel=" consectetur adipiscing "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 consectetur adipiscing 
-                              </Text>
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#974809",
-                                    },
-                                  ]
-                                }
-                              >
-                                here
-                              </Text>
-                              <Text
-                                accessibilityLabel=" elit, sed do eiusmod tempor "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 elit, sed do eiusmod tempor 
-                              </Text>
-                              <Text
-                                onPress={[Function]}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "600",
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#095AD2",
-                                    },
-                                  ]
-                                }
-                              >
-                                general
-                              </Text>
-                              <Text
-                                accessibilityLabel=" incididunt ut labore et dolore magna aliqua."
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 incididunt ut labore et dolore magna aliqua.
-                              </Text>
-                            </Text>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                           </Text>
-                        </View>
-                      </View>
+                        </Text>
+                      </Text>
                     </View>
                   </View>
                 </View>
               </View>
-            </A11yIndexView>
+            </View>
+            <View
+              style={
+                {
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                hitSlop={
+                  {
+                    "bottom": 4,
+                    "left": 4,
+                    "right": 4,
+                    "top": 4,
+                  }
+                }
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  {
+                    "paddingLeft": 5,
+                  }
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#2F343D",
+                        "fontSize": 20.8,
+                      },
+                      [
+                        {
+                          "lineHeight": 20.8,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  {
+                    "paddingLeft": 5,
+                  }
+                }
+                testID="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.-edited"
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#2F343D",
+                        "fontSize": 20.8,
+                      },
+                      [
+                        {
+                          "lineHeight": 20.8,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                hitSlop={
+                  {
+                    "bottom": 4,
+                    "left": 4,
+                    "right": 4,
+                    "top": 4,
+                  }
+                }
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  {
+                    "paddingLeft": 5,
+                  }
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#EC0D2A",
+                        "fontSize": 20.8,
+                      },
+                      [
+                        {
+                          "lineHeight": 20.8,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  {
+                    "paddingLeft": 5,
+                  }
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#2F343D",
+                        "fontSize": 20.8,
+                      },
+                      [
+                        {
+                          "lineHeight": 20.8,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <Text
+                allowFontScaling={false}
+                selectable={false}
+                style={
+                  [
+                    {
+                      "color": "#095AD2",
+                      "fontSize": 32.5,
+                    },
+                    [
+                      {
+                        "lineHeight": 32.5,
+                      },
+                      {
+                        "marginTop": -5,
+                        "paddingLeft": 5,
+                      },
+                    ],
+                    {
+                      "fontFamily": "custom",
+                      "fontStyle": "normal",
+                      "fontWeight": "normal",
+                    },
+                    {},
+                  ]
+                }
+                testID="read-receipt-read"
+              >
+                
+              </Text>
+            </View>
           </View>
-        </View>
-      </A11yIndexView>
+        </A11yIndexView>
+      </View>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: Message should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r4q:"
+      orderKey=":r4l:"
     >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r4q:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+      <View
+        accessibilityLabel="Long name user looooong name user 10:00:00 AM Message translated into English"
+        accessible={true}
+        style={
+          {
+            "flexDirection": "column",
+            "gap": 8,
+            "paddingHorizontal": 12,
+            "paddingVertical": 4,
+            "width": "100%",
           }
+        }
+        testID="message-undefined"
+      >
+        <A11yIndexView
+          accessibilityLabel="small message"
           accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
+          importantForAccessibility="yes"
+          orderFocusType={0}
+          orderIndex={2}
+          orderKey=":r4l:"
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
             accessible={true}
             style={
               {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
+                "flexDirection": "row",
               }
             }
-            testID="message-undefined"
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r4q:"
+            <View
+              style={
+                {
+                  "alignItems": "flex-end",
+                  "width": 46.800000000000004,
+                }
+              }
+            />
+            <View
+              style={
+                {
+                  "flex": 1,
+                  "marginLeft": 10,
+                }
+              }
             >
               <View
-                accessible={true}
+                onLayout={[Function]}
                 style={
                   {
-                    "flexDirection": "row",
+                    "flex": 1,
                   }
                 }
               >
                 <View
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "gap": 4,
                     }
                   }
                 >
                   <View
-                    accessible={true}
-                    style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
+                    testID="message-content-small message"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         {
-                          "opacity": 1,
+                          "gap": 2,
                         }
                       }
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <Text
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#6C727A",
-                              },
-                            ]
+                      >
+                        <Text
+                          style={
+                            {
+                              "backgroundColor": "transparent",
+                              "flexShrink": 1,
+                              "fontFamily": "Inter",
+                              "fontWeight": "400",
+                              "textAlign": "left",
+                            }
                           }
                         >
-                          10:00 AM
+                          <Text
+                            accessibilityLabel="small message"
+                            style={
+                              [
+                                {
+                                  "flexShrink": 1,
+                                  "fontSize": 16,
+                                  "lineHeight": 22,
+                                },
+                                {
+                                  "color": "#2F343D",
+                                },
+                              ]
+                            }
+                          >
+                            small message
+                          </Text>
                         </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
+                      </Text>
                     </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    />
                   </View>
                 </View>
               </View>
-            </A11yIndexView>
+            </View>
+            <View
+              style={
+                {
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                hitSlop={
+                  {
+                    "bottom": 4,
+                    "left": 4,
+                    "right": 4,
+                    "top": 4,
+                  }
+                }
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  {
+                    "paddingLeft": 5,
+                  }
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#2F343D",
+                        "fontSize": 20.8,
+                      },
+                      [
+                        {
+                          "lineHeight": 20.8,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  {
+                    "paddingLeft": 5,
+                  }
+                }
+                testID="small message-edited"
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#2F343D",
+                        "fontSize": 20.8,
+                      },
+                      [
+                        {
+                          "lineHeight": 20.8,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                hitSlop={
+                  {
+                    "bottom": 4,
+                    "left": 4,
+                    "right": 4,
+                    "top": 4,
+                  }
+                }
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  {
+                    "paddingLeft": 5,
+                  }
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#EC0D2A",
+                        "fontSize": 20.8,
+                      },
+                      [
+                        {
+                          "lineHeight": 20.8,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  {
+                    "paddingLeft": 5,
+                  }
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#2F343D",
+                        "fontSize": 20.8,
+                      },
+                      [
+                        {
+                          "lineHeight": 20.8,
+                        },
+                        undefined,
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <Text
+                allowFontScaling={false}
+                selectable={false}
+                style={
+                  [
+                    {
+                      "color": "#095AD2",
+                      "fontSize": 32.5,
+                    },
+                    [
+                      {
+                        "lineHeight": 32.5,
+                      },
+                      {
+                        "marginTop": -5,
+                        "paddingLeft": 5,
+                      },
+                    ],
+                    {
+                      "fontFamily": "custom",
+                      "fontStyle": "normal",
+                      "fontWeight": "normal",
+                    },
+                    {},
+                  ]
+                }
+                testID="read-receipt-read"
+              >
+                
+              </Text>
+            </View>
           </View>
-        </View>
-      </A11yIndexView>
+        </A11yIndexView>
+      </View>
     </A11yOrderView>
   </View>
 </RCTScrollView>
 `;
 
-exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`] = `
+exports[`Story Snapshots: Mentions should match snapshot 1`] = `
 <RCTScrollView
   style={
     {
@@ -68110,13 +74377,13 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
 >
   <View>
     <A11yOrderView
-      orderKey=":r4r:"
+      orderKey=":r4m:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r4r:"
+        orderKey=":r4m:"
       >
         <View
           accessibilityState={
@@ -68149,318 +74416,317 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Forwarded message with file inside.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Forwarded message with file inside"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r4r:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  rocket.cat diego.mello all here general @team.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="@rocket.cat @diego.mello @all @here #general @team"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r4m:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={253}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={254}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Forwarded message with file inside"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
-                          <Text
+                          />
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
                           >
                             <Text
+                              numberOfLines={1}
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
                               }
                             >
-                              <Text
-                                accessibilityLabel="Forwarded message with file inside"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Forwarded message with file inside
-                              </Text>
+                              diego.mello
                             </Text>
-                          </Text>
-                        </View>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
                       <View
                         style={
@@ -68470,146 +74736,261 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                         }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
+                          testID="message-content-@rocket.cat @diego.mello @all @here #general @team"
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": true,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={false}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 2,
                               }
                             }
-                            testID="reply-rocket.cat-"
                           >
-                            <View
+                            <Text
                               style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
-                              <View
+                              <Text
                                 style={
                                   {
-                                    "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
                                   }
                                 }
                               >
-                                <View
+                                <Text
+                                  onPress={[Function]}
                                   style={
-                                    {
-                                      "alignItems": "center",
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "gap": 4,
-                                    }
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#8E6300",
+                                      },
+                                    ]
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    rocket.cat
-                                  </Text>
-                                  <Text
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 13,
-                                          "fontWeight": "400",
-                                          "lineHeight": 18,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    10:00 AM
-                                  </Text>
-                                </View>
-                              </View>
-                            </View>
+                                  rocket.cat
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" "
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                   
+                                </Text>
+                                <Text
+                                  onPress={[Function]}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#9B1325",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  diego.mello
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" "
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                   
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#974809",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  all
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" "
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                   
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#974809",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  here
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" "
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                   
+                                </Text>
+                                <Text
+                                  onPress={[Function]}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#095AD2",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  general
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" "
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                   
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#8E6300",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  team
+                                </Text>
+                              </Text>
+                            </Text>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r4s:"
+      orderKey=":r4n:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r4s:"
+        orderKey=":r4n:"
       >
         <View
           accessibilityState={
@@ -68642,690 +75023,1183 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Forwarded message with nested image.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Forwarded message with nested image"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r4s:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  rocket.cat Lorem ipsum dolor diego.mello sit amet, all consectetur adipiscing here elit, sed do eiusmod tempor general incididunt ut labore et dolore magna aliqua..  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="@rocket.cat Lorem ipsum dolor @diego.mello sit amet, @all consectetur adipiscing @here elit, sed do eiusmod tempor #general incididunt ut labore et dolore magna aliqua."
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r4n:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={255}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={256}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Forwarded message with nested image"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-@rocket.cat Lorem ipsum dolor @diego.mello sit amet, @all consectetur adipiscing @here elit, sed do eiusmod tempor #general incididunt ut labore et dolore magna aliqua."
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Forwarded message with nested image"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Forwarded message with nested image
+                                <Text
+                                  onPress={[Function]}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#8E6300",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  rocket.cat
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" Lorem ipsum dolor "
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                   Lorem ipsum dolor 
+                                </Text>
+                                <Text
+                                  onPress={[Function]}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#9B1325",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  diego.mello
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" sit amet, "
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                   sit amet, 
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#974809",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  all
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" consectetur adipiscing "
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                   consectetur adipiscing 
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#974809",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  here
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" elit, sed do eiusmod tempor "
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                   elit, sed do eiusmod tempor 
+                                </Text>
+                                <Text
+                                  onPress={[Function]}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#095AD2",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  general
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" incididunt ut labore et dolore magna aliqua."
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                   incididunt ut labore et dolore magna aliqua.
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
-                      <View
-                        style={
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: MentionsLargeFont should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
+    <A11yOrderView
+      orderKey=":r4o:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r4o:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  rocket.cat diego.mello all here general @team.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
+                }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="@rocket.cat @diego.mello @all @here #general @team"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r4o:"
+              >
+                <View
+                  accessible={true}
+                  style={
+                    {
+                      "flexDirection": "row",
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
+                  >
+                    <View
+                      accessible={true}
+                      style={
+                        [
                           {
-                            "gap": 4,
-                          }
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
+                      }
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={257}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
                         }
+                        underlayColor="#E4E7EA"
                       >
                         <View
+                          collapsable={false}
                           style={
                             {
-                              "gap": 4,
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
                             }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
+                        {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={258}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
                           <View
-                            accessibilityState={
+                            collapsable={false}
+                            style={
                               {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
                               }
                             }
-                            accessibilityValue={
+                          />
+                          <View
+                            style={
                               {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-@rocket.cat @diego.mello @all @here #general @team"
+                        >
+                          <View
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 2,
                               }
                             }
-                            testID="reply-rocket.cat-"
                           >
-                            <View
+                            <Text
                               style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
-                              <View
+                              <Text
                                 style={
                                   {
-                                    "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
                                   }
                                 }
                               >
-                                <View
+                                <Text
+                                  onPress={[Function]}
                                   style={
-                                    {
-                                      "alignItems": "center",
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "gap": 4,
-                                    }
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#8E6300",
+                                      },
+                                    ]
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    rocket.cat
-                                  </Text>
-                                </View>
-                                <View
+                                  rocket.cat
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" "
                                   style={
-                                    {
-                                      "gap": 4,
-                                    }
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
                                   }
                                 >
-                                  <View
-                                    style={
+                                   
+                                </Text>
+                                <Text
+                                  onPress={[Function]}
+                                  style={
+                                    [
                                       {
-                                        "gap": 4,
-                                      }
-                                    }
-                                  >
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
-                                    >
-                                      <Text
-                                        style={
-                                          [
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
-                                              "textAlign": "left",
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <Text
-                                          style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
-                                          }
-                                        >
-                                          <Text
-                                            accessibilityLabel="Nested image from forwarded message"
-                                            style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            Nested image from forwarded message
-                                          </Text>
-                                        </Text>
-                                      </Text>
-                                    </View>
-                                    <View
-                                      accessibilityState={
-                                        {
-                                          "busy": undefined,
-                                          "checked": undefined,
-                                          "disabled": undefined,
-                                          "expanded": undefined,
-                                          "selected": undefined,
-                                        }
-                                      }
-                                      accessibilityValue={
-                                        {
-                                          "max": undefined,
-                                          "min": undefined,
-                                          "now": undefined,
-                                          "text": undefined,
-                                        }
-                                      }
-                                      accessible={true}
-                                      collapsable={false}
-                                      focusable={true}
-                                      onClick={[Function]}
-                                      onResponderGrant={[Function]}
-                                      onResponderMove={[Function]}
-                                      onResponderRelease={[Function]}
-                                      onResponderTerminate={[Function]}
-                                      onResponderTerminationRequest={[Function]}
-                                      onStartShouldSetResponder={[Function]}
-                                      style={
-                                        {
-                                          "borderRadius": 4,
-                                          "flexDirection": "column",
-                                          "opacity": 1,
-                                        }
-                                      }
-                                    >
-                                      <View
-                                        onLayout={[Function]}
-                                        style={
-                                          {
-                                            "flex": 1,
-                                          }
-                                        }
-                                      >
-                                        <View
-                                          style={
-                                            [
-                                              {
-                                                "borderRadius": 4,
-                                                "minHeight": 200,
-                                                "overflow": "hidden",
-                                                "width": "100%",
-                                              },
-                                              {
-                                                "borderColor": "#CBCED1",
-                                                "borderRadius": 4,
-                                                "borderWidth": 1,
-                                                "overflow": "hidden",
-                                              },
-                                            ]
-                                          }
-                                        />
-                                        <View
-                                          style={
-                                            [
-                                              [
-                                                {
-                                                  "borderRadius": 4,
-                                                  "minHeight": 200,
-                                                  "overflow": "hidden",
-                                                  "width": "100%",
-                                                },
-                                                {
-                                                  "borderColor": "#CBCED1",
-                                                  "borderRadius": 4,
-                                                  "borderWidth": 1,
-                                                  "overflow": "hidden",
-                                                },
-                                              ],
-                                              {
-                                                "borderWidth": 0,
-                                                "bottom": 0,
-                                                "left": 0,
-                                                "position": "absolute",
-                                                "right": 0,
-                                                "top": 0,
-                                              },
-                                              {
-                                                "backgroundColor": "#E4E7EA",
-                                              },
-                                            ]
-                                          }
-                                        />
-                                        <View
-                                          style={
-                                            [
-                                              [
-                                                {
-                                                  "borderRadius": 4,
-                                                  "minHeight": 200,
-                                                  "overflow": "hidden",
-                                                  "width": "100%",
-                                                },
-                                                {
-                                                  "borderColor": "#CBCED1",
-                                                  "borderRadius": 4,
-                                                  "borderWidth": 1,
-                                                  "overflow": "hidden",
-                                                },
-                                              ],
-                                              {
-                                                "alignItems": "center",
-                                                "justifyContent": "center",
-                                                "position": "absolute",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          <Text
-                                            allowFontScaling={false}
-                                            selectable={false}
-                                            style={
-                                              [
-                                                {
-                                                  "color": "#2F343D",
-                                                  "fontSize": 54,
-                                                },
-                                                [
-                                                  {
-                                                    "lineHeight": 54,
-                                                  },
-                                                  undefined,
-                                                ],
-                                                {
-                                                  "fontFamily": "custom",
-                                                  "fontStyle": "normal",
-                                                  "fontWeight": "normal",
-                                                },
-                                                {},
-                                              ]
-                                            }
-                                          >
-                                            
-                                          </Text>
-                                        </View>
-                                        <View
-                                          style={
-                                            {
-                                              "bottom": 8,
-                                              "flexDirection": "row",
-                                              "gap": 8,
-                                              "position": "absolute",
-                                              "right": 8,
-                                            }
-                                          }
-                                        />
-                                      </View>
-                                    </View>
-                                  </View>
-                                </View>
-                              </View>
-                            </View>
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#9B1325",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  diego.mello
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" "
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                   
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#974809",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  all
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" "
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                   
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#974809",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  here
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" "
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                   
+                                </Text>
+                                <Text
+                                  onPress={[Function]}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#095AD2",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  general
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" "
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                   
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#8E6300",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  team
+                                </Text>
+                              </Text>
+                            </Text>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: MessageWithReadReceipt should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r4t:"
+      orderKey=":r4p:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r4t:"
+        orderKey=":r4p:"
       >
         <View
           accessibilityState={
@@ -69358,367 +76232,576 @@ exports[`Story Snapshots: MessageWithReadReceipt should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  Message was not read"
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="I'm fine!"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r4t:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  rocket.cat Lorem ipsum dolor diego.mello sit amet, all consectetur adipiscing here elit, sed do eiusmod tempor general incididunt ut labore et dolore magna aliqua..  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="@rocket.cat Lorem ipsum dolor @diego.mello sit amet, @all consectetur adipiscing @here elit, sed do eiusmod tempor #general incididunt ut labore et dolore magna aliqua."
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r4p:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={259}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={260}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
                       >
-                        <Text
-                          allowFontScaling={false}
-                          selectable={false}
-                          style={
-                            [
-                              {
-                                "color": "#9EA2A8",
-                                "fontSize": 25,
-                              },
-                              [
-                                {
-                                  "lineHeight": 25,
-                                },
-                                {
-                                  "marginTop": -5,
-                                  "paddingLeft": 5,
-                                },
-                              ],
-                              {
-                                "fontFamily": "custom",
-                                "fontStyle": "normal",
-                                "fontWeight": "normal",
-                              },
-                              {},
-                            ]
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
                           }
-                          testID="read-receipt-unread"
-                        >
-                          
-                        </Text>
-                      </View>
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
                         }
-                      }
-                    >
-                      <View
-                        testID="message-content-I'm fine!"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-@rocket.cat Lorem ipsum dolor @diego.mello sit amet, @all consectetur adipiscing @here elit, sed do eiusmod tempor #general incididunt ut labore et dolore magna aliqua."
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="I'm fine!"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                I'm fine!
+                                <Text
+                                  onPress={[Function]}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#8E6300",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  rocket.cat
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" Lorem ipsum dolor "
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                   Lorem ipsum dolor 
+                                </Text>
+                                <Text
+                                  onPress={[Function]}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#9B1325",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  diego.mello
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" sit amet, "
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                   sit amet, 
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#974809",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  all
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" consectetur adipiscing "
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                   consectetur adipiscing 
+                                </Text>
+                                <Text
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#974809",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  here
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" elit, sed do eiusmod tempor "
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                   elit, sed do eiusmod tempor 
+                                </Text>
+                                <Text
+                                  onPress={[Function]}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#095AD2",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  general
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" incididunt ut labore et dolore magna aliqua."
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                   incididunt ut labore et dolore magna aliqua.
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: Message should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r4u:"
+      orderKey=":r4q:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r4u:"
+        orderKey=":r4q:"
       >
         <View
           accessibilityState={
@@ -69751,184 +76834,355 @@ exports[`Story Snapshots: MessageWithReadReceipt should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  Message was not read"
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="I'm fine!"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r4u:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r4q:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
-                        "flex": 1,
+                        "alignItems": "flex-end",
+                        "width": 36,
                       }
                     }
                   >
                     <View
+                      accessible={true}
                       style={
-                        {
-                          "gap": 4,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <View
-                        testID="message-content-I'm fine!"
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={261}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
                       >
                         <View
+                          collapsable={false}
                           style={
                             {
-                              "gap": 2,
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
                             }
                           }
-                        >
-                          <Text
-                            style={
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
                                 },
                               ]
                             }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
                               }
-                            >
-                              <Text
-                                accessibilityLabel="I'm fine!"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                I'm fine!
-                              </Text>
-                            </Text>
-                          </Text>
+                            }
+                            transition={null}
+                            width={36}
+                          />
                         </View>
-                      </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <View
                     style={
-                      [
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
                         {
-                          "color": "#9EA2A8",
-                          "fontSize": 25,
-                        },
-                        [
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
                           {
-                            "lineHeight": 25,
-                          },
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={262}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <View
+                        style={
                           {
-                            "marginTop": -5,
-                            "paddingLeft": 5,
-                          },
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                    testID="read-receipt-unread"
-                  >
-                    
-                  </Text>
+                            "gap": 4,
+                          }
+                        }
+                      />
+                    </View>
+                  </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r4v:"
+      orderKey=":r4r:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r4v:"
+        orderKey=":r4r:"
       >
         <View
           accessibilityState={
@@ -69961,590 +77215,538 @@ exports[`Story Snapshots: MessageWithReadReceipt should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  Message was read"
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="I'm fine!"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r4v:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Forwarded message with file inside.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Forwarded message with file inside"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r4r:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={263}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={264}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <Text
-                          allowFontScaling={false}
-                          selectable={false}
-                          style={
-                            [
-                              {
-                                "color": "#095AD2",
-                                "fontSize": 25,
-                              },
-                              [
-                                {
-                                  "lineHeight": 25,
-                                },
-                                {
-                                  "marginTop": -5,
-                                  "paddingLeft": 5,
-                                },
-                              ],
-                              {
-                                "fontFamily": "custom",
-                                "fontStyle": "normal",
-                                "fontWeight": "normal",
-                              },
-                              {},
-                            ]
+                            "gap": 4,
                           }
-                          testID="read-receipt-read"
-                        >
-                          
-                        </Text>
-                      </View>
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
                         }
-                      }
-                    >
-                      <View
-                        testID="message-content-I'm fine!"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Forwarded message with file inside"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="I'm fine!"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                I'm fine!
+                                <Text
+                                  accessibilityLabel="Forwarded message with file inside"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Forwarded message with file inside
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r50:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r50:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
-        >
-          <View
-            accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  Message was read"
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
-          >
-            <A11yIndexView
-              accessibilityLabel="I'm fine!"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r50:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-I'm fine!"
-                      >
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "gap": 4,
                             }
                           }
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 4,
+                              }
                             }
                           >
-                            <Text
-                              style={
+                            <View
+                              accessibilityState={
                                 {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": true,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-"
                             >
-                              <Text
-                                accessibilityLabel="I'm fine!"
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
+                                  }
                                 }
                               >
-                                I'm fine!
-                              </Text>
-                            </Text>
-                          </Text>
+                                <View
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "flexDirection": "column",
+                                      "gap": 4,
+                                      "width": 200,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      rocket.cat
+                                    </Text>
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 13,
+                                            "fontWeight": "400",
+                                            "lineHeight": 18,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      10:00 AM
+                                    </Text>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#095AD2",
-                          "fontSize": 25,
-                        },
-                        [
-                          {
-                            "lineHeight": 25,
-                          },
-                          {
-                            "marginTop": -5,
-                            "paddingLeft": 5,
-                          },
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                    testID="read-receipt-read"
-                  >
-                    
-                  </Text>
-                </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: MessageWithReadReceiptLargeFont should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r51:"
+      orderKey=":r4s:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r51:"
+        orderKey=":r4s:"
       >
         <View
           accessibilityState={
@@ -70577,367 +77779,762 @@ exports[`Story Snapshots: MessageWithReadReceiptLargeFont should match snapshot
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  Message was not read"
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="I'm fine!"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r51:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Forwarded message with nested image.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Forwarded message with nested image"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r4s:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={265}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={266}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <Text
-                          allowFontScaling={false}
-                          selectable={false}
-                          style={
-                            [
-                              {
-                                "color": "#9EA2A8",
-                                "fontSize": 32.5,
-                              },
-                              [
-                                {
-                                  "lineHeight": 32.5,
-                                },
-                                {
-                                  "marginTop": -5,
-                                  "paddingLeft": 5,
-                                },
-                              ],
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "fontFamily": "custom",
-                                "fontStyle": "normal",
-                                "fontWeight": "normal",
-                              },
-                              {},
-                            ]
-                          }
-                          testID="read-receipt-unread"
-                        >
-                          
-                        </Text>
-                      </View>
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-I'm fine!"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
-                          <Text
+                          />
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
                           >
                             <Text
+                              numberOfLines={1}
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
                               }
                             >
-                              <Text
-                                accessibilityLabel="I'm fine!"
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Forwarded message with nested image"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                I'm fine!
+                                <Text
+                                  accessibilityLabel="Forwarded message with nested image"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Forwarded message with nested image
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "gap": 4,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-"
+                            >
+                              <View
+                                style={
+                                  {
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "flexDirection": "column",
+                                      "gap": 4,
+                                      "width": 200,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      rocket.cat
+                                    </Text>
+                                  </View>
+                                  <View
+                                    style={
+                                      {
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        {
+                                          "gap": 4,
+                                        }
+                                      }
+                                    >
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          style={
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            style={
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
+                                            }
+                                          >
+                                            <Text
+                                              accessibilityLabel="Nested image from forwarded message"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Nested image from forwarded message
+                                            </Text>
+                                          </Text>
+                                        </Text>
+                                      </View>
+                                      <View
+                                        accessibilityState={
+                                          {
+                                            "busy": undefined,
+                                            "checked": undefined,
+                                            "disabled": undefined,
+                                            "expanded": undefined,
+                                            "selected": undefined,
+                                          }
+                                        }
+                                        accessibilityValue={
+                                          {
+                                            "max": undefined,
+                                            "min": undefined,
+                                            "now": undefined,
+                                            "text": undefined,
+                                          }
+                                        }
+                                        accessible={true}
+                                        collapsable={false}
+                                        focusable={true}
+                                        onBlur={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        onResponderGrant={[Function]}
+                                        onResponderMove={[Function]}
+                                        onResponderRelease={[Function]}
+                                        onResponderTerminate={[Function]}
+                                        onResponderTerminationRequest={[Function]}
+                                        onStartShouldSetResponder={[Function]}
+                                        style={
+                                          {
+                                            "borderRadius": 4,
+                                            "flexDirection": "column",
+                                          }
+                                        }
+                                      >
+                                        <View
+                                          onLayout={[Function]}
+                                          style={
+                                            {
+                                              "flex": 1,
+                                            }
+                                          }
+                                        >
+                                          <View
+                                            style={
+                                              [
+                                                {
+                                                  "borderRadius": 4,
+                                                  "minHeight": 200,
+                                                  "overflow": "hidden",
+                                                  "width": "100%",
+                                                },
+                                                {
+                                                  "borderColor": "#CBCED1",
+                                                  "borderRadius": 4,
+                                                  "borderWidth": 1,
+                                                  "overflow": "hidden",
+                                                },
+                                              ]
+                                            }
+                                          />
+                                          <View
+                                            style={
+                                              [
+                                                [
+                                                  {
+                                                    "borderRadius": 4,
+                                                    "minHeight": 200,
+                                                    "overflow": "hidden",
+                                                    "width": "100%",
+                                                  },
+                                                  {
+                                                    "borderColor": "#CBCED1",
+                                                    "borderRadius": 4,
+                                                    "borderWidth": 1,
+                                                    "overflow": "hidden",
+                                                  },
+                                                ],
+                                                {
+                                                  "borderWidth": 0,
+                                                  "bottom": 0,
+                                                  "left": 0,
+                                                  "position": "absolute",
+                                                  "right": 0,
+                                                  "top": 0,
+                                                },
+                                                {
+                                                  "backgroundColor": "#E4E7EA",
+                                                },
+                                              ]
+                                            }
+                                          />
+                                          <View
+                                            style={
+                                              [
+                                                [
+                                                  {
+                                                    "borderRadius": 4,
+                                                    "minHeight": 200,
+                                                    "overflow": "hidden",
+                                                    "width": "100%",
+                                                  },
+                                                  {
+                                                    "borderColor": "#CBCED1",
+                                                    "borderRadius": 4,
+                                                    "borderWidth": 1,
+                                                    "overflow": "hidden",
+                                                  },
+                                                ],
+                                                {
+                                                  "alignItems": "center",
+                                                  "justifyContent": "center",
+                                                  "position": "absolute",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            <Text
+                                              allowFontScaling={false}
+                                              selectable={false}
+                                              style={
+                                                [
+                                                  {
+                                                    "color": "#2F343D",
+                                                    "fontSize": 54,
+                                                  },
+                                                  [
+                                                    {
+                                                      "lineHeight": 54,
+                                                    },
+                                                    undefined,
+                                                  ],
+                                                  {
+                                                    "fontFamily": "custom",
+                                                    "fontStyle": "normal",
+                                                    "fontWeight": "normal",
+                                                  },
+                                                  {},
+                                                ]
+                                              }
+                                            >
+                                              
+                                            </Text>
+                                          </View>
+                                          <View
+                                            style={
+                                              {
+                                                "bottom": 8,
+                                                "flexDirection": "row",
+                                                "gap": 8,
+                                                "position": "absolute",
+                                                "right": 8,
+                                              }
+                                            }
+                                          />
+                                        </View>
+                                      </View>
+                                    </View>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: MessageWithReadReceipt should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r52:"
+      orderKey=":r4t:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r52:"
+        orderKey=":r4t:"
       >
         <View
           accessibilityState={
@@ -70970,184 +78567,433 @@ exports[`Story Snapshots: MessageWithReadReceiptLargeFont should match snapshot
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  Message was not read"
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="I'm fine!"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r52:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  Message was not read"
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="I'm fine!"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r4t:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
-                        "flex": 1,
+                        "alignItems": "flex-end",
+                        "width": 36,
                       }
                     }
                   >
                     <View
+                      accessible={true}
                       style={
-                        {
-                          "gap": 4,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <View
-                        testID="message-content-I'm fine!"
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={267}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
                       >
                         <View
+                          collapsable={false}
                           style={
                             {
-                              "gap": 2,
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
                             }
                           }
-                        >
-                          <Text
-                            style={
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
                                 },
                               ]
                             }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
                               }
-                            >
-                              <Text
-                                accessibilityLabel="I'm fine!"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                I'm fine!
-                              </Text>
-                            </Text>
-                          </Text>
+                            }
+                            transition={null}
+                            width={36}
+                          />
                         </View>
-                      </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <View
                     style={
-                      [
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
                         {
-                          "color": "#9EA2A8",
-                          "fontSize": 32.5,
-                        },
-                        [
-                          {
-                            "lineHeight": 32.5,
-                          },
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
                           {
-                            "marginTop": -5,
-                            "paddingLeft": 5,
-                          },
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                    testID="read-receipt-unread"
-                  >
-                    
-                  </Text>
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={268}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        >
+                          <Text
+                            allowFontScaling={false}
+                            selectable={false}
+                            style={
+                              [
+                                {
+                                  "color": "#9EA2A8",
+                                  "fontSize": 25,
+                                },
+                                [
+                                  {
+                                    "lineHeight": 25,
+                                  },
+                                  {
+                                    "marginTop": -5,
+                                    "paddingLeft": 5,
+                                  },
+                                ],
+                                {
+                                  "fontFamily": "custom",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "normal",
+                                },
+                                {},
+                              ]
+                            }
+                            testID="read-receipt-unread"
+                          >
+                            
+                          </Text>
+                        </View>
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-I'm fine!"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="I'm fine!"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  I'm fine!
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r53:"
+      orderKey=":r4u:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r53:"
+        orderKey=":r4u:"
       >
         <View
           accessibilityState={
@@ -71180,367 +79026,198 @@ exports[`Story Snapshots: MessageWithReadReceiptLargeFont should match snapshot
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  Message was read"
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="I'm fine!"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r53:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  Message was not read"
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="I'm fine!"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r4u:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
                       }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
-                          }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
                     }
-                  }
-                >
+                  />
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
                             "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <Text
-                          allowFontScaling={false}
-                          selectable={false}
-                          style={
-                            [
-                              {
-                                "color": "#095AD2",
-                                "fontSize": 32.5,
-                              },
-                              [
-                                {
-                                  "lineHeight": 32.5,
-                                },
-                                {
-                                  "marginTop": -5,
-                                  "paddingLeft": 5,
-                                },
-                              ],
-                              {
-                                "fontFamily": "custom",
-                                "fontStyle": "normal",
-                                "fontWeight": "normal",
-                              },
-                              {},
-                            ]
                           }
-                          testID="read-receipt-read"
-                        >
-                          
-                        </Text>
-                      </View>
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
                         }
-                      }
-                    >
-                      <View
-                        testID="message-content-I'm fine!"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-I'm fine!"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="I'm fine!"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                I'm fine!
+                                <Text
+                                  accessibilityLabel="I'm fine!"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  I'm fine!
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#9EA2A8",
+                            "fontSize": 25,
+                          },
+                          [
+                            {
+                              "lineHeight": 25,
+                            },
+                            {
+                              "marginTop": -5,
+                              "paddingLeft": 5,
+                            },
+                          ],
+                          {
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                      testID="read-receipt-unread"
+                    >
+                      
+                    </Text>
+                  </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r54:"
+      orderKey=":r4v:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r54:"
+        orderKey=":r4v:"
       >
         <View
           accessibilityState={
@@ -71573,197 +79250,433 @@ exports[`Story Snapshots: MessageWithReadReceiptLargeFont should match snapshot
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  Message was read"
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="I'm fine!"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r54:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  Message was read"
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="I'm fine!"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r4v:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  >
+                    <View
+                      accessible={true}
+                      style={
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
+                      }
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={269}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-I'm fine!"
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
                       >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={270}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "flexDirection": "row",
                             }
                           }
                         >
                           <Text
+                            allowFontScaling={false}
+                            selectable={false}
                             style={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
+                                  "color": "#095AD2",
+                                  "fontSize": 25,
                                 },
+                                [
+                                  {
+                                    "lineHeight": 25,
+                                  },
+                                  {
+                                    "marginTop": -5,
+                                    "paddingLeft": 5,
+                                  },
+                                ],
                                 {
-                                  "color": "#2F343D",
+                                  "fontFamily": "custom",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "normal",
                                 },
+                                {},
                               ]
                             }
+                            testID="read-receipt-read"
+                          >
+                            
+                          </Text>
+                        </View>
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-I'm fine!"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="I'm fine!"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                I'm fine!
+                                <Text
+                                  accessibilityLabel="I'm fine!"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  I'm fine!
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#095AD2",
-                          "fontSize": 32.5,
-                        },
-                        [
-                          {
-                            "lineHeight": 32.5,
-                          },
-                          {
-                            "marginTop": -5,
-                            "paddingLeft": 5,
-                          },
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                    testID="read-receipt-read"
-                  >
-                    
-                  </Text>
-                </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r55:"
+      orderKey=":r50:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r55:"
+        orderKey=":r50:"
       >
         <View
           accessibilityState={
@@ -71796,257 +79709,73 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="I'm fine!"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r55:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  Message was read"
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="I'm fine!"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r50:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
                       }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
                     }
-                  }
-                >
+                  />
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
                         }
                       }
                     >
@@ -72058,241 +79787,133 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                         }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
+                          testID="message-content-I'm fine!"
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 2,
                               }
                             }
-                            testID="reply-I'm a very long long title and I'll break-How are you?"
                           >
-                            <View
+                            <Text
                               style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
-                              <View
+                              <Text
                                 style={
                                   {
-                                    "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
                                   }
                                 }
                               >
-                                <View
-                                  style={
-                                    {
-                                      "alignItems": "center",
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "gap": 4,
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    I'm a very long long title and I'll break
-                                  </Text>
-                                </View>
-                                <View
+                                <Text
+                                  accessibilityLabel="I'm fine!"
                                   style={
-                                    {
-                                      "gap": 2,
-                                    }
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
                                   }
                                 >
-                                  <Text
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
-                                      style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
-                                      }
-                                    >
-                                      <Text
-                                        accessibilityLabel="How are you?"
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        How are you?
-                                      </Text>
-                                    </Text>
-                                  </Text>
-                                </View>
-                              </View>
-                            </View>
-                          </View>
-                        </View>
-                      </View>
-                      <View
-                        testID="message-content-I'm fine!"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="I'm fine!"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                I'm fine!
+                                  I'm fine!
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#095AD2",
+                            "fontSize": 25,
+                          },
+                          [
+                            {
+                              "lineHeight": 25,
+                            },
+                            {
+                              "marginTop": -5,
+                              "paddingLeft": 5,
+                            },
+                          ],
+                          {
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                      testID="read-receipt-read"
+                    >
+                      
+                    </Text>
+                  </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: MessageWithReadReceiptLargeFont should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r56:"
+      orderKey=":r51:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r56:"
+        orderKey=":r51:"
       >
         <View
           accessibilityState={
@@ -72325,260 +79946,349 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="I'm fine!"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r56:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  Message was not read"
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="I'm fine!"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r51:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={271}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={272}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
                         >
-                          10:00 AM
-                        </Text>
+                          <Text
+                            allowFontScaling={false}
+                            selectable={false}
+                            style={
+                              [
+                                {
+                                  "color": "#9EA2A8",
+                                  "fontSize": 32.5,
+                                },
+                                [
+                                  {
+                                    "lineHeight": 32.5,
+                                  },
+                                  {
+                                    "marginTop": -5,
+                                    "paddingLeft": 5,
+                                  },
+                                ],
+                                {
+                                  "fontFamily": "custom",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "normal",
+                                },
+                                {},
+                              ]
+                            }
+                            testID="read-receipt-unread"
+                          >
+                            
+                          </Text>
+                        </View>
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -72587,424 +80297,18 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                         }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
+                          testID="message-content-I'm fine!"
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 2,
                               }
                             }
-                            testID="reply-rocket.cat-How are you? :nyan_rocket:"
                           >
-                            <View
+                            <Text
                               style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
-                                }
-                              }
-                            >
-                              <View
-                                style={
-                                  {
-                                    "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
-                                  }
-                                }
-                              >
-                                <View
-                                  style={
-                                    {
-                                      "alignItems": "center",
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "gap": 4,
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    rocket.cat
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
-                                      style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
-                                      }
-                                    >
-                                      <Text
-                                        accessibilityLabel="How are you? "
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        How are you? 
-                                      </Text>
-                                      <View
-                                        style={
-                                          [
-                                            {
-                                              "transform": [
-                                                {
-                                                  "translateY": 3,
-                                                },
-                                              ],
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <ViewManagerAdapter_ExpoImage
-                                          containerViewRef={"[React.ref]"}
-                                          contentFit="contain"
-                                          contentPosition={
-                                            {
-                                              "left": "50%",
-                                              "top": "50%",
-                                            }
-                                          }
-                                          height={15}
-                                          nativeViewRef={"[React.ref]"}
-                                          onError={[Function]}
-                                          onLoad={[Function]}
-                                          onLoadStart={[Function]}
-                                          onProgress={[Function]}
-                                          placeholder={[]}
-                                          source={
-                                            [
-                                              {
-                                                "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                              },
-                                            ]
-                                          }
-                                          style={
-                                            {
-                                              "height": 15,
-                                              "width": 15,
-                                            }
-                                          }
-                                          transition={null}
-                                          width={15}
-                                        />
-                                      </View>
-                                    </Text>
-                                  </Text>
-                                </View>
-                              </View>
-                            </View>
-                          </View>
-                        </View>
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
-                        >
-                          <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
-                              }
-                            }
-                            testID="reply-rocket.cat-How are you? :nyan_rocket:"
-                          >
-                            <View
-                              style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
-                                }
-                              }
-                            >
-                              <View
-                                style={
-                                  {
-                                    "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
-                                  }
-                                }
-                              >
-                                <View
-                                  style={
-                                    {
-                                      "alignItems": "center",
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "gap": 4,
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    rocket.cat
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
-                                      style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
-                                      }
-                                    >
-                                      <Text
-                                        accessibilityLabel="How are you? "
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        How are you? 
-                                      </Text>
-                                      <View
-                                        style={
-                                          [
-                                            {
-                                              "transform": [
-                                                {
-                                                  "translateY": 3,
-                                                },
-                                              ],
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <ViewManagerAdapter_ExpoImage
-                                          containerViewRef={"[React.ref]"}
-                                          contentFit="contain"
-                                          contentPosition={
-                                            {
-                                              "left": "50%",
-                                              "top": "50%",
-                                            }
-                                          }
-                                          height={15}
-                                          nativeViewRef={"[React.ref]"}
-                                          onError={[Function]}
-                                          onLoad={[Function]}
-                                          onLoadStart={[Function]}
-                                          onProgress={[Function]}
-                                          placeholder={[]}
-                                          source={
-                                            [
-                                              {
-                                                "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                              },
-                                            ]
-                                          }
-                                          style={
-                                            {
-                                              "height": 15,
-                                              "width": 15,
-                                            }
-                                          }
-                                          transition={null}
-                                          width={15}
-                                        />
-                                      </View>
-                                    </Text>
-                                  </Text>
-                                </View>
-                              </View>
-                            </View>
-                          </View>
-                          <View
-                            style={
-                              {
-                                "gap": 2,
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                [
+                                [
                                   {
                                     "backgroundColor": "transparent",
                                     "fontFamily": "Inter",
@@ -73031,7 +80335,7 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="Reply attachment can have a description"
+                                  accessibilityLabel="I'm fine!"
                                   style={
                                     [
                                       {
@@ -73045,89 +80349,30 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                                     ]
                                   }
                                 >
-                                  Reply attachment can have a description
+                                  I'm fine!
                                 </Text>
                               </Text>
                             </Text>
                           </View>
                         </View>
                       </View>
-                      <View
-                        testID="message-content-I'm fine!"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="I'm fine!"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                I'm fine!
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r57:"
+      orderKey=":r52:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r57:"
+        orderKey=":r52:"
       >
         <View
           accessibilityState={
@@ -73160,677 +80405,198 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Looks cool!.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Looks cool!"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r57:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  Message was not read"
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="I'm fine!"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r52:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
                       }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
                     }
-                  }
-                >
+                  />
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
                             "gap": 4,
-                            "opacity": 1,
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
+                        <View
+                          testID="message-content-I'm fine!"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Looks cool!"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Looks cool!"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Looks cool!
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "gap": 4,
-                          }
-                        }
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
-                        >
-                          <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
-                              }
-                            }
-                            testID="reply-rocket.cat-"
-                          >
-                            <View
-                              style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
-                                }
-                              }
-                            >
-                              <View
                                 style={
                                   {
-                                    "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
                                   }
                                 }
                               >
-                                <View
-                                  style={
-                                    {
-                                      "alignItems": "center",
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "gap": 4,
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    rocket.cat
-                                  </Text>
-                                </View>
-                                <View
+                                <Text
+                                  accessibilityLabel="I'm fine!"
                                   style={
-                                    {
-                                      "gap": 4,
-                                    }
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
                                   }
                                 >
-                                  <View
-                                    style={
-                                      {
-                                        "gap": 4,
-                                      }
-                                    }
-                                  >
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
-                                    >
-                                      <Text
-                                        style={
-                                          [
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
-                                              "textAlign": "left",
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <Text
-                                          style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
-                                          }
-                                        >
-                                          <Text
-                                            accessibilityLabel="What you think about this one?"
-                                            style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            What you think about this one?
-                                          </Text>
-                                        </Text>
-                                      </Text>
-                                    </View>
-                                    <View
-                                      accessibilityState={
-                                        {
-                                          "busy": undefined,
-                                          "checked": undefined,
-                                          "disabled": undefined,
-                                          "expanded": undefined,
-                                          "selected": undefined,
-                                        }
-                                      }
-                                      accessibilityValue={
-                                        {
-                                          "max": undefined,
-                                          "min": undefined,
-                                          "now": undefined,
-                                          "text": undefined,
-                                        }
-                                      }
-                                      accessible={true}
-                                      collapsable={false}
-                                      focusable={true}
-                                      onClick={[Function]}
-                                      onResponderGrant={[Function]}
-                                      onResponderMove={[Function]}
-                                      onResponderRelease={[Function]}
-                                      onResponderTerminate={[Function]}
-                                      onResponderTerminationRequest={[Function]}
-                                      onStartShouldSetResponder={[Function]}
-                                      style={
-                                        {
-                                          "borderRadius": 4,
-                                          "flexDirection": "column",
-                                          "opacity": 1,
-                                        }
-                                      }
-                                    >
-                                      <View
-                                        onLayout={[Function]}
-                                        style={
-                                          {
-                                            "flex": 1,
-                                          }
-                                        }
-                                      >
-                                        <View
-                                          style={
-                                            [
-                                              {
-                                                "borderRadius": 4,
-                                                "minHeight": 200,
-                                                "overflow": "hidden",
-                                                "width": "100%",
-                                              },
-                                              {
-                                                "borderColor": "#CBCED1",
-                                                "borderRadius": 4,
-                                                "borderWidth": 1,
-                                                "overflow": "hidden",
-                                              },
-                                            ]
-                                          }
-                                        />
-                                        <View
-                                          style={
-                                            [
-                                              [
-                                                {
-                                                  "borderRadius": 4,
-                                                  "minHeight": 200,
-                                                  "overflow": "hidden",
-                                                  "width": "100%",
-                                                },
-                                                {
-                                                  "borderColor": "#CBCED1",
-                                                  "borderRadius": 4,
-                                                  "borderWidth": 1,
-                                                  "overflow": "hidden",
-                                                },
-                                              ],
-                                              {
-                                                "borderWidth": 0,
-                                                "bottom": 0,
-                                                "left": 0,
-                                                "position": "absolute",
-                                                "right": 0,
-                                                "top": 0,
-                                              },
-                                              {
-                                                "backgroundColor": "#E4E7EA",
-                                              },
-                                            ]
-                                          }
-                                        />
-                                        <View
-                                          style={
-                                            [
-                                              [
-                                                {
-                                                  "borderRadius": 4,
-                                                  "minHeight": 200,
-                                                  "overflow": "hidden",
-                                                  "width": "100%",
-                                                },
-                                                {
-                                                  "borderColor": "#CBCED1",
-                                                  "borderRadius": 4,
-                                                  "borderWidth": 1,
-                                                  "overflow": "hidden",
-                                                },
-                                              ],
-                                              {
-                                                "alignItems": "center",
-                                                "justifyContent": "center",
-                                                "position": "absolute",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          <Text
-                                            allowFontScaling={false}
-                                            selectable={false}
-                                            style={
-                                              [
-                                                {
-                                                  "color": "#2F343D",
-                                                  "fontSize": 54,
-                                                },
-                                                [
-                                                  {
-                                                    "lineHeight": 54,
-                                                  },
-                                                  undefined,
-                                                ],
-                                                {
-                                                  "fontFamily": "custom",
-                                                  "fontStyle": "normal",
-                                                  "fontWeight": "normal",
-                                                },
-                                                {},
-                                              ]
-                                            }
-                                          >
-                                            
-                                          </Text>
-                                        </View>
-                                        <View
-                                          style={
-                                            {
-                                              "bottom": 8,
-                                              "flexDirection": "row",
-                                              "gap": 8,
-                                              "position": "absolute",
-                                              "right": 8,
-                                            }
-                                          }
-                                        />
-                                      </View>
-                                    </View>
-                                  </View>
-                                </View>
-                              </View>
-                            </View>
+                                  I'm fine!
+                                </Text>
+                              </Text>
+                            </Text>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#9EA2A8",
+                            "fontSize": 32.5,
+                          },
+                          [
+                            {
+                              "lineHeight": 32.5,
+                            },
+                            {
+                              "marginTop": -5,
+                              "paddingLeft": 5,
+                            },
+                          ],
+                          {
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                      testID="read-receipt-unread"
+                    >
+                      
+                    </Text>
+                  </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r58:"
+      orderKey=":r53:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r58:"
+        orderKey=":r53:"
       >
         <View
           accessibilityState={
@@ -73863,319 +80629,349 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Yes, I am.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Yes, I am"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r58:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  Message was read"
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="I'm fine!"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r53:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={273}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
+                        style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={274}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Yes, I am"
-                      >
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "flexDirection": "row",
                             }
                           }
                         >
                           <Text
+                            allowFontScaling={false}
+                            selectable={false}
                             style={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
+                                  "color": "#095AD2",
+                                  "fontSize": 32.5,
                                 },
+                                [
+                                  {
+                                    "lineHeight": 32.5,
+                                  },
+                                  {
+                                    "marginTop": -5,
+                                    "paddingLeft": 5,
+                                  },
+                                ],
                                 {
-                                  "color": "#2F343D",
+                                  "fontFamily": "custom",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "normal",
                                 },
+                                {},
                               ]
                             }
+                            testID="read-receipt-read"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Yes, I am"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Yes, I am
-                              </Text>
-                            </Text>
+                            
                           </Text>
                         </View>
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -74184,432 +80980,82 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                         }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
+                          testID="message-content-I'm fine!"
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 2,
                               }
                             }
-                            testID="reply-rocket.cat-"
                           >
-                            <View
+                            <Text
                               style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
-                              <View
+                              <Text
                                 style={
                                   {
-                                    "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
                                   }
                                 }
                               >
-                                <View
-                                  style={
-                                    {
-                                      "alignItems": "center",
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "gap": 4,
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    rocket.cat
-                                  </Text>
-                                </View>
-                                <View
+                                <Text
+                                  accessibilityLabel="I'm fine!"
                                   style={
-                                    {
-                                      "gap": 4,
-                                    }
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
                                   }
                                 >
-                                  <View
-                                    style={
-                                      {
-                                        "gap": 4,
-                                      }
-                                    }
-                                  >
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
-                                    >
-                                      <Text
-                                        style={
-                                          [
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
-                                              "textAlign": "left",
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <Text
-                                          style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
-                                          }
-                                        >
-                                          <Text
-                                            accessibilityLabel="Are you seeing this mario "
-                                            style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            Are you seeing this mario 
-                                          </Text>
-                                          <View
-                                            style={
-                                              [
-                                                {
-                                                  "transform": [
-                                                    {
-                                                      "translateY": 3,
-                                                    },
-                                                  ],
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            <ViewManagerAdapter_ExpoImage
-                                              containerViewRef={"[React.ref]"}
-                                              contentFit="contain"
-                                              contentPosition={
-                                                {
-                                                  "left": "50%",
-                                                  "top": "50%",
-                                                }
-                                              }
-                                              height={15}
-                                              nativeViewRef={"[React.ref]"}
-                                              onError={[Function]}
-                                              onLoad={[Function]}
-                                              onLoadStart={[Function]}
-                                              onProgress={[Function]}
-                                              placeholder={[]}
-                                              source={
-                                                [
-                                                  {
-                                                    "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
-                                                  },
-                                                ]
-                                              }
-                                              style={
-                                                {
-                                                  "height": 15,
-                                                  "width": 15,
-                                                }
-                                              }
-                                              transition={null}
-                                              width={15}
-                                            />
-                                          </View>
-                                          <Text
-                                            accessibilityLabel=" ?"
-                                            style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
-                                            }
-                                          >
-                                             ?
-                                          </Text>
-                                        </Text>
-                                      </Text>
-                                    </View>
-                                    <View
-                                      accessibilityState={
-                                        {
-                                          "busy": undefined,
-                                          "checked": undefined,
-                                          "disabled": undefined,
-                                          "expanded": undefined,
-                                          "selected": undefined,
-                                        }
-                                      }
-                                      accessibilityValue={
-                                        {
-                                          "max": undefined,
-                                          "min": undefined,
-                                          "now": undefined,
-                                          "text": undefined,
-                                        }
-                                      }
-                                      accessible={true}
-                                      collapsable={false}
-                                      focusable={true}
-                                      onClick={[Function]}
-                                      onResponderGrant={[Function]}
-                                      onResponderMove={[Function]}
-                                      onResponderRelease={[Function]}
-                                      onResponderTerminate={[Function]}
-                                      onResponderTerminationRequest={[Function]}
-                                      onStartShouldSetResponder={[Function]}
-                                      style={
-                                        {
-                                          "borderRadius": 4,
-                                          "flexDirection": "column",
-                                          "opacity": 1,
-                                        }
-                                      }
-                                    >
-                                      <View
-                                        onLayout={[Function]}
-                                        style={
-                                          {
-                                            "flex": 1,
-                                          }
-                                        }
-                                      >
-                                        <View
-                                          style={
-                                            [
-                                              {
-                                                "borderRadius": 4,
-                                                "minHeight": 200,
-                                                "overflow": "hidden",
-                                                "width": "100%",
-                                              },
-                                              {
-                                                "borderColor": "#CBCED1",
-                                                "borderRadius": 4,
-                                                "borderWidth": 1,
-                                                "overflow": "hidden",
-                                              },
-                                            ]
-                                          }
-                                        />
-                                        <View
-                                          style={
-                                            [
-                                              [
-                                                {
-                                                  "borderRadius": 4,
-                                                  "minHeight": 200,
-                                                  "overflow": "hidden",
-                                                  "width": "100%",
-                                                },
-                                                {
-                                                  "borderColor": "#CBCED1",
-                                                  "borderRadius": 4,
-                                                  "borderWidth": 1,
-                                                  "overflow": "hidden",
-                                                },
-                                              ],
-                                              {
-                                                "borderWidth": 0,
-                                                "bottom": 0,
-                                                "left": 0,
-                                                "position": "absolute",
-                                                "right": 0,
-                                                "top": 0,
-                                              },
-                                              {
-                                                "backgroundColor": "#E4E7EA",
-                                              },
-                                            ]
-                                          }
-                                        />
-                                        <View
-                                          style={
-                                            [
-                                              [
-                                                {
-                                                  "borderRadius": 4,
-                                                  "minHeight": 200,
-                                                  "overflow": "hidden",
-                                                  "width": "100%",
-                                                },
-                                                {
-                                                  "borderColor": "#CBCED1",
-                                                  "borderRadius": 4,
-                                                  "borderWidth": 1,
-                                                  "overflow": "hidden",
-                                                },
-                                              ],
-                                              {
-                                                "alignItems": "center",
-                                                "justifyContent": "center",
-                                                "position": "absolute",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          <Text
-                                            allowFontScaling={false}
-                                            selectable={false}
-                                            style={
-                                              [
-                                                {
-                                                  "color": "#2F343D",
-                                                  "fontSize": 54,
-                                                },
-                                                [
-                                                  {
-                                                    "lineHeight": 54,
-                                                  },
-                                                  undefined,
-                                                ],
-                                                {
-                                                  "fontFamily": "custom",
-                                                  "fontStyle": "normal",
-                                                  "fontWeight": "normal",
-                                                },
-                                                {},
-                                              ]
-                                            }
-                                          >
-                                            
-                                          </Text>
-                                        </View>
-                                        <View
-                                          style={
-                                            {
-                                              "bottom": 8,
-                                              "flexDirection": "row",
-                                              "gap": 8,
-                                              "position": "absolute",
-                                              "right": 8,
-                                            }
-                                          }
-                                        />
-                                      </View>
-                                    </View>
-                                  </View>
-                                </View>
-                              </View>
-                            </View>
+                                  I'm fine!
+                                </Text>
+                              </Text>
+                            </Text>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r59:"
+      orderKey=":r54:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r59:"
+        orderKey=":r54:"
       >
         <View
           accessibilityState={
@@ -74642,257 +81088,73 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Here is the file.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Here is the file"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r59:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  Message was read"
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="I'm fine!"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r54:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
                       }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
                     }
-                  }
-                >
+                  />
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
                         }
                       }
                     >
@@ -74904,228 +81166,133 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                         }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
+                          testID="message-content-I'm fine!"
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 2,
                               }
                             }
-                            testID="reply-rocket.cat-undefined"
                           >
-                            <View
+                            <Text
                               style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
-                              <View
+                              <Text
                                 style={
                                   {
-                                    "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
                                   }
                                 }
                               >
-                                <View
-                                  style={
-                                    {
-                                      "alignItems": "center",
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "gap": 4,
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    rocket.cat
-                                  </Text>
-                                  <Text
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    script.sh
-                                  </Text>
-                                </View>
                                 <Text
-                                  accessibilityLabel="script.sh"
-                                  numberOfLines={0}
+                                  accessibilityLabel="I'm fine!"
                                   style={
                                     [
                                       {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
+                                        "flexShrink": 1,
                                         "fontSize": 16,
-                                        "fontWeight": "400",
                                         "lineHeight": 22,
-                                        "textAlign": "left",
                                       },
                                       {
                                         "color": "#2F343D",
-                                        "lineHeight": undefined,
                                       },
                                     ]
                                   }
-                                  testID="markdown-preview-script.sh"
                                 >
-                                  script.sh
+                                  I'm fine!
                                 </Text>
-                              </View>
-                            </View>
-                          </View>
-                        </View>
-                      </View>
-                      <View
-                        testID="message-content-Here is the file"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Here is the file"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Here is the file
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#095AD2",
+                            "fontSize": 32.5,
+                          },
+                          [
+                            {
+                              "lineHeight": 32.5,
+                            },
+                            {
+                              "marginTop": -5,
+                              "paddingLeft": 5,
+                            },
+                          ],
+                          {
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                      testID="read-receipt-read"
+                    >
+                      
+                    </Text>
+                  </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r5a:"
+      orderKey=":r55:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r5a:"
+        orderKey=":r55:"
       >
         <View
           accessibilityState={
@@ -75158,260 +81325,318 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Got it!.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Got it!"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r5a:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="I'm fine!"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r55:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={275}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={276}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
                       <View
                         style={
                           {
@@ -75427,181 +81652,147 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-rocket.cat-This is a configuration file with **important** settings"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-I'm a very long long title and I'll break-How are you?"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    rocket.cat
-                                  </Text>
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
-                                    config.yaml
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      I'm a very long long title and I'll break
+                                    </Text>
+                                  </View>
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
                                       }
                                     >
-                                      <Text
-                                        accessibilityLabel="This is a configuration file with "
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        This is a configuration file with 
-                                      </Text>
                                       <Text
                                         style={
                                           {
                                             "backgroundColor": "transparent",
+                                            "flexShrink": 1,
                                             "fontFamily": "Inter",
-                                            "fontWeight": "700",
+                                            "fontWeight": "400",
                                             "textAlign": "left",
                                           }
                                         }
                                       >
                                         <Text
-                                          accessibilityLabel="important"
+                                          accessibilityLabel="How are you?"
                                           style={
                                             [
                                               {
@@ -75615,110 +81806,93 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                                             ]
                                           }
                                         >
-                                          important
+                                          How are you?
                                         </Text>
                                       </Text>
-                                      <Text
-                                        accessibilityLabel=" settings"
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                         settings
-                                      </Text>
                                     </Text>
-                                  </Text>
+                                  </View>
                                 </View>
                               </View>
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        testID="message-content-Got it!"
-                      >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-I'm fine!"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Got it!"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Got it!
+                                <Text
+                                  accessibilityLabel="I'm fine!"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  I'm fine!
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r5b:"
+      orderKey=":r56:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r5b:"
+        orderKey=":r56:"
       >
         <View
           accessibilityState={
@@ -75751,260 +81925,318 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Multiple files.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Multiple files"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r5b:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="I'm fine!"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r56:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={277}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
+                        style={
                           {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
                           }
                         }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={278}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
                       <View
                         style={
                           {
@@ -76020,337 +82252,437 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-rocket.cat-undefined"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-How are you? :nyan_rocket:"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={1}
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
-                                    rocket.cat
-                                  </Text>
-                                  <Text
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      rocket.cat
+                                    </Text>
+                                  </View>
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
-                                    index.ts
-                                  </Text>
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      <Text
+                                        style={
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          accessibilityLabel="How are you? "
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          How are you? 
+                                        </Text>
+                                        <View
+                                          style={
+                                            {
+                                              "transform": [
+                                                {
+                                                  "translateY": 3,
+                                                },
+                                              ],
+                                            }
+                                          }
+                                        >
+                                          <ViewManagerAdapter_ExpoImage
+                                            containerViewRef={"[React.ref]"}
+                                            contentFit="contain"
+                                            contentPosition={
+                                              {
+                                                "left": "50%",
+                                                "top": "50%",
+                                              }
+                                            }
+                                            height={15}
+                                            nativeViewRef={"[React.ref]"}
+                                            onError={[Function]}
+                                            onLoad={[Function]}
+                                            onLoadStart={[Function]}
+                                            onProgress={[Function]}
+                                            placeholder={[]}
+                                            source={
+                                              [
+                                                {
+                                                  "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                                },
+                                              ]
+                                            }
+                                            style={
+                                              {
+                                                "height": 15,
+                                                "width": 15,
+                                              }
+                                            }
+                                            transition={null}
+                                            width={15}
+                                          />
+                                        </View>
+                                      </Text>
+                                    </Text>
+                                  </View>
                                 </View>
-                                <Text
-                                  accessibilityLabel="index.ts"
-                                  numberOfLines={0}
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                        "lineHeight": undefined,
-                                      },
-                                    ]
-                                  }
-                                  testID="markdown-preview-index.ts"
-                                >
-                                  index.ts
-                                </Text>
                               </View>
                             </View>
                           </View>
-                        </View>
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
-                        >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-rocket.cat-undefined"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-How are you? :nyan_rocket:"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={1}
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
-                                    rocket.cat
-                                  </Text>
-                                  <Text
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      rocket.cat
+                                    </Text>
+                                  </View>
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
-                                    styles.css
-                                  </Text>
-                                </View>
-                                <Text
-                                  accessibilityLabel="styles.css"
-                                  numberOfLines={0}
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                        "lineHeight": undefined,
-                                      },
-                                    ]
-                                  }
-                                  testID="markdown-preview-styles.css"
-                                >
-                                  styles.css
-                                </Text>
-                              </View>
-                            </View>
-                          </View>
-                        </View>
-                      </View>
-                      <View
-                        testID="message-content-Multiple files"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Multiple files"
-                                style={
-                                  [
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      <Text
+                                        style={
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          accessibilityLabel="How are you? "
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          How are you? 
+                                        </Text>
+                                        <View
+                                          style={
+                                            {
+                                              "transform": [
+                                                {
+                                                  "translateY": 3,
+                                                },
+                                              ],
+                                            }
+                                          }
+                                        >
+                                          <ViewManagerAdapter_ExpoImage
+                                            containerViewRef={"[React.ref]"}
+                                            contentFit="contain"
+                                            contentPosition={
+                                              {
+                                                "left": "50%",
+                                                "top": "50%",
+                                              }
+                                            }
+                                            height={15}
+                                            nativeViewRef={"[React.ref]"}
+                                            onError={[Function]}
+                                            onLoad={[Function]}
+                                            onLoadStart={[Function]}
+                                            onProgress={[Function]}
+                                            placeholder={[]}
+                                            source={
+                                              [
+                                                {
+                                                  "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                                },
+                                              ]
+                                            }
+                                            style={
+                                              {
+                                                "height": 15,
+                                                "width": 15,
+                                              }
+                                            }
+                                            transition={null}
+                                            width={15}
+                                          />
+                                        </View>
+                                      </Text>
+                                    </Text>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "gap": 2,
+                                }
+                              }
+                            >
+                              <Text
+                                style={
+                                  [
                                     {
-                                      "flexShrink": 1,
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
                                       "fontSize": 16,
+                                      "fontWeight": "400",
                                       "lineHeight": 22,
+                                      "textAlign": "left",
                                     },
                                     {
                                       "color": "#2F343D",
@@ -76358,42 +82690,116 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                                   ]
                                 }
                               >
-                                Multiple files
+                                <Text
+                                  style={
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    accessibilityLabel="Reply attachment can have a description"
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Reply attachment can have a description
+                                  </Text>
+                                </Text>
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                        <View
+                          testID="message-content-I'm fine!"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="I'm fine!"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  I'm fine!
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r5c:"
+      orderKey=":r57:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r5c:"
+        orderKey=":r57:"
       >
         <View
           accessibilityState={
@@ -76426,260 +82832,318 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Here is the file.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Here is the file"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r5c:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Looks cool!.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Looks cool!"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r57:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={279}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={280}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
+                        />
+                      </View>
                       <View
                         style={
                           {
@@ -76688,228 +83152,429 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                         }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
+                          testID="message-content-Looks cool!"
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 2,
                               }
                             }
-                            testID="reply-rocket.cat-undefined"
                           >
-                            <View
+                            <Text
                               style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
-                              <View
+                              <Text
                                 style={
                                   {
-                                    "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
                                   }
                                 }
                               >
-                                <View
+                                <Text
+                                  accessibilityLabel="Looks cool!"
                                   style={
-                                    {
-                                      "alignItems": "center",
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "gap": 4,
-                                    }
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    rocket.cat
-                                  </Text>
-                                  <Text
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    script.sh
-                                  </Text>
-                                </View>
-                                <Text
-                                  accessibilityLabel="script.sh"
-                                  numberOfLines={0}
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                        "lineHeight": undefined,
-                                      },
-                                    ]
-                                  }
-                                  testID="markdown-preview-script.sh"
-                                >
-                                  script.sh
+                                  Looks cool!
                                 </Text>
-                              </View>
-                            </View>
+                              </Text>
+                            </Text>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        testID="message-content-Here is the file"
-                      >
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "gap": 4,
                             }
                           }
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 4,
+                              }
                             }
                           >
-                            <Text
-                              style={
+                            <View
+                              accessibilityState={
                                 {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-"
                             >
-                              <Text
-                                accessibilityLabel="Here is the file"
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
+                                  }
                                 }
                               >
-                                Here is the file
-                              </Text>
-                            </Text>
-                          </Text>
+                                <View
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "flexDirection": "column",
+                                      "gap": 4,
+                                      "width": 200,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      rocket.cat
+                                    </Text>
+                                  </View>
+                                  <View
+                                    style={
+                                      {
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        {
+                                          "gap": 4,
+                                        }
+                                      }
+                                    >
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          style={
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            style={
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
+                                            }
+                                          >
+                                            <Text
+                                              accessibilityLabel="What you think about this one?"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              What you think about this one?
+                                            </Text>
+                                          </Text>
+                                        </Text>
+                                      </View>
+                                      <View
+                                        accessibilityState={
+                                          {
+                                            "busy": undefined,
+                                            "checked": undefined,
+                                            "disabled": undefined,
+                                            "expanded": undefined,
+                                            "selected": undefined,
+                                          }
+                                        }
+                                        accessibilityValue={
+                                          {
+                                            "max": undefined,
+                                            "min": undefined,
+                                            "now": undefined,
+                                            "text": undefined,
+                                          }
+                                        }
+                                        accessible={true}
+                                        collapsable={false}
+                                        focusable={true}
+                                        onBlur={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        onResponderGrant={[Function]}
+                                        onResponderMove={[Function]}
+                                        onResponderRelease={[Function]}
+                                        onResponderTerminate={[Function]}
+                                        onResponderTerminationRequest={[Function]}
+                                        onStartShouldSetResponder={[Function]}
+                                        style={
+                                          {
+                                            "borderRadius": 4,
+                                            "flexDirection": "column",
+                                          }
+                                        }
+                                      >
+                                        <View
+                                          onLayout={[Function]}
+                                          style={
+                                            {
+                                              "flex": 1,
+                                            }
+                                          }
+                                        >
+                                          <View
+                                            style={
+                                              [
+                                                {
+                                                  "borderRadius": 4,
+                                                  "minHeight": 200,
+                                                  "overflow": "hidden",
+                                                  "width": "100%",
+                                                },
+                                                {
+                                                  "borderColor": "#CBCED1",
+                                                  "borderRadius": 4,
+                                                  "borderWidth": 1,
+                                                  "overflow": "hidden",
+                                                },
+                                              ]
+                                            }
+                                          />
+                                          <View
+                                            style={
+                                              [
+                                                [
+                                                  {
+                                                    "borderRadius": 4,
+                                                    "minHeight": 200,
+                                                    "overflow": "hidden",
+                                                    "width": "100%",
+                                                  },
+                                                  {
+                                                    "borderColor": "#CBCED1",
+                                                    "borderRadius": 4,
+                                                    "borderWidth": 1,
+                                                    "overflow": "hidden",
+                                                  },
+                                                ],
+                                                {
+                                                  "borderWidth": 0,
+                                                  "bottom": 0,
+                                                  "left": 0,
+                                                  "position": "absolute",
+                                                  "right": 0,
+                                                  "top": 0,
+                                                },
+                                                {
+                                                  "backgroundColor": "#E4E7EA",
+                                                },
+                                              ]
+                                            }
+                                          />
+                                          <View
+                                            style={
+                                              [
+                                                [
+                                                  {
+                                                    "borderRadius": 4,
+                                                    "minHeight": 200,
+                                                    "overflow": "hidden",
+                                                    "width": "100%",
+                                                  },
+                                                  {
+                                                    "borderColor": "#CBCED1",
+                                                    "borderRadius": 4,
+                                                    "borderWidth": 1,
+                                                    "overflow": "hidden",
+                                                  },
+                                                ],
+                                                {
+                                                  "alignItems": "center",
+                                                  "justifyContent": "center",
+                                                  "position": "absolute",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            <Text
+                                              allowFontScaling={false}
+                                              selectable={false}
+                                              style={
+                                                [
+                                                  {
+                                                    "color": "#2F343D",
+                                                    "fontSize": 54,
+                                                  },
+                                                  [
+                                                    {
+                                                      "lineHeight": 54,
+                                                    },
+                                                    undefined,
+                                                  ],
+                                                  {
+                                                    "fontFamily": "custom",
+                                                    "fontStyle": "normal",
+                                                    "fontWeight": "normal",
+                                                  },
+                                                  {},
+                                                ]
+                                              }
+                                            >
+                                              
+                                            </Text>
+                                          </View>
+                                          <View
+                                            style={
+                                              {
+                                                "bottom": 8,
+                                                "flexDirection": "row",
+                                                "gap": 8,
+                                                "position": "absolute",
+                                                "right": 8,
+                                              }
+                                            }
+                                          />
+                                        </View>
+                                      </View>
+                                    </View>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r5d:"
+      orderKey=":r58:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r5d:"
+        orderKey=":r58:"
       >
         <View
           accessibilityState={
@@ -76942,456 +83607,527 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Got it!.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Got it!"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r5d:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Yes, I am.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Yes, I am"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r58:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={281}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={282}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        style={
-                          {
-                            "gap": 4,
-                          }
-                        }
-                      >
-                        <View
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
                           style={
                             {
-                              "gap": 4,
+                              "flexDirection": "row",
                             }
                           }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Yes, I am"
                         >
                           <View
-                            accessibilityState={
+                            style={
                               {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
+                                "gap": 2,
                               }
                             }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Yes, I am"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Yes, I am
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "gap": 4,
                             }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
+                          }
+                        >
+                          <View
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-rocket.cat-This is a configuration file with **important** settings"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    rocket.cat
-                                  </Text>
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
-                                    config.yaml
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      rocket.cat
+                                    </Text>
+                                  </View>
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 4,
+                                      }
                                     }
                                   >
-                                    <Text
+                                    <View
                                       style={
                                         {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
+                                          "gap": 4,
                                         }
                                       }
                                     >
-                                      <Text
-                                        accessibilityLabel="This is a configuration file with "
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        This is a configuration file with 
-                                      </Text>
-                                      <Text
+                                      <View
                                         style={
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontWeight": "700",
-                                            "textAlign": "left",
+                                            "gap": 2,
                                           }
                                         }
                                       >
                                         <Text
-                                          accessibilityLabel="important"
                                           style={
                                             [
                                               {
-                                                "flexShrink": 1,
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
                                                 "fontSize": 16,
+                                                "fontWeight": "400",
                                                 "lineHeight": 22,
+                                                "textAlign": "left",
                                               },
                                               {
                                                 "color": "#2F343D",
@@ -77399,110 +84135,295 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                             ]
                                           }
                                         >
-                                          important
+                                          <Text
+                                            style={
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
+                                            }
+                                          >
+                                            <Text
+                                              accessibilityLabel="Are you seeing this mario "
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Are you seeing this mario 
+                                            </Text>
+                                            <View
+                                              style={
+                                                {
+                                                  "transform": [
+                                                    {
+                                                      "translateY": 3,
+                                                    },
+                                                  ],
+                                                }
+                                              }
+                                            >
+                                              <ViewManagerAdapter_ExpoImage
+                                                containerViewRef={"[React.ref]"}
+                                                contentFit="contain"
+                                                contentPosition={
+                                                  {
+                                                    "left": "50%",
+                                                    "top": "50%",
+                                                  }
+                                                }
+                                                height={15}
+                                                nativeViewRef={"[React.ref]"}
+                                                onError={[Function]}
+                                                onLoad={[Function]}
+                                                onLoadStart={[Function]}
+                                                onProgress={[Function]}
+                                                placeholder={[]}
+                                                source={
+                                                  [
+                                                    {
+                                                      "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
+                                                    },
+                                                  ]
+                                                }
+                                                style={
+                                                  {
+                                                    "height": 15,
+                                                    "width": 15,
+                                                  }
+                                                }
+                                                transition={null}
+                                                width={15}
+                                              />
+                                            </View>
+                                            <Text
+                                              accessibilityLabel=" ?"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                               ?
+                                            </Text>
+                                          </Text>
                                         </Text>
-                                      </Text>
-                                      <Text
-                                        accessibilityLabel=" settings"
+                                      </View>
+                                      <View
+                                        accessibilityState={
+                                          {
+                                            "busy": undefined,
+                                            "checked": undefined,
+                                            "disabled": undefined,
+                                            "expanded": undefined,
+                                            "selected": undefined,
+                                          }
+                                        }
+                                        accessibilityValue={
+                                          {
+                                            "max": undefined,
+                                            "min": undefined,
+                                            "now": undefined,
+                                            "text": undefined,
+                                          }
+                                        }
+                                        accessible={true}
+                                        collapsable={false}
+                                        focusable={true}
+                                        onBlur={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        onResponderGrant={[Function]}
+                                        onResponderMove={[Function]}
+                                        onResponderRelease={[Function]}
+                                        onResponderTerminate={[Function]}
+                                        onResponderTerminationRequest={[Function]}
+                                        onStartShouldSetResponder={[Function]}
                                         style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
+                                          {
+                                            "borderRadius": 4,
+                                            "flexDirection": "column",
+                                          }
                                         }
                                       >
-                                         settings
-                                      </Text>
-                                    </Text>
-                                  </Text>
+                                        <View
+                                          onLayout={[Function]}
+                                          style={
+                                            {
+                                              "flex": 1,
+                                            }
+                                          }
+                                        >
+                                          <View
+                                            style={
+                                              [
+                                                {
+                                                  "borderRadius": 4,
+                                                  "minHeight": 200,
+                                                  "overflow": "hidden",
+                                                  "width": "100%",
+                                                },
+                                                {
+                                                  "borderColor": "#CBCED1",
+                                                  "borderRadius": 4,
+                                                  "borderWidth": 1,
+                                                  "overflow": "hidden",
+                                                },
+                                              ]
+                                            }
+                                          />
+                                          <View
+                                            style={
+                                              [
+                                                [
+                                                  {
+                                                    "borderRadius": 4,
+                                                    "minHeight": 200,
+                                                    "overflow": "hidden",
+                                                    "width": "100%",
+                                                  },
+                                                  {
+                                                    "borderColor": "#CBCED1",
+                                                    "borderRadius": 4,
+                                                    "borderWidth": 1,
+                                                    "overflow": "hidden",
+                                                  },
+                                                ],
+                                                {
+                                                  "borderWidth": 0,
+                                                  "bottom": 0,
+                                                  "left": 0,
+                                                  "position": "absolute",
+                                                  "right": 0,
+                                                  "top": 0,
+                                                },
+                                                {
+                                                  "backgroundColor": "#E4E7EA",
+                                                },
+                                              ]
+                                            }
+                                          />
+                                          <View
+                                            style={
+                                              [
+                                                [
+                                                  {
+                                                    "borderRadius": 4,
+                                                    "minHeight": 200,
+                                                    "overflow": "hidden",
+                                                    "width": "100%",
+                                                  },
+                                                  {
+                                                    "borderColor": "#CBCED1",
+                                                    "borderRadius": 4,
+                                                    "borderWidth": 1,
+                                                    "overflow": "hidden",
+                                                  },
+                                                ],
+                                                {
+                                                  "alignItems": "center",
+                                                  "justifyContent": "center",
+                                                  "position": "absolute",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            <Text
+                                              allowFontScaling={false}
+                                              selectable={false}
+                                              style={
+                                                [
+                                                  {
+                                                    "color": "#2F343D",
+                                                    "fontSize": 54,
+                                                  },
+                                                  [
+                                                    {
+                                                      "lineHeight": 54,
+                                                    },
+                                                    undefined,
+                                                  ],
+                                                  {
+                                                    "fontFamily": "custom",
+                                                    "fontStyle": "normal",
+                                                    "fontWeight": "normal",
+                                                  },
+                                                  {},
+                                                ]
+                                              }
+                                            >
+                                              
+                                            </Text>
+                                          </View>
+                                          <View
+                                            style={
+                                              {
+                                                "bottom": 8,
+                                                "flexDirection": "row",
+                                                "gap": 8,
+                                                "position": "absolute",
+                                                "right": 8,
+                                              }
+                                            }
+                                          />
+                                        </View>
+                                      </View>
+                                    </View>
+                                  </View>
                                 </View>
                               </View>
                             </View>
                           </View>
                         </View>
                       </View>
-                      <View
-                        testID="message-content-Got it!"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Got it!"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Got it!
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r5e:"
+      orderKey=":r59:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r5e:"
+        orderKey=":r59:"
       >
         <View
           accessibilityState={
@@ -77535,260 +84456,318 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Multiple files.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Multiple files"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r5e:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Here is the file.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Here is the file"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r59:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={283}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={284}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
+                        />
+                      </View>
                       <View
                         style={
                           {
@@ -77804,380 +84783,234 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-rocket.cat-undefined"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-undefined"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={1}
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
-                                    rocket.cat
-                                  </Text>
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      rocket.cat
+                                    </Text>
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      script.sh
+                                    </Text>
+                                  </View>
                                   <Text
+                                    accessibilityLabel="script.sh"
+                                    numberOfLines={0}
                                     style={
                                       [
                                         {
                                           "backgroundColor": "transparent",
-                                          "flex": 1,
                                           "fontFamily": "Inter",
                                           "fontSize": 16,
-                                          "fontWeight": "500",
+                                          "fontWeight": "400",
+                                          "lineHeight": 22,
                                           "textAlign": "left",
                                         },
                                         {
                                           "color": "#2F343D",
+                                          "lineHeight": undefined,
                                         },
                                       ]
                                     }
+                                    testID="markdown-preview-script.sh"
                                   >
-                                    index.ts
+                                    script.sh
                                   </Text>
                                 </View>
-                                <Text
-                                  accessibilityLabel="index.ts"
-                                  numberOfLines={0}
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                        "lineHeight": undefined,
-                                      },
-                                    ]
-                                  }
-                                  testID="markdown-preview-index.ts"
-                                >
-                                  index.ts
-                                </Text>
                               </View>
                             </View>
                           </View>
                         </View>
                         <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
+                          testID="message-content-Here is the file"
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 2,
                               }
                             }
-                            testID="reply-rocket.cat-undefined"
                           >
-                            <View
+                            <Text
                               style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
-                              <View
+                              <Text
                                 style={
                                   {
-                                    "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
                                   }
                                 }
                               >
-                                <View
-                                  style={
-                                    {
-                                      "alignItems": "center",
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "gap": 4,
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    rocket.cat
-                                  </Text>
-                                  <Text
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    styles.css
-                                  </Text>
-                                </View>
                                 <Text
-                                  accessibilityLabel="styles.css"
-                                  numberOfLines={0}
+                                  accessibilityLabel="Here is the file"
                                   style={
                                     [
                                       {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
+                                        "flexShrink": 1,
                                         "fontSize": 16,
-                                        "fontWeight": "400",
                                         "lineHeight": 22,
-                                        "textAlign": "left",
                                       },
                                       {
                                         "color": "#2F343D",
-                                        "lineHeight": undefined,
                                       },
                                     ]
                                   }
-                                  testID="markdown-preview-styles.css"
                                 >
-                                  styles.css
+                                  Here is the file
                                 </Text>
-                              </View>
-                            </View>
-                          </View>
-                        </View>
-                      </View>
-                      <View
-                        testID="message-content-Multiple files"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Multiple files"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Multiple files
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r5f:"
+      orderKey=":r5a:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r5f:"
+        orderKey=":r5a:"
       >
         <View
           accessibilityState={
@@ -78210,260 +85043,318 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="I'm fine!"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r5f:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Got it!.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Got it!"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r5a:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={285}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={286}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
+                        />
+                      </View>
                       <View
                         style={
                           {
@@ -78479,234 +85370,311 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-I'm a very long long title and I'll break-How are you?"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-This is a configuration file with **important** settings"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={1}
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
-                                    I'm a very long long title and I'll break
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      rocket.cat
+                                    </Text>
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      config.yaml
+                                    </Text>
+                                  </View>
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
-                                        accessibilityLabel="How are you?"
                                         style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
                                         }
                                       >
-                                        How are you?
-                                      </Text>
-                                    </Text>
-                                  </Text>
-                                </View>
-                              </View>
-                            </View>
-                          </View>
-                        </View>
-                      </View>
-                      <View
-                        testID="message-content-I'm fine!"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                                        <Text
+                                          accessibilityLabel="This is a configuration file with "
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          This is a configuration file with 
+                                        </Text>
+                                        <Text
+                                          style={
+                                            {
+                                              "backgroundColor": "transparent",
+                                              "fontFamily": "Inter",
+                                              "fontWeight": "700",
+                                              "textAlign": "left",
+                                            }
+                                          }
+                                        >
+                                          <Text
+                                            accessibilityLabel="important"
+                                            style={
+                                              [
+                                                {
+                                                  "flexShrink": 1,
+                                                  "fontSize": 16,
+                                                  "lineHeight": 22,
+                                                },
+                                                {
+                                                  "color": "#2F343D",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            important
+                                          </Text>
+                                        </Text>
+                                        <Text
+                                          accessibilityLabel=" settings"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                           settings
+                                        </Text>
+                                      </Text>
+                                    </Text>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                        <View
+                          testID="message-content-Got it!"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="I'm fine!"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                I'm fine!
+                                <Text
+                                  accessibilityLabel="Got it!"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Got it!
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r5g:"
+      orderKey=":r5b:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r5g:"
+        orderKey=":r5b:"
       >
         <View
           accessibilityState={
@@ -78739,260 +85707,318 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="I'm fine!"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r5g:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Multiple files.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Multiple files"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r5b:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={287}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={288}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
+                        />
+                      </View>
                       <View
                         style={
                           {
@@ -79008,106 +86034,132 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-rocket.cat-How are you? :nyan_rocket:"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
                                 }
                               }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-undefined"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={1}
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
-                                    rocket.cat
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      rocket.cat
+                                    </Text>
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      index.ts
+                                    </Text>
+                                  </View>
                                   <Text
+                                    accessibilityLabel="index.ts"
+                                    numberOfLines={0}
                                     style={
                                       [
                                         {
@@ -79120,168 +86172,260 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                                         },
                                         {
                                           "color": "#2F343D",
+                                          "lineHeight": undefined,
                                         },
                                       ]
                                     }
+                                    testID="markdown-preview-index.ts"
                                   >
-                                    <Text
-                                      style={
-                                        {
+                                    index.ts
+                                  </Text>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View
+                            style={
+                              {
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-undefined"
+                            >
+                              <View
+                                style={
+                                  {
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "flexDirection": "column",
+                                      "gap": 4,
+                                      "width": 200,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      rocket.cat
+                                    </Text>
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      styles.css
+                                    </Text>
+                                  </View>
+                                  <Text
+                                    accessibilityLabel="styles.css"
+                                    numberOfLines={0}
+                                    style={
+                                      [
+                                        {
                                           "backgroundColor": "transparent",
-                                          "flexShrink": 1,
                                           "fontFamily": "Inter",
+                                          "fontSize": 16,
                                           "fontWeight": "400",
+                                          "lineHeight": 22,
                                           "textAlign": "left",
-                                        }
-                                      }
-                                    >
-                                      <Text
-                                        accessibilityLabel="How are you? "
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        How are you? 
-                                      </Text>
-                                      <View
-                                        style={
-                                          [
-                                            {
-                                              "transform": [
-                                                {
-                                                  "translateY": 3,
-                                                },
-                                              ],
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <ViewManagerAdapter_ExpoImage
-                                          containerViewRef={"[React.ref]"}
-                                          contentFit="contain"
-                                          contentPosition={
-                                            {
-                                              "left": "50%",
-                                              "top": "50%",
-                                            }
-                                          }
-                                          height={15}
-                                          nativeViewRef={"[React.ref]"}
-                                          onError={[Function]}
-                                          onLoad={[Function]}
-                                          onLoadStart={[Function]}
-                                          onProgress={[Function]}
-                                          placeholder={[]}
-                                          source={
-                                            [
-                                              {
-                                                "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                              },
-                                            ]
-                                          }
-                                          style={
-                                            {
-                                              "height": 15,
-                                              "width": 15,
-                                            }
-                                          }
-                                          transition={null}
-                                          width={15}
-                                        />
-                                      </View>
-                                    </Text>
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                          "lineHeight": undefined,
+                                        },
+                                      ]
+                                    }
+                                    testID="markdown-preview-styles.css"
+                                  >
+                                    styles.css
                                   </Text>
                                 </View>
                               </View>
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        testID="message-content-I'm fine!"
-                      >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Multiple files"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="I'm fine!"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                I'm fine!
+                                <Text
+                                  accessibilityLabel="Multiple files"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Multiple files
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r5h:"
+      orderKey=":r5c:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r5h:"
+        orderKey=":r5c:"
       >
         <View
           accessibilityState={
@@ -79314,677 +86458,561 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Looks cool!.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Looks cool!"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r5h:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Here is the file.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Here is the file"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r5c:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={289}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={290}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Looks cool!"
                       >
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "gap": 4,
                             }
                           }
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 4,
+                              }
                             }
                           >
-                            <Text
-                              style={
+                            <View
+                              accessibilityState={
                                 {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
                                 }
                               }
-                            >
-                              <Text
-                                accessibilityLabel="Looks cool!"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
-                              >
-                                Looks cool!
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "gap": 4,
-                          }
-                        }
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
-                        >
-                          <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
                               }
-                            }
-                            testID="reply-rocket.cat-"
-                          >
-                            <View
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
                               style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
-                                }
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
                               }
+                              testID="reply-rocket.cat-undefined"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      rocket.cat
+                                    </Text>
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      script.sh
+                                    </Text>
+                                  </View>
                                   <Text
-                                    numberOfLines={1}
+                                    accessibilityLabel="script.sh"
+                                    numberOfLines={0}
                                     style={
                                       [
                                         {
                                           "backgroundColor": "transparent",
-                                          "flexShrink": 1,
                                           "fontFamily": "Inter",
                                           "fontSize": 16,
-                                          "fontWeight": "500",
+                                          "fontWeight": "400",
+                                          "lineHeight": 22,
                                           "textAlign": "left",
                                         },
                                         {
-                                          "color": "#6C727A",
+                                          "color": "#2F343D",
+                                          "lineHeight": undefined,
                                         },
                                       ]
                                     }
+                                    testID="markdown-preview-script.sh"
                                   >
-                                    rocket.cat
+                                    script.sh
                                   </Text>
                                 </View>
-                                <View
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                        <View
+                          testID="message-content-Here is the file"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Here is the file"
                                   style={
-                                    {
-                                      "gap": 4,
-                                    }
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
                                   }
                                 >
-                                  <View
-                                    style={
-                                      {
-                                        "gap": 4,
-                                      }
-                                    }
-                                  >
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
-                                    >
-                                      <Text
-                                        style={
-                                          [
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
-                                              "textAlign": "left",
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <Text
-                                          style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
-                                          }
-                                        >
-                                          <Text
-                                            accessibilityLabel="What you think about this one?"
-                                            style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            What you think about this one?
-                                          </Text>
-                                        </Text>
-                                      </Text>
-                                    </View>
-                                    <View
-                                      accessibilityState={
-                                        {
-                                          "busy": undefined,
-                                          "checked": undefined,
-                                          "disabled": undefined,
-                                          "expanded": undefined,
-                                          "selected": undefined,
-                                        }
-                                      }
-                                      accessibilityValue={
-                                        {
-                                          "max": undefined,
-                                          "min": undefined,
-                                          "now": undefined,
-                                          "text": undefined,
-                                        }
-                                      }
-                                      accessible={true}
-                                      collapsable={false}
-                                      focusable={true}
-                                      onClick={[Function]}
-                                      onResponderGrant={[Function]}
-                                      onResponderMove={[Function]}
-                                      onResponderRelease={[Function]}
-                                      onResponderTerminate={[Function]}
-                                      onResponderTerminationRequest={[Function]}
-                                      onStartShouldSetResponder={[Function]}
-                                      style={
-                                        {
-                                          "borderRadius": 4,
-                                          "flexDirection": "column",
-                                          "opacity": 1,
-                                        }
-                                      }
-                                    >
-                                      <View
-                                        onLayout={[Function]}
-                                        style={
-                                          {
-                                            "flex": 1,
-                                          }
-                                        }
-                                      >
-                                        <View
-                                          style={
-                                            [
-                                              {
-                                                "borderRadius": 4,
-                                                "minHeight": 200,
-                                                "overflow": "hidden",
-                                                "width": "100%",
-                                              },
-                                              {
-                                                "borderColor": "#CBCED1",
-                                                "borderRadius": 4,
-                                                "borderWidth": 1,
-                                                "overflow": "hidden",
-                                              },
-                                            ]
-                                          }
-                                        />
-                                        <View
-                                          style={
-                                            [
-                                              [
-                                                {
-                                                  "borderRadius": 4,
-                                                  "minHeight": 200,
-                                                  "overflow": "hidden",
-                                                  "width": "100%",
-                                                },
-                                                {
-                                                  "borderColor": "#CBCED1",
-                                                  "borderRadius": 4,
-                                                  "borderWidth": 1,
-                                                  "overflow": "hidden",
-                                                },
-                                              ],
-                                              {
-                                                "borderWidth": 0,
-                                                "bottom": 0,
-                                                "left": 0,
-                                                "position": "absolute",
-                                                "right": 0,
-                                                "top": 0,
-                                              },
-                                              {
-                                                "backgroundColor": "#E4E7EA",
-                                              },
-                                            ]
-                                          }
-                                        />
-                                        <View
-                                          style={
-                                            [
-                                              [
-                                                {
-                                                  "borderRadius": 4,
-                                                  "minHeight": 200,
-                                                  "overflow": "hidden",
-                                                  "width": "100%",
-                                                },
-                                                {
-                                                  "borderColor": "#CBCED1",
-                                                  "borderRadius": 4,
-                                                  "borderWidth": 1,
-                                                  "overflow": "hidden",
-                                                },
-                                              ],
-                                              {
-                                                "alignItems": "center",
-                                                "justifyContent": "center",
-                                                "position": "absolute",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          <Text
-                                            allowFontScaling={false}
-                                            selectable={false}
-                                            style={
-                                              [
-                                                {
-                                                  "color": "#2F343D",
-                                                  "fontSize": 70.2,
-                                                },
-                                                [
-                                                  {
-                                                    "lineHeight": 70.2,
-                                                  },
-                                                  undefined,
-                                                ],
-                                                {
-                                                  "fontFamily": "custom",
-                                                  "fontStyle": "normal",
-                                                  "fontWeight": "normal",
-                                                },
-                                                {},
-                                              ]
-                                            }
-                                          >
-                                            
-                                          </Text>
-                                        </View>
-                                        <View
-                                          style={
-                                            {
-                                              "bottom": 8,
-                                              "flexDirection": "row",
-                                              "gap": 8,
-                                              "position": "absolute",
-                                              "right": 8,
-                                            }
-                                          }
-                                        />
-                                      </View>
-                                    </View>
-                                  </View>
-                                </View>
-                              </View>
-                            </View>
+                                  Here is the file
+                                </Text>
+                              </Text>
+                            </Text>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r5i:"
+      orderKey=":r5d:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r5i:"
+        orderKey=":r5d:"
       >
         <View
           accessibilityState={
@@ -80017,319 +87045,318 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Yes, I am.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Yes, I am"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r5i:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Got it!.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Got it!"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r5d:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={291}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={292}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Yes, I am"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
-                          <Text
+                          />
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
                           >
                             <Text
+                              numberOfLines={1}
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
                               }
                             >
-                              <Text
-                                accessibilityLabel="Yes, I am"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Yes, I am
-                              </Text>
+                              diego.mello
                             </Text>
-                          </Text>
-                        </View>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -80345,212 +87372,193 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-rocket.cat-"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-This is a configuration file with **important** settings"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={1}
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
-                                    rocket.cat
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 4,
-                                    }
-                                  }
-                                >
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      rocket.cat
+                                    </Text>
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      config.yaml
+                                    </Text>
+                                  </View>
                                   <View
                                     style={
                                       {
-                                        "gap": 4,
+                                        "gap": 2,
                                       }
                                     }
                                   >
-                                    <View
+                                    <Text
                                       style={
-                                        {
-                                          "gap": 2,
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
                                         style={
-                                          [
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
-                                              "textAlign": "left",
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
                                         }
                                       >
+                                        <Text
+                                          accessibilityLabel="This is a configuration file with "
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          This is a configuration file with 
+                                        </Text>
                                         <Text
                                           style={
                                             {
                                               "backgroundColor": "transparent",
-                                              "flexShrink": 1,
                                               "fontFamily": "Inter",
-                                              "fontWeight": "400",
+                                              "fontWeight": "700",
                                               "textAlign": "left",
                                             }
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Are you seeing this mario "
-                                            style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            Are you seeing this mario 
-                                          </Text>
-                                          <View
-                                            style={
-                                              [
-                                                {
-                                                  "transform": [
-                                                    {
-                                                      "translateY": 3,
-                                                    },
-                                                  ],
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            <ViewManagerAdapter_ExpoImage
-                                              containerViewRef={"[React.ref]"}
-                                              contentFit="contain"
-                                              contentPosition={
-                                                {
-                                                  "left": "50%",
-                                                  "top": "50%",
-                                                }
-                                              }
-                                              height={15}
-                                              nativeViewRef={"[React.ref]"}
-                                              onError={[Function]}
-                                              onLoad={[Function]}
-                                              onLoadStart={[Function]}
-                                              onProgress={[Function]}
-                                              placeholder={[]}
-                                              source={
-                                                [
-                                                  {
-                                                    "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
-                                                  },
-                                                ]
-                                              }
-                                              style={
-                                                {
-                                                  "height": 15,
-                                                  "width": 15,
-                                                }
-                                              }
-                                              transition={null}
-                                              width={15}
-                                            />
-                                          </View>
-                                          <Text
-                                            accessibilityLabel=" ?"
+                                            accessibilityLabel="important"
                                             style={
                                               [
                                                 {
@@ -80564,221 +87572,126 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                                               ]
                                             }
                                           >
-                                             ?
+                                            important
                                           </Text>
                                         </Text>
-                                      </Text>
-                                    </View>
-                                    <View
-                                      accessibilityState={
-                                        {
-                                          "busy": undefined,
-                                          "checked": undefined,
-                                          "disabled": undefined,
-                                          "expanded": undefined,
-                                          "selected": undefined,
-                                        }
-                                      }
-                                      accessibilityValue={
-                                        {
-                                          "max": undefined,
-                                          "min": undefined,
-                                          "now": undefined,
-                                          "text": undefined,
-                                        }
-                                      }
-                                      accessible={true}
-                                      collapsable={false}
-                                      focusable={true}
-                                      onClick={[Function]}
-                                      onResponderGrant={[Function]}
-                                      onResponderMove={[Function]}
-                                      onResponderRelease={[Function]}
-                                      onResponderTerminate={[Function]}
-                                      onResponderTerminationRequest={[Function]}
-                                      onStartShouldSetResponder={[Function]}
-                                      style={
-                                        {
-                                          "borderRadius": 4,
-                                          "flexDirection": "column",
-                                          "opacity": 1,
-                                        }
-                                      }
-                                    >
-                                      <View
-                                        onLayout={[Function]}
-                                        style={
-                                          {
-                                            "flex": 1,
-                                          }
-                                        }
-                                      >
-                                        <View
-                                          style={
-                                            [
-                                              {
-                                                "borderRadius": 4,
-                                                "minHeight": 200,
-                                                "overflow": "hidden",
-                                                "width": "100%",
-                                              },
-                                              {
-                                                "borderColor": "#CBCED1",
-                                                "borderRadius": 4,
-                                                "borderWidth": 1,
-                                                "overflow": "hidden",
-                                              },
-                                            ]
-                                          }
-                                        />
-                                        <View
+                                        <Text
+                                          accessibilityLabel=" settings"
                                           style={
                                             [
-                                              [
-                                                {
-                                                  "borderRadius": 4,
-                                                  "minHeight": 200,
-                                                  "overflow": "hidden",
-                                                  "width": "100%",
-                                                },
-                                                {
-                                                  "borderColor": "#CBCED1",
-                                                  "borderRadius": 4,
-                                                  "borderWidth": 1,
-                                                  "overflow": "hidden",
-                                                },
-                                              ],
-                                              {
-                                                "borderWidth": 0,
-                                                "bottom": 0,
-                                                "left": 0,
-                                                "position": "absolute",
-                                                "right": 0,
-                                                "top": 0,
-                                              },
                                               {
-                                                "backgroundColor": "#E4E7EA",
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
                                               },
-                                            ]
-                                          }
-                                        />
-                                        <View
-                                          style={
-                                            [
-                                              [
-                                                {
-                                                  "borderRadius": 4,
-                                                  "minHeight": 200,
-                                                  "overflow": "hidden",
-                                                  "width": "100%",
-                                                },
-                                                {
-                                                  "borderColor": "#CBCED1",
-                                                  "borderRadius": 4,
-                                                  "borderWidth": 1,
-                                                  "overflow": "hidden",
-                                                },
-                                              ],
                                               {
-                                                "alignItems": "center",
-                                                "justifyContent": "center",
-                                                "position": "absolute",
+                                                "color": "#2F343D",
                                               },
                                             ]
                                           }
                                         >
-                                          <Text
-                                            allowFontScaling={false}
-                                            selectable={false}
-                                            style={
-                                              [
-                                                {
-                                                  "color": "#2F343D",
-                                                  "fontSize": 70.2,
-                                                },
-                                                [
-                                                  {
-                                                    "lineHeight": 70.2,
-                                                  },
-                                                  undefined,
-                                                ],
-                                                {
-                                                  "fontFamily": "custom",
-                                                  "fontStyle": "normal",
-                                                  "fontWeight": "normal",
-                                                },
-                                                {},
-                                              ]
-                                            }
-                                          >
-                                            
-                                          </Text>
-                                        </View>
-                                        <View
-                                          style={
-                                            {
-                                              "bottom": 8,
-                                              "flexDirection": "row",
-                                              "gap": 8,
-                                              "position": "absolute",
-                                              "right": 8,
-                                            }
-                                          }
-                                        />
-                                      </View>
-                                    </View>
+                                           settings
+                                        </Text>
+                                      </Text>
+                                    </Text>
                                   </View>
                                 </View>
                               </View>
                             </View>
                           </View>
                         </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
-    <A11yOrderView
-      orderKey=":r5j:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r5j:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
+                        <View
+                          testID="message-content-Got it!"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Got it!"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Got it!
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r5e:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r5e:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
               "now": undefined,
               "text": undefined,
             }
@@ -80796,532 +87709,496 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  How are you?.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="How are you?"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r5j:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Multiple files.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Multiple files"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r5e:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={293}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={294}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-How are you?"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
-                          <Text
+                          />
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
                           >
                             <Text
+                              numberOfLines={1}
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
                               }
                             >
-                              <Text
-                                accessibilityLabel="How are you?"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                How are you?
-                              </Text>
+                              diego.mello
                             </Text>
-                          </Text>
-                        </View>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "alignItems": "center",
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
                       >
                         <View
                           style={
-                            [
-                              {
-                                "alignItems": "center",
-                                "borderRadius": 4,
-                                "flexDirection": "row",
-                                "justifyContent": "center",
-                                "paddingHorizontal": 12,
-                                "paddingVertical": 8,
-                              },
-                              {
-                                "backgroundColor": "#1D74F5",
-                              },
-                            ]
-                          }
-                          testID="message-thread-button-How are you?"
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 12,
-                                  "fontWeight": "600",
-                                  "lineHeight": 16,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#FFFFFF",
-                                },
-                              ]
+                            {
+                              "gap": 4,
                             }
-                          >
-                            View thread
-                          </Text>
-                        </View>
-                        <View
-                          style={
-                            [
-                              {
-                                "alignItems": "center",
-                                "flex": 1,
-                                "flexDirection": "row",
-                              },
-                              {
-                                "flex": 1,
-                                "marginLeft": 12,
-                              },
-                            ]
                           }
                         >
                           <View
                             style={
                               {
-                                "flex": 1,
-                                "flexDirection": "row",
+                                "gap": 4,
                               }
                             }
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "alignItems": "center",
-                                  "flexDirection": "row",
-                                  "marginRight": 8,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
                                 }
                               }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
-                                style={
-                                  [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 24,
-                                    },
-                                    [
-                                      {
-                                        "lineHeight": 24,
-                                      },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
-                                }
-                              >
-                                
-                              </Text>
-                              <Text
-                                numberOfLines={1}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 10,
-                                      "fontWeight": "600",
-                                      "marginLeft": 2,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#6C727A",
-                                    },
-                                  ]
-                                }
-                                testID="thread-count-1"
-                              >
-                                1
-                              </Text>
-                            </View>
-                            <View
-                              style={
+                              accessibilityValue={
                                 {
-                                  "alignItems": "center",
-                                  "flexDirection": "row",
-                                  "marginRight": 8,
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-undefined"
                             >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 24,
-                                    },
-                                    [
-                                      {
-                                        "lineHeight": 24,
-                                      },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
+                                  {
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
+                                  }
                                 }
                               >
-                                
-                              </Text>
-                              <Text
-                                numberOfLines={1}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 10,
-                                      "fontWeight": "600",
-                                      "marginLeft": 2,
-                                      "textAlign": "left",
-                                    },
+                                <View
+                                  style={
                                     {
-                                      "color": "#6C727A",
-                                    },
-                                  ]
-                                }
-                              >
-                                0
-                              </Text>
+                                      "flex": 1,
+                                      "flexDirection": "column",
+                                      "gap": 4,
+                                      "width": 200,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      rocket.cat
+                                    </Text>
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      index.ts
+                                    </Text>
+                                  </View>
+                                  <Text
+                                    accessibilityLabel="index.ts"
+                                    numberOfLines={0}
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 16,
+                                          "fontWeight": "400",
+                                          "lineHeight": 22,
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                          "lineHeight": undefined,
+                                        },
+                                      ]
+                                    }
+                                    testID="markdown-preview-index.ts"
+                                  >
+                                    index.ts
+                                  </Text>
+                                </View>
+                              </View>
                             </View>
                           </View>
                           <View
                             style={
                               {
-                                "alignItems": "center",
-                                "flexDirection": "row",
+                                "gap": 4,
                               }
                             }
                           >
                             <View
-                              style={
-                                [
-                                  {
-                                    "borderRadius": 4,
-                                    "height": 8,
-                                    "marginRight": 8,
-                                    "width": 8,
-                                  },
-                                  {
-                                    "backgroundColor": "#6C727A",
-                                  },
-                                ]
-                              }
-                            />
-                            <View
-                              accessibilityLabel="Follow thread"
                               accessibilityState={
                                 {
                                   "busy": undefined,
                                   "checked": undefined,
-                                  "disabled": undefined,
+                                  "disabled": false,
                                   "expanded": undefined,
                                   "selected": undefined,
                                 }
@@ -81337,7 +88214,9 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                               accessible={true}
                               collapsable={false}
                               focusable={true}
+                              onBlur={[Function]}
                               onClick={[Function]}
+                              onFocus={[Function]}
                               onResponderGrant={[Function]}
                               onResponderMove={[Function]}
                               onResponderRelease={[Function]}
@@ -81345,58 +88224,210 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                               onResponderTerminationRequest={[Function]}
                               onStartShouldSetResponder={[Function]}
                               style={
-                                {
-                                  "opacity": 1,
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-undefined"
+                            >
+                              <View
+                                style={
+                                  {
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
+                                  }
                                 }
+                              >
+                                <View
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "flexDirection": "column",
+                                      "gap": 4,
+                                      "width": 200,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      rocket.cat
+                                    </Text>
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      styles.css
+                                    </Text>
+                                  </View>
+                                  <Text
+                                    accessibilityLabel="styles.css"
+                                    numberOfLines={0}
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 16,
+                                          "fontWeight": "400",
+                                          "lineHeight": 22,
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                          "lineHeight": undefined,
+                                        },
+                                      ]
+                                    }
+                                    testID="markdown-preview-styles.css"
+                                  >
+                                    styles.css
+                                  </Text>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                        <View
+                          testID="message-content-Multiple files"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                allowFontScaling={false}
-                                selectable={false}
                                 style={
-                                  [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 24,
-                                    },
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Multiple files"
+                                  style={
                                     [
                                       {
-                                        "lineHeight": 24,
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
                                       },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
-                                }
-                              >
-                                
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Multiple files
+                                </Text>
                               </Text>
-                            </View>
+                            </Text>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r5k:"
+      orderKey=":r5f:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r5k:"
+        orderKey=":r5f:"
       >
         <View
           accessibilityState={
@@ -81429,331 +88460,590 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  "
+              accessible={true}
+              style={
                 {
                   "flexDirection": "column",
                   "gap": 8,
                   "paddingHorizontal": 12,
                   "paddingVertical": 4,
                   "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "gap": 10,
-                }
-              }
-              testID="message-thread-replied-on-How are you?"
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#095AD2",
-                        "fontSize": 20,
-                      },
-                      [
-                        {
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <Text
-                accessibilityLabel="How are you?"
-                numberOfLines={1}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 22,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#2F343D",
-                      "lineHeight": undefined,
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "flex": 1,
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ]
-                }
-                testID="markdown-preview-How are you?"
-              >
-                How are you?
-              </Text>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "marginLeft": 4,
-                    "marginRight": 4,
-                  }
                 }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 20,
-                      },
-                      [
-                        {
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-            </View>
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message I'm fine!.  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
               }
+              testID="message-undefined"
             >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
-                }
-              >
-                <View
-                  accessible={true}
-                  style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 20,
-                        "width": 20,
-                      },
-                      undefined,
-                    ]
-                  }
-                  testID="avatar"
-                >
-                  <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      {
-                        "opacity": 1,
-                      }
-                    }
-                  >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
-                        {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={20}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
-                        [
-                          {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                          },
-                        ]
-                      }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 20,
-                          "width": 20,
-                        }
-                      }
-                      transition={null}
-                      width={20}
-                    />
-                  </View>
-                </View>
-              </View>
               <A11yIndexView
                 accessibilityLabel="I'm fine!"
                 importantForAccessibility="yes"
                 orderFocusType={0}
                 orderIndex={2}
-                orderKey=":r5k:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
+                orderKey=":r5f:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    testID="message-content-I'm fine!"
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
                   >
-                    <Text
-                      accessibilityLabel="I'm fine!"
-                      numberOfLines={1}
+                    <View
+                      accessible={true}
                       style={
                         [
                           {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
                           },
                           {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
+                            "marginTop": 4,
                           },
                         ]
                       }
-                      testID="message-preview-I'm fine!"
+                      testID="avatar"
                     >
-                      I'm fine!
-                    </Text>
-                  </View>
-                </View>
-              </A11yIndexView>
-            </View>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r5l:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r5l:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={295}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
+                        {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={296}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "gap": 4,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-I'm a very long long title and I'll break-How are you?"
+                            >
+                              <View
+                                style={
+                                  {
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "flexDirection": "column",
+                                      "gap": 4,
+                                      "width": 200,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      I'm a very long long title and I'll break
+                                    </Text>
+                                  </View>
+                                  <View
+                                    style={
+                                      {
+                                        "gap": 2,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      <Text
+                                        style={
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          accessibilityLabel="How are you?"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          How are you?
+                                        </Text>
+                                      </Text>
+                                    </Text>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                        <View
+                          testID="message-content-I'm fine!"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="I'm fine!"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  I'm fine!
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r5g:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r5g:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
               "text": undefined,
             }
           }
@@ -81770,299 +89060,602 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  I'm fine!.  "
+              accessible={true}
+              style={
                 {
                   "flexDirection": "column",
                   "gap": 8,
                   "paddingHorizontal": 12,
                   "paddingVertical": 4,
                   "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "gap": 10,
-                }
-              }
-              testID="message-thread-replied-on-Thread with emoji :) :joy:"
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#095AD2",
-                        "fontSize": 20,
-                      },
-                      [
-                        {
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <Text
-                accessibilityLabel="Thread with emoji :) 😂"
-                numberOfLines={1}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 22,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#2F343D",
-                      "lineHeight": undefined,
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "flex": 1,
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ]
-                }
-                testID="markdown-preview-Thread with emoji :) 😂"
-              >
-                Thread with emoji :) 😂
-              </Text>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "marginLeft": 4,
-                    "marginRight": 4,
-                  }
                 }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 20,
-                      },
-                      [
-                        {
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-            </View>
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message I'm fine!.  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
               }
+              testID="message-undefined"
             >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
-                }
+              <A11yIndexView
+                accessibilityLabel="I'm fine!"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r5g:"
               >
                 <View
                   accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 20,
-                        "width": 20,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "flexDirection": "row",
+                    }
                   }
-                  testID="avatar"
                 >
                   <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
                       {
-                        "opacity": 1,
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
                       }
                     }
                   >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
-                        {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={20}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
+                    <View
+                      accessible={true}
+                      style={
                         [
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
                           },
                         ]
                       }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 20,
-                          "width": 20,
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={297}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
                         }
-                      }
-                      transition={null}
-                      width={20}
-                    />
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
                   </View>
-                </View>
-              </View>
-              <A11yIndexView
-                accessibilityLabel="I'm fine!"
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r5l:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    testID="message-content-I'm fine!"
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
                   >
-                    <Text
-                      accessibilityLabel="I'm fine!"
-                      numberOfLines={1}
+                    <View
+                      onLayout={[Function]}
                       style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
-                          },
-                        ]
+                        {
+                          "flex": 1,
+                        }
                       }
-                      testID="message-preview-I'm fine!"
                     >
-                      I'm fine!
-                    </Text>
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={298}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "gap": 4,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-How are you? :nyan_rocket:"
+                            >
+                              <View
+                                style={
+                                  {
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "flexDirection": "column",
+                                      "gap": 4,
+                                      "width": 200,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      rocket.cat
+                                    </Text>
+                                  </View>
+                                  <View
+                                    style={
+                                      {
+                                        "gap": 2,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      <Text
+                                        style={
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          accessibilityLabel="How are you? "
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          How are you? 
+                                        </Text>
+                                        <View
+                                          style={
+                                            {
+                                              "transform": [
+                                                {
+                                                  "translateY": 3,
+                                                },
+                                              ],
+                                            }
+                                          }
+                                        >
+                                          <ViewManagerAdapter_ExpoImage
+                                            containerViewRef={"[React.ref]"}
+                                            contentFit="contain"
+                                            contentPosition={
+                                              {
+                                                "left": "50%",
+                                                "top": "50%",
+                                              }
+                                            }
+                                            height={15}
+                                            nativeViewRef={"[React.ref]"}
+                                            onError={[Function]}
+                                            onLoad={[Function]}
+                                            onLoadStart={[Function]}
+                                            onProgress={[Function]}
+                                            placeholder={[]}
+                                            source={
+                                              [
+                                                {
+                                                  "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                                },
+                                              ]
+                                            }
+                                            style={
+                                              {
+                                                "height": 15,
+                                                "width": 15,
+                                              }
+                                            }
+                                            transition={null}
+                                            width={15}
+                                          />
+                                        </View>
+                                      </Text>
+                                    </Text>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                        <View
+                          testID="message-content-I'm fine!"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="I'm fine!"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  I'm fine!
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
                   </View>
                 </View>
               </A11yIndexView>
@@ -82072,13 +89665,13 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r5m:"
+      orderKey=":r5h:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r5m:"
+        orderKey=":r5h:"
       >
         <View
           accessibilityState={
@@ -82111,656 +89704,749 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Looks cool!.  "
+              accessible={true}
+              style={
                 {
                   "flexDirection": "column",
                   "gap": 8,
                   "paddingHorizontal": 12,
                   "paddingVertical": 4,
                   "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "gap": 10,
                 }
               }
-              testID="message-thread-replied-on-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+              testID="message-undefined"
             >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
-                }
+              <A11yIndexView
+                accessibilityLabel="Looks cool!"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r5h:"
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
+                  accessible={true}
                   style={
-                    [
-                      {
-                        "color": "#095AD2",
-                        "fontSize": 20,
-                      },
-                      [
-                        {
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <Text
-                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                numberOfLines={1}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 22,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#2F343D",
-                      "lineHeight": undefined,
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "flex": 1,
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    },
                     {
-                      "color": "#095AD2",
-                    },
-                  ]
-                }
-                testID="markdown-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-              >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              </Text>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "marginLeft": 4,
-                    "marginRight": 4,
+                      "flexDirection": "row",
+                    }
                   }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 20,
-                      },
-                      [
-                        {
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-            </View>
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message I'm fine!.  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
-                }
-              >
-                <View
-                  accessible={true}
-                  style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 20,
-                        "width": 20,
-                      },
-                      undefined,
-                    ]
-                  }
-                  testID="avatar"
                 >
                   <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
                       {
-                        "opacity": 1,
-                      }
-                    }
-                  >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
-                        {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={20}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
-                        [
-                          {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                          },
-                        ]
-                      }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 20,
-                          "width": 20,
-                        }
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
                       }
-                      transition={null}
-                      width={20}
-                    />
-                  </View>
-                </View>
-              </View>
-              <A11yIndexView
-                accessibilityLabel="I'm fine!"
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r5m:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
                     }
-                  }
-                >
-                  <View
-                    testID="message-content-I'm fine!"
                   >
-                    <Text
-                      accessibilityLabel="I'm fine!"
-                      numberOfLines={1}
+                    <View
+                      accessible={true}
                       style={
                         [
                           {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
                           },
                           {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
+                            "marginTop": 4,
                           },
                         ]
                       }
-                      testID="message-preview-I'm fine!"
+                      testID="avatar"
                     >
-                      I'm fine!
-                    </Text>
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={299}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
                   </View>
-                </View>
-              </A11yIndexView>
-            </View>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r5n:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r5n:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
-        >
-          <View
-            style={
-              [
-                {
-                  "flexDirection": "column",
-                  "gap": 8,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 4,
-                  "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "gap": 10,
-                }
-              }
-              testID="message-thread-replied-on-How are you?"
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#095AD2",
-                        "fontSize": 20,
-                      },
-                      [
-                        {
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <Text
-                accessibilityLabel="How are you?"
-                numberOfLines={1}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 22,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#2F343D",
-                      "lineHeight": undefined,
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "flex": 1,
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ]
-                }
-                testID="markdown-preview-How are you?"
-              >
-                How are you?
-              </Text>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "marginLeft": 4,
-                    "marginRight": 4,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 20,
-                      },
-                      [
-                        {
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-            </View>
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
-                }
-              >
-                <View
-                  accessible={true}
-                  style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 20,
-                        "width": 20,
-                      },
-                      undefined,
-                    ]
-                  }
-                  testID="avatar"
-                >
                   <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
                       {
-                        "opacity": 1,
+                        "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
+                    <View
+                      onLayout={[Function]}
+                      style={
                         {
-                          "left": "50%",
-                          "top": "50%",
+                          "flex": 1,
                         }
                       }
-                      height={20}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
-                        [
+                    >
+                      <View
+                        style={
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={300}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
                             },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                          },
-                        ]
-                      }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 20,
-                          "width": 20,
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                      transition={null}
-                      width={20}
-                    />
-                  </View>
-                </View>
-              </View>
-              <A11yIndexView
-                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r5n:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                  >
-                    <Text
-                      accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
-                          },
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
                           {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
-                          },
-                        ]
-                      }
-                      testID="message-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                    >
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                    </Text>
-                  </View>
-                </View>
-              </A11yIndexView>
-            </View>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r5o:"
-    >
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Looks cool!"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Looks cool!"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Looks cool!
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "gap": 4,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-"
+                            >
+                              <View
+                                style={
+                                  {
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "flexDirection": "column",
+                                      "gap": 4,
+                                      "width": 200,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      rocket.cat
+                                    </Text>
+                                  </View>
+                                  <View
+                                    style={
+                                      {
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        {
+                                          "gap": 4,
+                                        }
+                                      }
+                                    >
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          style={
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            style={
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
+                                            }
+                                          >
+                                            <Text
+                                              accessibilityLabel="What you think about this one?"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              What you think about this one?
+                                            </Text>
+                                          </Text>
+                                        </Text>
+                                      </View>
+                                      <View
+                                        accessibilityState={
+                                          {
+                                            "busy": undefined,
+                                            "checked": undefined,
+                                            "disabled": undefined,
+                                            "expanded": undefined,
+                                            "selected": undefined,
+                                          }
+                                        }
+                                        accessibilityValue={
+                                          {
+                                            "max": undefined,
+                                            "min": undefined,
+                                            "now": undefined,
+                                            "text": undefined,
+                                          }
+                                        }
+                                        accessible={true}
+                                        collapsable={false}
+                                        focusable={true}
+                                        onBlur={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        onResponderGrant={[Function]}
+                                        onResponderMove={[Function]}
+                                        onResponderRelease={[Function]}
+                                        onResponderTerminate={[Function]}
+                                        onResponderTerminationRequest={[Function]}
+                                        onStartShouldSetResponder={[Function]}
+                                        style={
+                                          {
+                                            "borderRadius": 4,
+                                            "flexDirection": "column",
+                                          }
+                                        }
+                                      >
+                                        <View
+                                          onLayout={[Function]}
+                                          style={
+                                            {
+                                              "flex": 1,
+                                            }
+                                          }
+                                        >
+                                          <View
+                                            style={
+                                              [
+                                                {
+                                                  "borderRadius": 4,
+                                                  "minHeight": 200,
+                                                  "overflow": "hidden",
+                                                  "width": "100%",
+                                                },
+                                                {
+                                                  "borderColor": "#CBCED1",
+                                                  "borderRadius": 4,
+                                                  "borderWidth": 1,
+                                                  "overflow": "hidden",
+                                                },
+                                              ]
+                                            }
+                                          />
+                                          <View
+                                            style={
+                                              [
+                                                [
+                                                  {
+                                                    "borderRadius": 4,
+                                                    "minHeight": 200,
+                                                    "overflow": "hidden",
+                                                    "width": "100%",
+                                                  },
+                                                  {
+                                                    "borderColor": "#CBCED1",
+                                                    "borderRadius": 4,
+                                                    "borderWidth": 1,
+                                                    "overflow": "hidden",
+                                                  },
+                                                ],
+                                                {
+                                                  "borderWidth": 0,
+                                                  "bottom": 0,
+                                                  "left": 0,
+                                                  "position": "absolute",
+                                                  "right": 0,
+                                                  "top": 0,
+                                                },
+                                                {
+                                                  "backgroundColor": "#E4E7EA",
+                                                },
+                                              ]
+                                            }
+                                          />
+                                          <View
+                                            style={
+                                              [
+                                                [
+                                                  {
+                                                    "borderRadius": 4,
+                                                    "minHeight": 200,
+                                                    "overflow": "hidden",
+                                                    "width": "100%",
+                                                  },
+                                                  {
+                                                    "borderColor": "#CBCED1",
+                                                    "borderRadius": 4,
+                                                    "borderWidth": 1,
+                                                    "overflow": "hidden",
+                                                  },
+                                                ],
+                                                {
+                                                  "alignItems": "center",
+                                                  "justifyContent": "center",
+                                                  "position": "absolute",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            <Text
+                                              allowFontScaling={false}
+                                              selectable={false}
+                                              style={
+                                                [
+                                                  {
+                                                    "color": "#2F343D",
+                                                    "fontSize": 70.2,
+                                                  },
+                                                  [
+                                                    {
+                                                      "lineHeight": 70.2,
+                                                    },
+                                                    undefined,
+                                                  ],
+                                                  {
+                                                    "fontFamily": "custom",
+                                                    "fontStyle": "normal",
+                                                    "fontWeight": "normal",
+                                                  },
+                                                  {},
+                                                ]
+                                              }
+                                            >
+                                              
+                                            </Text>
+                                          </View>
+                                          <View
+                                            style={
+                                              {
+                                                "bottom": 8,
+                                                "flexDirection": "row",
+                                                "gap": 8,
+                                                "position": "absolute",
+                                                "right": 8,
+                                              }
+                                            }
+                                          />
+                                        </View>
+                                      </View>
+                                    </View>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r5i:"
+    >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r5o:"
+        orderKey=":r5i:"
       >
         <View
           accessibilityState={
@@ -82793,299 +90479,794 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Yes, I am.  "
+              accessible={true}
+              style={
                 {
                   "flexDirection": "column",
                   "gap": 8,
                   "paddingHorizontal": 12,
                   "paddingVertical": 4,
                   "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "gap": 10,
-                }
-              }
-              testID="message-thread-replied-on-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#095AD2",
-                        "fontSize": 20,
-                      },
-                      [
-                        {
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <Text
-                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                numberOfLines={1}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 22,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#2F343D",
-                      "lineHeight": undefined,
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "flex": 1,
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ]
-                }
-                testID="markdown-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-              >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              </Text>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "marginLeft": 4,
-                    "marginRight": 4,
-                  }
                 }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 20,
-                      },
-                      [
-                        {
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-            </View>
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
               }
+              testID="message-undefined"
             >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
-                }
+              <A11yIndexView
+                accessibilityLabel="Yes, I am"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r5i:"
               >
                 <View
                   accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 20,
-                        "width": 20,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "flexDirection": "row",
+                    }
                   }
-                  testID="avatar"
                 >
                   <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
                       {
-                        "opacity": 1,
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
                       }
                     }
                   >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
-                        {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={20}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
+                    <View
+                      accessible={true}
+                      style={
                         [
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
                           },
                         ]
                       }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 20,
-                          "width": 20,
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={301}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
                         }
-                      }
-                      transition={null}
-                      width={20}
-                    />
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
                   </View>
-                </View>
-              </View>
-              <A11yIndexView
-                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r5o:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
                   >
-                    <Text
-                      accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                      numberOfLines={1}
+                    <View
+                      onLayout={[Function]}
                       style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
-                          },
-                        ]
+                        {
+                          "flex": 1,
+                        }
                       }
-                      testID="message-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                     >
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                    </Text>
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={302}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Yes, I am"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Yes, I am"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Yes, I am
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "gap": 4,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-"
+                            >
+                              <View
+                                style={
+                                  {
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "flexDirection": "column",
+                                      "gap": 4,
+                                      "width": 200,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      rocket.cat
+                                    </Text>
+                                  </View>
+                                  <View
+                                    style={
+                                      {
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        {
+                                          "gap": 4,
+                                        }
+                                      }
+                                    >
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          style={
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            style={
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
+                                            }
+                                          >
+                                            <Text
+                                              accessibilityLabel="Are you seeing this mario "
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Are you seeing this mario 
+                                            </Text>
+                                            <View
+                                              style={
+                                                {
+                                                  "transform": [
+                                                    {
+                                                      "translateY": 3,
+                                                    },
+                                                  ],
+                                                }
+                                              }
+                                            >
+                                              <ViewManagerAdapter_ExpoImage
+                                                containerViewRef={"[React.ref]"}
+                                                contentFit="contain"
+                                                contentPosition={
+                                                  {
+                                                    "left": "50%",
+                                                    "top": "50%",
+                                                  }
+                                                }
+                                                height={15}
+                                                nativeViewRef={"[React.ref]"}
+                                                onError={[Function]}
+                                                onLoad={[Function]}
+                                                onLoadStart={[Function]}
+                                                onProgress={[Function]}
+                                                placeholder={[]}
+                                                source={
+                                                  [
+                                                    {
+                                                      "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
+                                                    },
+                                                  ]
+                                                }
+                                                style={
+                                                  {
+                                                    "height": 15,
+                                                    "width": 15,
+                                                  }
+                                                }
+                                                transition={null}
+                                                width={15}
+                                              />
+                                            </View>
+                                            <Text
+                                              accessibilityLabel=" ?"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                               ?
+                                            </Text>
+                                          </Text>
+                                        </Text>
+                                      </View>
+                                      <View
+                                        accessibilityState={
+                                          {
+                                            "busy": undefined,
+                                            "checked": undefined,
+                                            "disabled": undefined,
+                                            "expanded": undefined,
+                                            "selected": undefined,
+                                          }
+                                        }
+                                        accessibilityValue={
+                                          {
+                                            "max": undefined,
+                                            "min": undefined,
+                                            "now": undefined,
+                                            "text": undefined,
+                                          }
+                                        }
+                                        accessible={true}
+                                        collapsable={false}
+                                        focusable={true}
+                                        onBlur={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        onResponderGrant={[Function]}
+                                        onResponderMove={[Function]}
+                                        onResponderRelease={[Function]}
+                                        onResponderTerminate={[Function]}
+                                        onResponderTerminationRequest={[Function]}
+                                        onStartShouldSetResponder={[Function]}
+                                        style={
+                                          {
+                                            "borderRadius": 4,
+                                            "flexDirection": "column",
+                                          }
+                                        }
+                                      >
+                                        <View
+                                          onLayout={[Function]}
+                                          style={
+                                            {
+                                              "flex": 1,
+                                            }
+                                          }
+                                        >
+                                          <View
+                                            style={
+                                              [
+                                                {
+                                                  "borderRadius": 4,
+                                                  "minHeight": 200,
+                                                  "overflow": "hidden",
+                                                  "width": "100%",
+                                                },
+                                                {
+                                                  "borderColor": "#CBCED1",
+                                                  "borderRadius": 4,
+                                                  "borderWidth": 1,
+                                                  "overflow": "hidden",
+                                                },
+                                              ]
+                                            }
+                                          />
+                                          <View
+                                            style={
+                                              [
+                                                [
+                                                  {
+                                                    "borderRadius": 4,
+                                                    "minHeight": 200,
+                                                    "overflow": "hidden",
+                                                    "width": "100%",
+                                                  },
+                                                  {
+                                                    "borderColor": "#CBCED1",
+                                                    "borderRadius": 4,
+                                                    "borderWidth": 1,
+                                                    "overflow": "hidden",
+                                                  },
+                                                ],
+                                                {
+                                                  "borderWidth": 0,
+                                                  "bottom": 0,
+                                                  "left": 0,
+                                                  "position": "absolute",
+                                                  "right": 0,
+                                                  "top": 0,
+                                                },
+                                                {
+                                                  "backgroundColor": "#E4E7EA",
+                                                },
+                                              ]
+                                            }
+                                          />
+                                          <View
+                                            style={
+                                              [
+                                                [
+                                                  {
+                                                    "borderRadius": 4,
+                                                    "minHeight": 200,
+                                                    "overflow": "hidden",
+                                                    "width": "100%",
+                                                  },
+                                                  {
+                                                    "borderColor": "#CBCED1",
+                                                    "borderRadius": 4,
+                                                    "borderWidth": 1,
+                                                    "overflow": "hidden",
+                                                  },
+                                                ],
+                                                {
+                                                  "alignItems": "center",
+                                                  "justifyContent": "center",
+                                                  "position": "absolute",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            <Text
+                                              allowFontScaling={false}
+                                              selectable={false}
+                                              style={
+                                                [
+                                                  {
+                                                    "color": "#2F343D",
+                                                    "fontSize": 70.2,
+                                                  },
+                                                  [
+                                                    {
+                                                      "lineHeight": 70.2,
+                                                    },
+                                                    undefined,
+                                                  ],
+                                                  {
+                                                    "fontFamily": "custom",
+                                                    "fontStyle": "normal",
+                                                    "fontWeight": "normal",
+                                                  },
+                                                  {},
+                                                ]
+                                              }
+                                            >
+                                              
+                                            </Text>
+                                          </View>
+                                          <View
+                                            style={
+                                              {
+                                                "bottom": 8,
+                                                "flexDirection": "row",
+                                                "gap": 8,
+                                                "position": "absolute",
+                                                "right": 8,
+                                              }
+                                            }
+                                          />
+                                        </View>
+                                      </View>
+                                    </View>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
                   </View>
                 </View>
               </A11yIndexView>
@@ -83094,14 +91275,27 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r5p:"
+      orderKey=":r5j:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r5p:"
+        orderKey=":r5j:"
       >
         <View
           accessibilityState={
@@ -83134,916 +91328,676 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  How are you?.  "
+              accessible={true}
+              style={
                 {
                   "flexDirection": "column",
                   "gap": 8,
                   "paddingHorizontal": 12,
                   "paddingVertical": 4,
                   "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "gap": 10,
-                }
-              }
-              testID="message-thread-replied-on-Thread with attachment"
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#095AD2",
-                        "fontSize": 20,
-                      },
-                      [
-                        {
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <Text
-                accessibilityLabel="Thread with attachment"
-                numberOfLines={1}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 22,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#2F343D",
-                      "lineHeight": undefined,
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "flex": 1,
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ]
-                }
-                testID="markdown-preview-Thread with attachment"
-              >
-                Thread with attachment
-              </Text>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "marginLeft": 4,
-                    "marginRight": 4,
-                  }
                 }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 20,
-                      },
-                      [
-                        {
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-            </View>
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message undefined.  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
               }
+              testID="message-undefined"
             >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
-                }
-              >
-                <View
-                  accessible={true}
-                  style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 20,
-                        "width": 20,
-                      },
-                      undefined,
-                    ]
-                  }
-                  testID="avatar"
-                >
-                  <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      {
-                        "opacity": 1,
-                      }
-                    }
-                  >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
-                        {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={20}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
-                        [
-                          {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                          },
-                        ]
-                      }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 20,
-                          "width": 20,
-                        }
-                      }
-                      transition={null}
-                      width={20}
-                    />
-                  </View>
-                </View>
-              </View>
               <A11yIndexView
-                accessibilityLabel=""
+                accessibilityLabel="How are you?"
                 importantForAccessibility="yes"
                 orderFocusType={0}
                 orderIndex={2}
-                orderKey=":r5p:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    testID="message-content-"
-                  />
-                </View>
-              </A11yIndexView>
-            </View>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
-    <A11yOrderView
-      orderKey=":r5q:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r5q:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
-        >
-          <View
-            accessibilityLabel="diego.mello 10:00:00 AM  How are you?.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
-          >
-            <A11yIndexView
-              accessibilityLabel="How are you?"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r5q:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
+                orderKey=":r5j:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={303}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={304}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-How are you?"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-How are you?"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="How are you?"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                How are you?
+                                <Text
+                                  accessibilityLabel="How are you?"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  How are you?
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
                         <View
                           style={
-                            [
-                              {
-                                "alignItems": "center",
-                                "borderRadius": 4,
-                                "flexDirection": "row",
-                                "justifyContent": "center",
-                                "paddingHorizontal": 12,
-                                "paddingVertical": 8,
-                              },
-                              {
-                                "backgroundColor": "#1D74F5",
-                              },
-                            ]
+                            {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                            }
                           }
-                          testID="message-thread-button-How are you?"
                         >
-                          <Text
+                          <View
                             style={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 12,
-                                  "fontWeight": "600",
-                                  "lineHeight": 16,
-                                  "textAlign": "left",
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "paddingHorizontal": 12,
+                                  "paddingVertical": 8,
                                 },
                                 {
-                                  "color": "#FFFFFF",
+                                  "backgroundColor": "#1D74F5",
                                 },
                               ]
                             }
+                            testID="message-thread-button-How are you?"
                           >
-                            View thread
-                          </Text>
-                        </View>
-                        <View
-                          style={
-                            [
-                              {
-                                "alignItems": "center",
-                                "flex": 1,
-                                "flexDirection": "row",
-                              },
-                              {
-                                "flex": 1,
-                                "marginLeft": 12,
-                              },
-                            ]
-                          }
-                        >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 12,
+                                    "fontWeight": "600",
+                                    "lineHeight": 16,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#FFFFFF",
+                                  },
+                                ]
+                              }
+                            >
+                              View thread
+                            </Text>
+                          </View>
                           <View
                             style={
-                              {
-                                "flex": 1,
-                                "flexDirection": "row",
-                              }
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                },
+                                {
+                                  "flex": 1,
+                                  "marginLeft": 12,
+                                },
+                              ]
                             }
                           >
                             <View
                               style={
                                 {
-                                  "alignItems": "center",
+                                  "flex": 1,
                                   "flexDirection": "row",
-                                  "marginRight": 8,
                                 }
                               }
                             >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 31.200000000000003,
-                                    },
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "marginRight": 8,
+                                  }
+                                }
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
                                     [
                                       {
-                                        "lineHeight": 31.200000000000003,
+                                        "color": "#2F343D",
+                                        "fontSize": 24,
                                       },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
-                                }
-                              >
-                                
-                              </Text>
-                              <Text
-                                numberOfLines={1}
+                                      [
+                                        {
+                                          "lineHeight": 24,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                                <Text
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 10,
+                                        "fontWeight": "600",
+                                        "marginLeft": 2,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#6C727A",
+                                      },
+                                    ]
+                                  }
+                                  testID="thread-count-1"
+                                >
+                                  1
+                                </Text>
+                              </View>
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 10,
-                                      "fontWeight": "600",
-                                      "marginLeft": 2,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#6C727A",
-                                    },
-                                  ]
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "marginRight": 8,
+                                  }
                                 }
-                                testID="thread-count-1"
                               >
-                                1
-                              </Text>
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 24,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 24,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                                <Text
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 10,
+                                        "fontWeight": "600",
+                                        "marginLeft": 2,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#6C727A",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  0
+                                </Text>
+                              </View>
                             </View>
                             <View
                               style={
                                 {
                                   "alignItems": "center",
                                   "flexDirection": "row",
-                                  "marginRight": 8,
                                 }
                               }
                             >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                              <View
                                 style={
                                   [
                                     {
-                                      "color": "#2F343D",
-                                      "fontSize": 31.200000000000003,
+                                      "borderRadius": 4,
+                                      "height": 8,
+                                      "marginRight": 8,
+                                      "width": 8,
                                     },
-                                    [
-                                      {
-                                        "lineHeight": 31.200000000000003,
-                                      },
-                                      undefined,
-                                    ],
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "backgroundColor": "#6C727A",
                                     },
-                                    {},
                                   ]
                                 }
-                              >
-                                
-                              </Text>
-                              <Text
-                                numberOfLines={1}
+                              />
+                              <RNGestureHandlerButton
+                                activeOpacity={1}
+                                collapsable={false}
+                                delayLongPress={600}
+                                enabled={true}
+                                handlerTag={305}
+                                handlerType="NativeViewGestureHandler"
+                                innerRef={null}
+                                onActiveStateChange={[Function]}
+                                onGestureHandlerEvent={[Function]}
+                                onGestureHandlerStateChange={[Function]}
+                                onPress={[Function]}
+                                rippleColor="#E4E7EA"
                                 style={
                                   [
                                     {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 10,
-                                      "fontWeight": "600",
-                                      "marginLeft": 2,
-                                      "textAlign": "left",
+                                      "backgroundColor": undefined,
+                                      "borderRadius": undefined,
+                                      "margin": undefined,
+                                      "marginBottom": undefined,
+                                      "marginEnd": undefined,
+                                      "marginHorizontal": undefined,
+                                      "marginLeft": undefined,
+                                      "marginRight": undefined,
+                                      "marginStart": undefined,
+                                      "marginTop": undefined,
+                                      "marginVertical": undefined,
                                     },
                                     {
-                                      "color": "#6C727A",
+                                      "cursor": undefined,
                                     },
                                   ]
                                 }
+                                underlayColor="#E4E7EA"
                               >
-                                0
-                              </Text>
-                            </View>
-                          </View>
-                          <View
-                            style={
-                              {
-                                "alignItems": "center",
-                                "flexDirection": "row",
-                              }
-                            }
-                          >
-                            <View
-                              style={
-                                [
-                                  {
-                                    "borderRadius": 4,
-                                    "height": 8,
-                                    "marginRight": 8,
-                                    "width": 8,
-                                  },
-                                  {
-                                    "backgroundColor": "#6C727A",
-                                  },
-                                ]
-                              }
-                            />
-                            <View
-                              accessibilityLabel="Follow thread"
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": undefined,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                {
-                                  "opacity": 1,
-                                }
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
-                                style={
-                                  [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 31.200000000000003,
-                                    },
-                                    [
-                                      {
-                                        "lineHeight": 31.200000000000003,
-                                      },
-                                      undefined,
-                                    ],
+                                <View
+                                  collapsable={false}
+                                  style={
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
-                                }
-                              >
-                                
-                              </Text>
+                                      "backgroundColor": "#E4E7EA",
+                                      "borderBottomLeftRadius": undefined,
+                                      "borderBottomRightRadius": undefined,
+                                      "borderRadius": undefined,
+                                      "borderTopLeftRadius": undefined,
+                                      "borderTopRightRadius": undefined,
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "opacity": 0,
+                                      "position": "absolute",
+                                      "right": 0,
+                                      "top": 0,
+                                    }
+                                  }
+                                />
+                                <View
+                                  accessibilityLabel="Follow thread"
+                                  style={{}}
+                                >
+                                  <Text
+                                    allowFontScaling={false}
+                                    selectable={false}
+                                    style={
+                                      [
+                                        {
+                                          "color": "#2F343D",
+                                          "fontSize": 24,
+                                        },
+                                        [
+                                          {
+                                            "lineHeight": 24,
+                                          },
+                                          undefined,
+                                        ],
+                                        {
+                                          "fontFamily": "custom",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "normal",
+                                        },
+                                        {},
+                                      ]
+                                    }
+                                  >
+                                    
+                                  </Text>
+                                </View>
+                              </RNGestureHandlerButton>
                             </View>
                           </View>
                         </View>
@@ -84051,20 +92005,20 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r5r:"
+      orderKey=":r5k:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r5r:"
+        orderKey=":r5k:"
       >
         <View
           accessibilityState={
@@ -84097,315 +92051,354 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
-                {
-                  "flexDirection": "column",
-                  "gap": 8,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 4,
-                  "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
+            style={{}}
           >
             <View
               style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "gap": 10,
-                }
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
               }
-              testID="message-thread-replied-on-How are you?"
             >
               <View
                 style={
                   {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "gap": 10,
                   }
                 }
+                testID="message-thread-replied-on-How are you?"
               >
+                <View
+                  style={
+                    {
+                      "alignItems": "flex-end",
+                      "width": 36,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#095AD2",
+                          "fontSize": 20,
+                        },
+                        [
+                          {
+                            "lineHeight": 20,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
                 <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                  accessibilityLabel="How are you?"
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "color": "#095AD2",
-                        "fontSize": 26,
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
                       },
-                      [
-                        {
-                          "lineHeight": 26,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "color": "#2F343D",
+                        "lineHeight": undefined,
+                      },
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#095AD2",
                       },
-                      {},
                     ]
                   }
+                  testID="markdown-preview-How are you?"
                 >
-                  
+                  How are you?
                 </Text>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "marginLeft": 4,
+                      "marginRight": 4,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#6C727A",
+                          "fontSize": 20,
+                        },
+                        [
+                          {
+                            "lineHeight": 20,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
               </View>
-              <Text
-                accessibilityLabel="How are you?"
-                numberOfLines={1}
+              <View
+                accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message I'm fine!.  "
+                accessible={true}
                 style={
                   [
                     {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 22,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#2F343D",
-                      "lineHeight": undefined,
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "flex": 1,
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#095AD2",
+                      "flexDirection": "row",
                     },
+                    {},
                   ]
                 }
-                testID="markdown-preview-How are you?"
-              >
-                How are you?
-              </Text>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "marginLeft": 4,
-                    "marginRight": 4,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 26,
-                      },
-                      [
-                        {
-                          "lineHeight": 26,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-            </View>
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message I'm fine!.  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
-                  }
-                }
               >
                 <View
-                  accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 26,
-                        "width": 26,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "alignItems": "flex-end",
+                      "width": 36,
+                    }
                   }
-                  testID="avatar"
                 >
                   <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
                     accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
-                      {
-                        "opacity": 1,
-                      }
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 20,
+                          "width": 20,
+                        },
+                        undefined,
+                      ]
                     }
+                    testID="avatar"
                   >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
-                        {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={26}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={306}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
+                      style={
                         [
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
                           },
                         ]
                       }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 26,
-                          "width": 26,
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
                         }
-                      }
-                      transition={null}
-                      width={26}
-                    />
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={20}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 20,
+                              "width": 20,
+                            }
+                          }
+                          transition={null}
+                          width={20}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
                 </View>
-              </View>
-              <A11yIndexView
-                accessibilityLabel="I'm fine!"
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r5r:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
+                <A11yIndexView
+                  accessibilityLabel="I'm fine!"
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r5k:"
                   style={
                     {
                       "flex": 1,
-                      "marginLeft": 10,
                     }
                   }
                 >
                   <View
-                    testID="message-content-I'm fine!"
-                  >
-                    <Text
-                      accessibilityLabel="I'm fine!"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
-                          },
-                        ]
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
                       }
-                      testID="message-preview-I'm fine!"
+                    }
+                  >
+                    <View
+                      testID="message-content-I'm fine!"
                     >
-                      I'm fine!
-                    </Text>
+                      <Text
+                        accessibilityLabel="I'm fine!"
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
+                        }
+                        testID="message-preview-I'm fine!"
+                      >
+                        I'm fine!
+                      </Text>
+                    </View>
                   </View>
-                </View>
-              </A11yIndexView>
+                </A11yIndexView>
+              </View>
             </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r5s:"
+      orderKey=":r5l:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r5s:"
+        orderKey=":r5l:"
       >
         <View
           accessibilityState={
@@ -84438,329 +92431,368 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
-                {
-                  "flexDirection": "column",
-                  "gap": 8,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 4,
-                  "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
+            style={{}}
           >
             <View
               style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "gap": 10,
-                }
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
               }
-              testID="message-thread-replied-on-Thread with emoji :) :joy:"
             >
               <View
                 style={
                   {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "gap": 10,
                   }
                 }
+                testID="message-thread-replied-on-Thread with emoji :) :joy:"
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#095AD2",
-                        "fontSize": 26,
-                      },
+                    {
+                      "alignItems": "flex-end",
+                      "width": 36,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 26,
+                          "color": "#095AD2",
+                          "fontSize": 20,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <Text
-                accessibilityLabel="Thread with emoji :) 😂"
-                numberOfLines={1}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 22,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#2F343D",
-                      "lineHeight": undefined,
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "flex": 1,
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ]
-                }
-                testID="markdown-preview-Thread with emoji :) 😂"
-              >
-                Thread with emoji :) 😂
-              </Text>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "marginLeft": 4,
-                    "marginRight": 4,
-                  }
-                }
-              >
+                        [
+                          {
+                            "lineHeight": 20,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
                 <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                  accessibilityLabel="Thread with emoji :) 😂"
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "color": "#6C727A",
-                        "fontSize": 26,
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
                       },
-                      [
-                        {
-                          "lineHeight": 26,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "color": "#2F343D",
+                        "lineHeight": undefined,
+                      },
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#095AD2",
                       },
-                      {},
                     ]
                   }
+                  testID="markdown-preview-Thread with emoji :) 😂"
                 >
-                  
+                  Thread with emoji :) 😂
                 </Text>
-              </View>
-            </View>
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message I'm fine!.  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
-                  }
-                }
-              >
                 <View
-                  accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 26,
-                        "width": 26,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "marginLeft": 4,
+                      "marginRight": 4,
+                    }
                   }
-                  testID="avatar"
                 >
-                  <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
                     style={
-                      {
-                        "opacity": 1,
-                      }
-                    }
-                  >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
+                      [
                         {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={26}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
+                          "color": "#6C727A",
+                          "fontSize": 20,
+                        },
                         [
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                            "lineHeight": 20,
                           },
-                        ]
-                      }
-                      style={
+                          undefined,
+                        ],
                         {
-                          "borderRadius": 4,
-                          "height": 26,
-                          "width": 26,
-                        }
-                      }
-                      transition={null}
-                      width={26}
-                    />
-                  </View>
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
                 </View>
               </View>
-              <A11yIndexView
-                accessibilityLabel="I'm fine!"
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r5s:"
+              <View
+                accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message I'm fine!.  "
+                accessible={true}
                 style={
-                  {
-                    "flex": 1,
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
                   style={
                     {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "alignItems": "flex-end",
+                      "width": 36,
                     }
                   }
                 >
                   <View
-                    testID="message-content-I'm fine!"
+                    accessible={true}
+                    style={
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 20,
+                          "width": 20,
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="avatar"
                   >
-                    <Text
-                      accessibilityLabel="I'm fine!"
-                      numberOfLines={1}
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={307}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
                       style={
                         [
                           {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
                           },
                           {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
+                            "cursor": undefined,
                           },
                         ]
                       }
-                      testID="message-preview-I'm fine!"
+                      underlayColor="#E4E7EA"
                     >
-                      I'm fine!
-                    </Text>
-                  </View>
-                </View>
-              </A11yIndexView>
-            </View>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r5t:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r5t:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
+                        }
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={20}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 20,
+                              "width": 20,
+                            }
+                          }
+                          transition={null}
+                          width={20}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
+                  </View>
+                </View>
+                <A11yIndexView
+                  accessibilityLabel="I'm fine!"
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r5l:"
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-I'm fine!"
+                    >
+                      <Text
+                        accessibilityLabel="I'm fine!"
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
+                        }
+                        testID="message-preview-I'm fine!"
+                      >
+                        I'm fine!
+                      </Text>
+                    </View>
+                  </View>
+                </A11yIndexView>
+              </View>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r5m:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r5m:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
               "min": undefined,
               "now": undefined,
               "text": undefined,
@@ -84779,315 +92811,354 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
-                {
-                  "flexDirection": "column",
-                  "gap": 8,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 4,
-                  "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
+            style={{}}
           >
             <View
               style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "gap": 10,
-                }
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
               }
-              testID="message-thread-replied-on-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
             >
               <View
                 style={
                   {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "gap": 10,
                   }
                 }
+                testID="message-thread-replied-on-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#095AD2",
-                        "fontSize": 26,
-                      },
+                    {
+                      "alignItems": "flex-end",
+                      "width": 36,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 26,
+                          "color": "#095AD2",
+                          "fontSize": 20,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <Text
-                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                numberOfLines={1}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 22,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#2F343D",
-                      "lineHeight": undefined,
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "flex": 1,
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ]
-                }
-                testID="markdown-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-              >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              </Text>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "marginLeft": 4,
-                    "marginRight": 4,
-                  }
-                }
-              >
+                        [
+                          {
+                            "lineHeight": 20,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
                 <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                  accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "color": "#6C727A",
-                        "fontSize": 26,
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
                       },
-                      [
-                        {
-                          "lineHeight": 26,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "color": "#2F343D",
+                        "lineHeight": undefined,
+                      },
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#095AD2",
                       },
-                      {},
                     ]
                   }
+                  testID="markdown-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                 >
-                  
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                 </Text>
-              </View>
-            </View>
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message I'm fine!.  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
-                  }
-                }
-              >
                 <View
-                  accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 26,
-                        "width": 26,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "marginLeft": 4,
+                      "marginRight": 4,
+                    }
                   }
-                  testID="avatar"
                 >
-                  <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
                     style={
-                      {
-                        "opacity": 1,
-                      }
-                    }
-                  >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
+                      [
                         {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={26}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
+                          "color": "#6C727A",
+                          "fontSize": 20,
+                        },
                         [
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                            "lineHeight": 20,
                           },
-                        ]
-                      }
-                      style={
+                          undefined,
+                        ],
                         {
-                          "borderRadius": 4,
-                          "height": 26,
-                          "width": 26,
-                        }
-                      }
-                      transition={null}
-                      width={26}
-                    />
-                  </View>
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
                 </View>
               </View>
-              <A11yIndexView
-                accessibilityLabel="I'm fine!"
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r5t:"
+              <View
+                accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message I'm fine!.  "
+                accessible={true}
                 style={
-                  {
-                    "flex": 1,
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
                   style={
                     {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "alignItems": "flex-end",
+                      "width": 36,
                     }
                   }
                 >
                   <View
-                    testID="message-content-I'm fine!"
+                    accessible={true}
+                    style={
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 20,
+                          "width": 20,
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="avatar"
                   >
-                    <Text
-                      accessibilityLabel="I'm fine!"
-                      numberOfLines={1}
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={308}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
                       style={
                         [
                           {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
                           },
                           {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
+                            "cursor": undefined,
                           },
                         ]
                       }
-                      testID="message-preview-I'm fine!"
+                      underlayColor="#E4E7EA"
                     >
-                      I'm fine!
-                    </Text>
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
+                        }
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={20}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 20,
+                              "width": 20,
+                            }
+                          }
+                          transition={null}
+                          width={20}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
                 </View>
-              </A11yIndexView>
+                <A11yIndexView
+                  accessibilityLabel="I'm fine!"
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r5m:"
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-I'm fine!"
+                    >
+                      <Text
+                        accessibilityLabel="I'm fine!"
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
+                        }
+                        testID="message-preview-I'm fine!"
+                      >
+                        I'm fine!
+                      </Text>
+                    </View>
+                  </View>
+                </A11yIndexView>
+              </View>
             </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r5u:"
+      orderKey=":r5n:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r5u:"
+        orderKey=":r5n:"
       >
         <View
           accessibilityState={
@@ -85120,315 +93191,354 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
-                {
-                  "flexDirection": "column",
-                  "gap": 8,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 4,
-                  "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
+            style={{}}
           >
             <View
               style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "gap": 10,
-                }
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
               }
-              testID="message-thread-replied-on-How are you?"
             >
               <View
                 style={
                   {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "gap": 10,
                   }
                 }
+                testID="message-thread-replied-on-How are you?"
               >
+                <View
+                  style={
+                    {
+                      "alignItems": "flex-end",
+                      "width": 36,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#095AD2",
+                          "fontSize": 20,
+                        },
+                        [
+                          {
+                            "lineHeight": 20,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
                 <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                  accessibilityLabel="How are you?"
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "color": "#095AD2",
-                        "fontSize": 26,
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
                       },
-                      [
-                        {
-                          "lineHeight": 26,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "color": "#2F343D",
+                        "lineHeight": undefined,
                       },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <Text
-                accessibilityLabel="How are you?"
-                numberOfLines={1}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 22,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#2F343D",
-                      "lineHeight": undefined,
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "flex": 1,
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ]
-                }
-                testID="markdown-preview-How are you?"
-              >
-                How are you?
-              </Text>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "marginLeft": 4,
-                    "marginRight": 4,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
                       {
-                        "color": "#6C727A",
-                        "fontSize": 26,
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "textAlign": "left",
                       },
-                      [
-                        {
-                          "lineHeight": 26,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "color": "#095AD2",
                       },
-                      {},
                     ]
                   }
+                  testID="markdown-preview-How are you?"
                 >
-                  
+                  How are you?
                 </Text>
-              </View>
-            </View>
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
-                  }
-                }
-              >
                 <View
-                  accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 26,
-                        "width": 26,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "marginLeft": 4,
+                      "marginRight": 4,
+                    }
                   }
-                  testID="avatar"
                 >
-                  <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
                     style={
-                      {
-                        "opacity": 1,
-                      }
-                    }
-                  >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
+                      [
                         {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={26}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
+                          "color": "#6C727A",
+                          "fontSize": 20,
+                        },
                         [
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                            "lineHeight": 20,
                           },
-                        ]
-                      }
-                      style={
+                          undefined,
+                        ],
                         {
-                          "borderRadius": 4,
-                          "height": 26,
-                          "width": 26,
-                        }
-                      }
-                      transition={null}
-                      width={26}
-                    />
-                  </View>
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
                 </View>
               </View>
-              <A11yIndexView
-                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r5u:"
+              <View
+                accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
+                accessible={true}
                 style={
-                  {
-                    "flex": 1,
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
                   style={
                     {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "alignItems": "flex-end",
+                      "width": 36,
                     }
                   }
                 >
                   <View
-                    testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                    accessible={true}
+                    style={
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 20,
+                          "width": 20,
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="avatar"
                   >
-                    <Text
-                      accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                      numberOfLines={1}
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={309}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
                       style={
                         [
                           {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
                           },
                           {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
+                            "cursor": undefined,
                           },
                         ]
                       }
-                      testID="message-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      underlayColor="#E4E7EA"
                     >
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                    </Text>
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
+                        }
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={20}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 20,
+                              "width": 20,
+                            }
+                          }
+                          transition={null}
+                          width={20}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
                 </View>
-              </A11yIndexView>
+                <A11yIndexView
+                  accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r5n:"
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                    >
+                      <Text
+                        accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
+                        }
+                        testID="message-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      >
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                      </Text>
+                    </View>
+                  </View>
+                </A11yIndexView>
+              </View>
             </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r5v:"
+      orderKey=":r5o:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r5v:"
+        orderKey=":r5o:"
       >
         <View
           accessibilityState={
@@ -85461,315 +93571,354 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
-                {
-                  "flexDirection": "column",
-                  "gap": 8,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 4,
-                  "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
+            style={{}}
           >
             <View
               style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "gap": 10,
-                }
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
               }
-              testID="message-thread-replied-on-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
             >
               <View
                 style={
                   {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "gap": 10,
                   }
                 }
+                testID="message-thread-replied-on-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#095AD2",
-                        "fontSize": 26,
-                      },
+                    {
+                      "alignItems": "flex-end",
+                      "width": 36,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 26,
+                          "color": "#095AD2",
+                          "fontSize": 20,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <Text
-                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                numberOfLines={1}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 22,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#2F343D",
-                      "lineHeight": undefined,
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "flex": 1,
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ]
-                }
-                testID="markdown-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-              >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              </Text>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "marginLeft": 4,
-                    "marginRight": 4,
-                  }
-                }
-              >
+                        [
+                          {
+                            "lineHeight": 20,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
                 <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                  accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "color": "#6C727A",
-                        "fontSize": 26,
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
                       },
-                      [
-                        {
-                          "lineHeight": 26,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "color": "#2F343D",
+                        "lineHeight": undefined,
+                      },
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#095AD2",
                       },
-                      {},
                     ]
                   }
+                  testID="markdown-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                 >
-                  
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                 </Text>
-              </View>
-            </View>
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
-                  }
-                }
-              >
                 <View
-                  accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 26,
-                        "width": 26,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "marginLeft": 4,
+                      "marginRight": 4,
+                    }
                   }
-                  testID="avatar"
                 >
-                  <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
                     style={
-                      {
-                        "opacity": 1,
-                      }
-                    }
-                  >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
+                      [
                         {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={26}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
+                          "color": "#6C727A",
+                          "fontSize": 20,
+                        },
                         [
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                            "lineHeight": 20,
                           },
-                        ]
-                      }
-                      style={
+                          undefined,
+                        ],
                         {
-                          "borderRadius": 4,
-                          "height": 26,
-                          "width": 26,
-                        }
-                      }
-                      transition={null}
-                      width={26}
-                    />
-                  </View>
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
                 </View>
               </View>
-              <A11yIndexView
-                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r5v:"
+              <View
+                accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
+                accessible={true}
                 style={
-                  {
-                    "flex": 1,
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
                   style={
                     {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "alignItems": "flex-end",
+                      "width": 36,
                     }
                   }
                 >
                   <View
-                    testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                  >
-                    <Text
-                      accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                      numberOfLines={1}
-                      style={
+                    accessible={true}
+                    style={
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 20,
+                          "width": 20,
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="avatar"
+                  >
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={310}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
+                      style={
                         [
                           {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
                           },
                           {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
+                            "cursor": undefined,
                           },
                         ]
                       }
-                      testID="message-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      underlayColor="#E4E7EA"
                     >
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                    </Text>
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
+                        }
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={20}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 20,
+                              "width": 20,
+                            }
+                          }
+                          transition={null}
+                          width={20}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
                 </View>
-              </A11yIndexView>
+                <A11yIndexView
+                  accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r5o:"
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                    >
+                      <Text
+                        accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
+                        }
+                        testID="message-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      >
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                      </Text>
+                    </View>
+                  </View>
+                </A11yIndexView>
+              </View>
             </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r60:"
+      orderKey=":r5p:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r60:"
+        orderKey=":r5p:"
       >
         <View
           accessibilityState={
@@ -85802,278 +93951,317 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
-                {
-                  "flexDirection": "column",
-                  "gap": 8,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 4,
-                  "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
+            style={{}}
           >
             <View
               style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "gap": 10,
-                }
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
               }
-              testID="message-thread-replied-on-Thread with attachment"
             >
               <View
                 style={
                   {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "gap": 10,
                   }
                 }
+                testID="message-thread-replied-on-Thread with attachment"
               >
+                <View
+                  style={
+                    {
+                      "alignItems": "flex-end",
+                      "width": 36,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#095AD2",
+                          "fontSize": 20,
+                        },
+                        [
+                          {
+                            "lineHeight": 20,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
                 <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                  accessibilityLabel="Thread with attachment"
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "color": "#095AD2",
-                        "fontSize": 26,
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
                       },
-                      [
-                        {
-                          "lineHeight": 26,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "color": "#2F343D",
+                        "lineHeight": undefined,
+                      },
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#095AD2",
                       },
-                      {},
                     ]
                   }
+                  testID="markdown-preview-Thread with attachment"
                 >
-                  
+                  Thread with attachment
                 </Text>
-              </View>
-              <Text
-                accessibilityLabel="Thread with attachment"
-                numberOfLines={1}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 22,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#2F343D",
-                      "lineHeight": undefined,
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "flex": 1,
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    },
+                <View
+                  style={
                     {
-                      "color": "#095AD2",
-                    },
-                  ]
-                }
-                testID="markdown-preview-Thread with attachment"
-              >
-                Thread with attachment
-              </Text>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "marginLeft": 4,
-                    "marginRight": 4,
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "marginLeft": 4,
+                      "marginRight": 4,
+                    }
                   }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 26,
-                      },
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 26,
+                          "color": "#6C727A",
+                          "fontSize": 20,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
+                        [
+                          {
+                            "lineHeight": 20,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
               </View>
-            </View>
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message undefined.  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
-              }
-            >
               <View
+                accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message undefined.  "
+                accessible={true}
                 style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
-                  accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 26,
-                        "width": 26,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "alignItems": "flex-end",
+                      "width": 36,
+                    }
                   }
-                  testID="avatar"
                 >
                   <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
                     accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
-                      {
-                        "opacity": 1,
-                      }
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 20,
+                          "width": 20,
+                        },
+                        undefined,
+                      ]
                     }
+                    testID="avatar"
                   >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
-                        {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={26}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={311}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
+                      style={
                         [
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
                           },
                         ]
                       }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 26,
-                          "width": 26,
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
                         }
-                      }
-                      transition={null}
-                      width={26}
-                    />
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={20}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 20,
+                              "width": 20,
+                            }
+                          }
+                          transition={null}
+                          width={20}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
                 </View>
-              </View>
-              <A11yIndexView
-                accessibilityLabel=""
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r60:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
+                <A11yIndexView
+                  accessibilityLabel=""
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r5p:"
                   style={
                     {
                       "flex": 1,
-                      "marginLeft": 10,
                     }
                   }
                 >
                   <View
-                    testID="message-content-"
-                  />
-                </View>
-              </A11yIndexView>
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-"
+                    />
+                  </View>
+                </A11yIndexView>
+              </View>
             </View>
           </View>
         </View>
@@ -86083,7 +94271,7 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
 </RCTScrollView>
 `;
 
-exports[`Story Snapshots: Pinned should match snapshot 1`] = `
+exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] = `
 <RCTScrollView
   style={
     {
@@ -86093,13 +94281,13 @@ exports[`Story Snapshots: Pinned should match snapshot 1`] = `
 >
   <View>
     <A11yOrderView
-      orderKey=":r61:"
+      orderKey=":r5q:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r61:"
+        orderKey=":r5q:"
       >
         <View
           accessibilityState={
@@ -86132,366 +94320,697 @@ exports[`Story Snapshots: Pinned should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message header.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message header"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r61:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  How are you?.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="How are you?"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r5q:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={312}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={313}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
                       >
-                        <Text
-                          allowFontScaling={false}
-                          selectable={false}
-                          style={
-                            [
-                              {
-                                "color": "#2F343D",
-                                "fontSize": 16,
-                              },
-                              [
-                                {
-                                  "lineHeight": 16,
-                                },
-                                {
-                                  "paddingLeft": 5,
-                                },
-                              ],
-                              {
-                                "fontFamily": "custom",
-                                "fontStyle": "normal",
-                                "fontWeight": "normal",
-                              },
-                              {},
-                            ]
-                          }
-                          testID="undefined-pinned"
+                        <View
+                          testID="message-content-How are you?"
                         >
-                          
-                        </Text>
-                      </View>
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message header"
-                      >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="How are you?"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  How are you?
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "alignItems": "center",
+                              "flexDirection": "row",
                             }
                           }
                         >
-                          <Text
+                          <View
                             style={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "paddingHorizontal": 12,
+                                  "paddingVertical": 8,
                                 },
                                 {
-                                  "color": "#2F343D",
+                                  "backgroundColor": "#1D74F5",
                                 },
                               ]
                             }
+                            testID="message-thread-button-How are you?"
                           >
                             <Text
                               style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 12,
+                                    "fontWeight": "600",
+                                    "lineHeight": 16,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#FFFFFF",
+                                  },
+                                ]
+                              }
+                            >
+                              View thread
+                            </Text>
+                          </View>
+                          <View
+                            style={
+                              [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
+                                  "alignItems": "center",
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                },
+                                {
+                                  "flex": 1,
+                                  "marginLeft": 12,
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "flex": 1,
+                                  "flexDirection": "row",
                                 }
                               }
                             >
-                              <Text
-                                accessibilityLabel="Message header"
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "marginRight": 8,
+                                  }
+                                }
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 31.200000000000003,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 31.200000000000003,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                                <Text
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 10,
+                                        "fontWeight": "600",
+                                        "marginLeft": 2,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#6C727A",
+                                      },
+                                    ]
+                                  }
+                                  testID="thread-count-1"
+                                >
+                                  1
+                                </Text>
+                              </View>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "marginRight": 8,
+                                  }
+                                }
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 31.200000000000003,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 31.200000000000003,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                                <Text
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 10,
+                                        "fontWeight": "600",
+                                        "marginLeft": 2,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#6C727A",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  0
+                                </Text>
+                              </View>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                }
+                              }
+                            >
+                              <View
                                 style={
                                   [
                                     {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
+                                      "borderRadius": 4,
+                                      "height": 8,
+                                      "marginRight": 8,
+                                      "width": 8,
                                     },
                                     {
-                                      "color": "#2F343D",
+                                      "backgroundColor": "#6C727A",
+                                    },
+                                  ]
+                                }
+                              />
+                              <RNGestureHandlerButton
+                                activeOpacity={1}
+                                collapsable={false}
+                                delayLongPress={600}
+                                enabled={true}
+                                handlerTag={314}
+                                handlerType="NativeViewGestureHandler"
+                                innerRef={null}
+                                onActiveStateChange={[Function]}
+                                onGestureHandlerEvent={[Function]}
+                                onGestureHandlerStateChange={[Function]}
+                                onPress={[Function]}
+                                rippleColor="#E4E7EA"
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": undefined,
+                                      "borderRadius": undefined,
+                                      "margin": undefined,
+                                      "marginBottom": undefined,
+                                      "marginEnd": undefined,
+                                      "marginHorizontal": undefined,
+                                      "marginLeft": undefined,
+                                      "marginRight": undefined,
+                                      "marginStart": undefined,
+                                      "marginTop": undefined,
+                                      "marginVertical": undefined,
+                                    },
+                                    {
+                                      "cursor": undefined,
                                     },
                                   ]
                                 }
+                                underlayColor="#E4E7EA"
                               >
-                                Message header
-                              </Text>
-                            </Text>
-                          </Text>
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    {
+                                      "backgroundColor": "#E4E7EA",
+                                      "borderBottomLeftRadius": undefined,
+                                      "borderBottomRightRadius": undefined,
+                                      "borderRadius": undefined,
+                                      "borderTopLeftRadius": undefined,
+                                      "borderTopRightRadius": undefined,
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "opacity": 0,
+                                      "position": "absolute",
+                                      "right": 0,
+                                      "top": 0,
+                                    }
+                                  }
+                                />
+                                <View
+                                  accessibilityLabel="Follow thread"
+                                  style={{}}
+                                >
+                                  <Text
+                                    allowFontScaling={false}
+                                    selectable={false}
+                                    style={
+                                      [
+                                        {
+                                          "color": "#2F343D",
+                                          "fontSize": 31.200000000000003,
+                                        },
+                                        [
+                                          {
+                                            "lineHeight": 31.200000000000003,
+                                          },
+                                          undefined,
+                                        ],
+                                        {
+                                          "fontFamily": "custom",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "normal",
+                                        },
+                                        {},
+                                      ]
+                                    }
+                                  >
+                                    
+                                  </Text>
+                                </View>
+                              </RNGestureHandlerButton>
+                            </View>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r62:"
+      orderKey=":r5r:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r62:"
+        orderKey=":r5r:"
       >
         <View
           accessibilityState={
@@ -86524,155 +95043,142 @@ exports[`Story Snapshots: Pinned should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message without header.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message without header"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r62:"
+            <View
+              style={
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
+              }
             >
               <View
-                accessible={true}
                 style={
                   {
+                    "alignItems": "center",
                     "flexDirection": "row",
+                    "gap": 10,
                   }
                 }
+                testID="message-thread-replied-on-How are you?"
               >
                 <View
                   style={
                     {
                       "alignItems": "flex-end",
-                      "width": 36,
+                      "width": 46.800000000000004,
                     }
                   }
-                />
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#095AD2",
+                          "fontSize": 26,
+                        },
+                        [
+                          {
+                            "lineHeight": 26,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
+                <Text
+                  accessibilityLabel="How are you?"
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#2F343D",
+                        "lineHeight": undefined,
+                      },
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#095AD2",
+                      },
+                    ]
+                  }
+                  testID="markdown-preview-How are you?"
+                >
+                  How are you?
+                </Text>
                 <View
                   style={
                     {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "marginLeft": 4,
+                      "marginRight": 4,
                     }
                   }
                 >
-                  <View
-                    onLayout={[Function]}
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
                     style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
+                      [
                         {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message without header"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Message without header"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Message without header
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#2F343D",
-                          "fontSize": 16,
+                          "color": "#6C727A",
+                          "fontSize": 26,
                         },
                         [
                           {
-                            "lineHeight": 16,
-                          },
-                          {
-                            "paddingLeft": 5,
+                            "lineHeight": 26,
                           },
+                          undefined,
                         ],
                         {
                           "fontFamily": "custom",
@@ -86682,101 +95188,21 @@ exports[`Story Snapshots: Pinned should match snapshot 1`] = `
                         {},
                       ]
                     }
-                    testID="Message without header-pinned"
                   >
-                    
+                    
                   </Text>
                 </View>
               </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: PinnedLargeFont should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
-    <A11yOrderView
-      orderKey=":r63:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r63:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
-        >
-          <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message header.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
-          >
-            <A11yIndexView
-              accessibilityLabel="Message header"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r63:"
-            >
               <View
+                accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message I'm fine!.  "
                 accessible={true}
                 style={
-                  {
-                    "flexDirection": "row",
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
@@ -86793,319 +95219,178 @@ exports[`Story Snapshots: PinnedLargeFont should match snapshot 1`] = `
                       [
                         {
                           "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
+                          "height": 26,
+                          "width": 26,
                         },
+                        undefined,
                       ]
                     }
                     testID="avatar"
                   >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
                       collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={315}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
+                          },
+                        ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
+                      <View
+                        collapsable={false}
+                        style={
                           {
-                            "left": "50%",
-                            "top": "50%",
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
                           }
                         }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={26}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
                               },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                            ]
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
-                    </View>
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 26,
+                              "width": 26,
+                            }
+                          }
+                          transition={null}
+                          width={26}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
                 </View>
-                <View
+                <A11yIndexView
+                  accessibilityLabel="I'm fine!"
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r5r:"
                   style={
                     {
                       "flex": 1,
-                      "marginLeft": 10,
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
-                      style={
-                        {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
+                      testID="message-content-I'm fine!"
                     >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
+                      <Text
+                        accessibilityLabel="I'm fine!"
+                        numberOfLines={1}
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <Text
-                          allowFontScaling={false}
-                          selectable={false}
-                          style={
-                            [
-                              {
-                                "color": "#2F343D",
-                                "fontSize": 20.8,
-                              },
-                              [
-                                {
-                                  "lineHeight": 20.8,
-                                },
-                                {
-                                  "paddingLeft": 5,
-                                },
-                              ],
-                              {
-                                "fontFamily": "custom",
-                                "fontStyle": "normal",
-                                "fontWeight": "normal",
-                              },
-                              {},
-                            ]
-                          }
-                          testID="undefined-pinned"
-                        >
-                          
-                        </Text>
-                      </View>
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
                         }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message header"
+                        testID="message-preview-I'm fine!"
                       >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Message header"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Message header
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
+                        I'm fine!
+                      </Text>
                     </View>
                   </View>
-                </View>
+                </A11yIndexView>
               </View>
-            </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r64:"
+      orderKey=":r5s:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r64:"
+        orderKey=":r5s:"
       >
         <View
           accessibilityState={
@@ -87138,38 +95423,48 @@ exports[`Story Snapshots: PinnedLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message without header.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message without header"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r64:"
+            <View
+              style={
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
+              }
             >
               <View
-                accessible={true}
                 style={
                   {
+                    "alignItems": "center",
                     "flexDirection": "row",
+                    "gap": 10,
                   }
                 }
+                testID="message-thread-replied-on-Thread with emoji :) :joy:"
               >
                 <View
                   style={
@@ -87178,98 +95473,6 @@ exports[`Story Snapshots: PinnedLargeFont should match snapshot 1`] = `
                       "width": 46.800000000000004,
                     }
                   }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message without header"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Message without header"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Message without header
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
                 >
                   <Text
                     allowFontScaling={false}
@@ -87277,16 +95480,14 @@ exports[`Story Snapshots: PinnedLargeFont should match snapshot 1`] = `
                     style={
                       [
                         {
-                          "color": "#2F343D",
-                          "fontSize": 20.8,
+                          "color": "#095AD2",
+                          "fontSize": 26,
                         },
                         [
                           {
-                            "lineHeight": 20.8,
-                          },
-                          {
-                            "paddingLeft": 5,
+                            "lineHeight": 26,
                           },
+                          undefined,
                         ],
                         {
                           "fontFamily": "custom",
@@ -87296,38 +95497,280 @@ exports[`Story Snapshots: PinnedLargeFont should match snapshot 1`] = `
                         {},
                       ]
                     }
-                    testID="Message without header-pinned"
                   >
-                    
+                    
                   </Text>
                 </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: Reactions should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
+                <Text
+                  accessibilityLabel="Thread with emoji :) 😂"
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#2F343D",
+                        "lineHeight": undefined,
+                      },
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#095AD2",
+                      },
+                    ]
+                  }
+                  testID="markdown-preview-Thread with emoji :) 😂"
+                >
+                  Thread with emoji :) 😂
+                </Text>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "marginLeft": 4,
+                      "marginRight": 4,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#6C727A",
+                          "fontSize": 26,
+                        },
+                        [
+                          {
+                            "lineHeight": 26,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
+              </View>
+              <View
+                accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message I'm fine!.  "
+                accessible={true}
+                style={
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
+                }
+              >
+                <View
+                  style={
+                    {
+                      "alignItems": "flex-end",
+                      "width": 46.800000000000004,
+                    }
+                  }
+                >
+                  <View
+                    accessible={true}
+                    style={
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 26,
+                          "width": 26,
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="avatar"
+                  >
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={316}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
+                      style={
+                        [
+                          {
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
+                          },
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
+                        }
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={26}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 26,
+                              "width": 26,
+                            }
+                          }
+                          transition={null}
+                          width={26}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
+                  </View>
+                </View>
+                <A11yIndexView
+                  accessibilityLabel="I'm fine!"
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r5s:"
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-I'm fine!"
+                    >
+                      <Text
+                        accessibilityLabel="I'm fine!"
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
+                        }
+                        testID="message-preview-I'm fine!"
+                      >
+                        I'm fine!
+                      </Text>
+                    </View>
+                  </View>
+                </A11yIndexView>
+              </View>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
     <A11yOrderView
-      orderKey=":r65:"
+      orderKey=":r5t:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r65:"
+        orderKey=":r5t:"
       >
         <View
           accessibilityState={
@@ -87360,845 +95803,354 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Reactions.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Reactions"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r65:"
+            <View
+              style={
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
+              }
             >
               <View
-                accessible={true}
                 style={
                   {
+                    "alignItems": "center",
                     "flexDirection": "row",
+                    "gap": 10,
                   }
                 }
+                testID="message-thread-replied-on-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
               >
                 <View
                   style={
                     {
                       "alignItems": "flex-end",
-                      "width": 36,
+                      "width": 46.800000000000004,
                     }
                   }
                 >
-                  <View
-                    accessible={true}
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
                     style={
                       [
                         {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
+                          "color": "#095AD2",
+                          "fontSize": 26,
                         },
+                        [
+                          {
+                            "lineHeight": 26,
+                          },
+                          undefined,
+                        ],
                         {
-                          "marginTop": 4,
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        {},
                       ]
                     }
-                    testID="avatar"
                   >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
+                    
+                  </Text>
+                </View>
+                <Text
+                  accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#2F343D",
+                        "lineHeight": undefined,
+                      },
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#095AD2",
+                      },
+                    ]
+                  }
+                  testID="markdown-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                >
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                </Text>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "marginLeft": 4,
+                      "marginRight": 4,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
                         {
-                          "opacity": 1,
-                        }
-                      }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
-                            },
-                          ]
-                        }
-                        style={
+                          "color": "#6C727A",
+                          "fontSize": 26,
+                        },
+                        [
                           {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
+                            "lineHeight": 26,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
                 </View>
+              </View>
+              <View
+                accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message I'm fine!.  "
+                accessible={true}
+                style={
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
+                }
+              >
                 <View
                   style={
                     {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "alignItems": "flex-end",
+                      "width": 46.800000000000004,
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    accessible={true}
                     style={
-                      {
-                        "flex": 1,
-                      }
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 26,
+                          "width": 26,
+                        },
+                        undefined,
+                      ]
                     }
+                    testID="avatar"
                   >
-                    <View
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={317}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
                       style={
-                        {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
+                        [
+                          {
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
+                          },
+                        ]
                       }
+                      underlayColor="#E4E7EA"
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
                         collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
                           }
                         }
-                        testID="username-header-diego.mello"
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
                       >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
                           }
-                        >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
+                          height={26}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#6C727A",
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
                               },
                             ]
                           }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Reactions"
-                      >
-                        <View
                           style={
                             {
-                              "gap": 2,
+                              "borderRadius": 4,
+                              "height": 26,
+                              "width": 26,
                             }
                           }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Reactions"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Reactions
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
+                          transition={null}
+                          width={26}
+                        />
                       </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                            "flexWrap": "wrap",
-                            "gap": 4,
-                          }
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-reaction-:joy:"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
-                              }
-                            >
-                              😂
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#1D74F5",
-                                  },
-                                ]
-                              }
-                            >
-                              1
-                            </Text>
-                          </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#FFFFFF",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-reaction-:marioparty:"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#CBCED1",
-                                  "height": 28,
-                                },
-                              ]
-                            }
-                          >
-                            <ViewManagerAdapter_ExpoImage
-                              containerViewRef={"[React.ref]"}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
-                              }
-                              height={19}
-                              nativeViewRef={"[React.ref]"}
-                              onError={[Function]}
-                              onLoad={[Function]}
-                              onLoadStart={[Function]}
-                              onProgress={[Function]}
-                              placeholder={[]}
-                              source={
-                                [
-                                  {
-                                    "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
-                                  },
-                                ]
-                              }
-                              style={
-                                {
-                                  "height": 19,
-                                  "width": 19,
-                                }
-                              }
-                              transition={null}
-                              width={19}
-                            />
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#1D74F5",
-                                  },
-                                ]
-                              }
-                            >
-                              99
-                            </Text>
-                          </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#FFFFFF",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-reaction-:thinking:"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#CBCED1",
-                                  "height": 28,
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
-                              }
-                            >
-                              🤔
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#1D74F5",
-                                  },
-                                ]
-                              }
-                            >
-                              999
-                            </Text>
-                          </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#FFFFFF",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-reaction-:thinking:"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#CBCED1",
-                                  "height": 28,
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
-                              }
-                            >
-                              🤔
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#1D74F5",
-                                  },
-                                ]
-                              }
-                            >
-                              9999
-                            </Text>
-                          </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
+                    </RNGestureHandlerButton>
+                  </View>
+                </View>
+                <A11yIndexView
+                  accessibilityLabel="I'm fine!"
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r5t:"
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-I'm fine!"
+                    >
+                      <Text
+                        accessibilityLabel="I'm fine!"
+                        numberOfLines={1}
+                        style={
+                          [
                             {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
                             {
-                              "backgroundColor": "#FFFFFF",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-add-reaction"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#CBCED1",
-                                  "height": 28,
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              allowFontScaling={false}
-                              selectable={false}
-                              style={
-                                [
-                                  {
-                                    "color": "#1D74F5",
-                                    "fontSize": 20,
-                                  },
-                                  [
-                                    {
-                                      "lineHeight": 20,
-                                    },
-                                    undefined,
-                                  ],
-                                  {
-                                    "fontFamily": "custom",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "normal",
-                                  },
-                                  {},
-                                ]
-                              }
-                            >
-                              
-                            </Text>
-                          </View>
-                        </View>
-                      </View>
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
+                        }
+                        testID="message-preview-I'm fine!"
+                      >
+                        I'm fine!
+                      </Text>
                     </View>
                   </View>
-                </View>
+                </A11yIndexView>
               </View>
-            </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r66:"
+      orderKey=":r5u:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r66:"
+        orderKey=":r5u:"
       >
         <View
           accessibilityState={
@@ -88231,948 +96183,1417 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Multiple Reactions.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Multiple Reactions"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r66:"
+            <View
+              style={
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
+              }
             >
               <View
-                accessible={true}
                 style={
                   {
+                    "alignItems": "center",
                     "flexDirection": "row",
+                    "gap": 10,
                   }
                 }
+                testID="message-thread-replied-on-How are you?"
               >
                 <View
                   style={
                     {
                       "alignItems": "flex-end",
-                      "width": 36,
+                      "width": 46.800000000000004,
                     }
                   }
                 >
-                  <View
-                    accessible={true}
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
                     style={
                       [
                         {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
+                          "color": "#095AD2",
+                          "fontSize": 26,
                         },
+                        [
+                          {
+                            "lineHeight": 26,
+                          },
+                          undefined,
+                        ],
                         {
-                          "marginTop": 4,
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        {},
                       ]
                     }
-                    testID="avatar"
                   >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
+                    
+                  </Text>
+                </View>
+                <Text
+                  accessibilityLabel="How are you?"
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#2F343D",
+                        "lineHeight": undefined,
+                      },
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#095AD2",
+                      },
+                    ]
+                  }
+                  testID="markdown-preview-How are you?"
+                >
+                  How are you?
+                </Text>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "marginLeft": 4,
+                      "marginRight": 4,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
                         {
-                          "opacity": 1,
-                        }
-                      }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
-                            },
-                          ]
-                        }
-                        style={
+                          "color": "#6C727A",
+                          "fontSize": 26,
+                        },
+                        [
                           {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
+                            "lineHeight": 26,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
                 </View>
+              </View>
+              <View
+                accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
+                accessible={true}
+                style={
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
+                }
+              >
                 <View
                   style={
                     {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "alignItems": "flex-end",
+                      "width": 46.800000000000004,
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    accessible={true}
                     style={
-                      {
-                        "flex": 1,
-                      }
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 26,
+                          "width": 26,
+                        },
+                        undefined,
+                      ]
                     }
+                    testID="avatar"
                   >
-                    <View
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={318}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
                       style={
-                        {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
+                        [
+                          {
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
+                          },
+                        ]
                       }
+                      underlayColor="#E4E7EA"
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
                         collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
                           }
                         }
-                        testID="username-header-diego.mello"
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
                       >
-                        <Text
-                          numberOfLines={1}
-                          style={
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={26}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
                               },
                             ]
                           }
-                        >
-                          diego.mello
-                        </Text>
-                        <Text
                           style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#6C727A",
-                              },
-                            ]
+                            {
+                              "borderRadius": 4,
+                              "height": 26,
+                              "width": 26,
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                          transition={null}
+                          width={26}
+                        />
                       </View>
-                      <View
+                    </RNGestureHandlerButton>
+                  </View>
+                </View>
+                <A11yIndexView
+                  accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r5u:"
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                    >
+                      <Text
+                        accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                        numberOfLines={1}
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
                         }
-                      />
+                        testID="message-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      >
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                      </Text>
                     </View>
-                    <View
-                      style={
+                  </View>
+                </A11yIndexView>
+              </View>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r5v:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r5v:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <View
+              style={
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
+              }
+            >
+              <View
+                style={
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "gap": 10,
+                  }
+                }
+                testID="message-thread-replied-on-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+              >
+                <View
+                  style={
+                    {
+                      "alignItems": "flex-end",
+                      "width": 46.800000000000004,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
                         {
-                          "gap": 4,
-                        }
+                          "color": "#095AD2",
+                          "fontSize": 26,
+                        },
+                        [
+                          {
+                            "lineHeight": 26,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
+                <Text
+                  accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#2F343D",
+                        "lineHeight": undefined,
+                      },
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#095AD2",
+                      },
+                    ]
+                  }
+                  testID="markdown-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                >
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                </Text>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "marginLeft": 4,
+                      "marginRight": 4,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#6C727A",
+                          "fontSize": 26,
+                        },
+                        [
+                          {
+                            "lineHeight": 26,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
+              </View>
+              <View
+                accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
+                accessible={true}
+                style={
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
+                }
+              >
+                <View
+                  style={
+                    {
+                      "alignItems": "flex-end",
+                      "width": 46.800000000000004,
+                    }
+                  }
+                >
+                  <View
+                    accessible={true}
+                    style={
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 26,
+                          "width": 26,
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="avatar"
+                  >
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={319}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
+                      style={
+                        [
+                          {
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
+                          },
+                        ]
                       }
+                      underlayColor="#E4E7EA"
                     >
                       <View
-                        testID="message-content-Multiple Reactions"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Multiple Reactions"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Multiple Reactions
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
-                      <View
+                        collapsable={false}
                         style={
                           {
-                            "flexDirection": "row",
-                            "flexWrap": "wrap",
-                            "gap": 4,
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
                           }
                         }
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
                       >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
                             {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
+                              "left": "50%",
+                              "top": "50%",
                             }
                           }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-reaction-:marioparty:"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
+                          height={26}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
                                 },
-                              ]
-                            }
-                          >
-                            <ViewManagerAdapter_ExpoImage
-                              containerViewRef={"[React.ref]"}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
-                              }
-                              height={19}
-                              nativeViewRef={"[React.ref]"}
-                              onError={[Function]}
-                              onLoad={[Function]}
-                              onLoadStart={[Function]}
-                              onProgress={[Function]}
-                              placeholder={[]}
-                              source={
-                                [
-                                  {
-                                    "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
-                                  },
-                                ]
-                              }
-                              style={
-                                {
-                                  "height": 19,
-                                  "width": 19,
-                                }
-                              }
-                              transition={null}
-                              width={19}
-                            />
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#1D74F5",
-                                  },
-                                ]
-                              }
-                            >
-                              1
-                            </Text>
-                          </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                              },
+                            ]
                           }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
                           style={
                             {
-                              "backgroundColor": "#E4E7EA",
                               "borderRadius": 4,
-                              "opacity": 1,
+                              "height": 26,
+                              "width": 26,
                             }
                           }
-                          testID="message-reaction-:react_rocket:"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
-                                },
-                              ]
-                            }
-                          >
-                            <ViewManagerAdapter_ExpoImage
-                              containerViewRef={"[React.ref]"}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
-                              }
-                              height={19}
-                              nativeViewRef={"[React.ref]"}
-                              onError={[Function]}
-                              onLoad={[Function]}
-                              onLoadStart={[Function]}
-                              onProgress={[Function]}
-                              placeholder={[]}
-                              source={
-                                [
-                                  {
-                                    "uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
-                                  },
-                                ]
-                              }
-                              style={
-                                {
-                                  "height": 19,
-                                  "width": 19,
-                                }
-                              }
-                              transition={null}
-                              width={19}
-                            />
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#1D74F5",
-                                  },
-                                ]
-                              }
-                            >
-                              1
-                            </Text>
-                          </View>
-                        </View>
-                        <View
-                          accessibilityState={
+                          transition={null}
+                          width={26}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
+                  </View>
+                </View>
+                <A11yIndexView
+                  accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r5v:"
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                    >
+                      <Text
+                        accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                        numberOfLines={1}
+                        style={
+                          [
                             {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
                             {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
+                        }
+                        testID="message-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      >
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                      </Text>
+                    </View>
+                  </View>
+                </A11yIndexView>
+              </View>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r60:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r60:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <View
+              style={
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
+              }
+            >
+              <View
+                style={
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "gap": 10,
+                  }
+                }
+                testID="message-thread-replied-on-Thread with attachment"
+              >
+                <View
+                  style={
+                    {
+                      "alignItems": "flex-end",
+                      "width": 46.800000000000004,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#095AD2",
+                          "fontSize": 26,
+                        },
+                        [
+                          {
+                            "lineHeight": 26,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
+                <Text
+                  accessibilityLabel="Thread with attachment"
+                  numberOfLines={1}
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#2F343D",
+                        "lineHeight": undefined,
+                      },
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#095AD2",
+                      },
+                    ]
+                  }
+                  testID="markdown-preview-Thread with attachment"
+                >
+                  Thread with attachment
+                </Text>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "marginLeft": 4,
+                      "marginRight": 4,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#6C727A",
+                          "fontSize": 26,
+                        },
+                        [
+                          {
+                            "lineHeight": 26,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
+              </View>
+              <View
+                accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message undefined.  "
+                accessible={true}
+                style={
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
+                }
+              >
+                <View
+                  style={
+                    {
+                      "alignItems": "flex-end",
+                      "width": 46.800000000000004,
+                    }
+                  }
+                >
+                  <View
+                    accessible={true}
+                    style={
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 26,
+                          "width": 26,
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="avatar"
+                  >
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={320}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
+                      style={
+                        [
+                          {
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
+                          },
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
                           }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
+                        }
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
                             {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
+                              "left": "50%",
+                              "top": "50%",
                             }
                           }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
+                          height={26}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                              },
+                            ]
+                          }
                           style={
                             {
-                              "backgroundColor": "#E4E7EA",
                               "borderRadius": 4,
-                              "opacity": 1,
+                              "height": 26,
+                              "width": 26,
                             }
                           }
-                          testID="message-reaction-:nyan_rocket:"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
-                                },
-                              ]
-                            }
-                          >
-                            <ViewManagerAdapter_ExpoImage
-                              containerViewRef={"[React.ref]"}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
-                              }
-                              height={19}
-                              nativeViewRef={"[React.ref]"}
-                              onError={[Function]}
-                              onLoad={[Function]}
-                              onLoadStart={[Function]}
-                              onProgress={[Function]}
-                              placeholder={[]}
-                              source={
-                                [
-                                  {
-                                    "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                  },
-                                ]
-                              }
-                              style={
-                                {
-                                  "height": 19,
-                                  "width": 19,
-                                }
-                              }
-                              transition={null}
-                              width={19}
-                            />
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#1D74F5",
-                                  },
-                                ]
-                              }
-                            >
-                              1
-                            </Text>
-                          </View>
-                        </View>
-                        <View
-                          accessibilityState={
+                          transition={null}
+                          width={26}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
+                  </View>
+                </View>
+                <A11yIndexView
+                  accessibilityLabel=""
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r60:"
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-"
+                    />
+                  </View>
+                </A11yIndexView>
+              </View>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: Pinned should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
+    <A11yOrderView
+      orderKey=":r61:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r61:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message header.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
+                }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message header"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r61:"
+              >
+                <View
+                  accessible={true}
+                  style={
+                    {
+                      "flexDirection": "row",
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  >
+                    <View
+                      accessible={true}
+                      style={
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
+                      }
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={321}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
                             {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
                             {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
                           collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
                           style={
                             {
                               "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
                             }
                           }
-                          testID="message-reaction-:heart:"
-                        >
-                          <View
-                            style={
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
                               [
                                 {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
                                 },
                               ]
                             }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
-                              }
-                            >
-                              ❤️
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#1D74F5",
-                                  },
-                                ]
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
                               }
-                            >
-                              1
-                            </Text>
-                          </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
                             }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
+                        {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
                           }
-                          accessible={true}
+                        }
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
                           collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={322}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
-                            {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
                           }
-                          testID="message-reaction-:dog:"
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
                           <View
+                            collapsable={false}
                             style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
-                                },
-                              ]
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
-                            >
-                              🐶
-                            </Text>
+                            }
+                          >
                             <Text
+                              numberOfLines={1}
                               style={
                                 [
                                   {
                                     "backgroundColor": "transparent",
+                                    "flexShrink": 1,
                                     "fontFamily": "Inter",
-                                    "fontSize": 14,
+                                    "fontSize": 16,
                                     "fontWeight": "600",
-                                    "lineHeight": 18,
+                                    "lineHeight": 22,
                                     "textAlign": "left",
                                   },
                                   {
-                                    "color": "#1D74F5",
+                                    "color": "#1F2329",
                                   },
                                 ]
                               }
                             >
-                              1
-                            </Text>
-                          </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-reaction-:grinning:"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
-                              }
-                            >
-                              😀
+                              diego.mello
                             </Text>
                             <Text
                               style={
@@ -89180,312 +97601,354 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                                   {
                                     "backgroundColor": "transparent",
                                     "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
                                     "lineHeight": 18,
                                     "textAlign": "left",
                                   },
                                   {
-                                    "color": "#1D74F5",
+                                    "color": "#6C727A",
                                   },
                                 ]
                               }
                             >
-                              1
+                              10:00 AM
                             </Text>
                           </View>
-                        </View>
+                        </RNGestureHandlerButton>
                         <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
                           style={
                             {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
+                              "flexDirection": "row",
                             }
                           }
-                          testID="message-reaction-:grimacing:"
                         >
-                          <View
+                          <Text
+                            allowFontScaling={false}
+                            selectable={false}
                             style={
                               [
                                 {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
+                                  "color": "#2F343D",
+                                  "fontSize": 16,
                                 },
+                                [
+                                  {
+                                    "lineHeight": 16,
+                                  },
+                                  {
+                                    "paddingLeft": 5,
+                                  },
+                                ],
                                 {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
+                                  "fontFamily": "custom",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "normal",
                                 },
+                                {},
                               ]
                             }
+                            testID="undefined-pinned"
                           >
-                            <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
+                            
+                          </Text>
+                        </View>
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Message header"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
                               }
-                            >
-                              😬
-                            </Text>
+                            }
+                          >
                             <Text
                               style={
                                 [
                                   {
                                     "backgroundColor": "transparent",
                                     "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
                                     "textAlign": "left",
                                   },
                                   {
-                                    "color": "#1D74F5",
+                                    "color": "#2F343D",
                                   },
                                 ]
                               }
                             >
-                              1
-                            </Text>
-                          </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-reaction-:grin:"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
-                              }
-                            >
-                              😁
-                            </Text>
-                            <Text
-                              style={
-                                [
+                              <Text
+                                style={
                                   {
                                     "backgroundColor": "transparent",
+                                    "flexShrink": 1,
                                     "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
+                                    "fontWeight": "400",
                                     "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#1D74F5",
-                                  },
-                                ]
-                              }
-                            >
-                              1
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Message header"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message header
+                                </Text>
+                              </Text>
                             </Text>
                           </View>
                         </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#FFFFFF",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r62:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r62:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message without header.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
+                }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message without header"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r62:"
+              >
+                <View
+                  accessible={true}
+                  style={
+                    {
+                      "flexDirection": "row",
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
+                        {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          {
+                            "gap": 4,
                           }
-                          testID="message-add-reaction"
+                        }
+                      >
+                        <View
+                          testID="message-content-Message without header"
                         >
                           <View
                             style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#CBCED1",
-                                  "height": 28,
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
-                              allowFontScaling={false}
-                              selectable={false}
                               style={
                                 [
                                   {
-                                    "color": "#1D74F5",
-                                    "fontSize": 20,
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
                                   },
-                                  [
-                                    {
-                                      "lineHeight": 20,
-                                    },
-                                    undefined,
-                                  ],
                                   {
-                                    "fontFamily": "custom",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "normal",
+                                    "color": "#2F343D",
                                   },
-                                  {},
                                 ]
                               }
                             >
-                              
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Message without header"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message without header
+                                </Text>
+                              </Text>
                             </Text>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#2F343D",
+                            "fontSize": 16,
+                          },
+                          [
+                            {
+                              "lineHeight": 16,
+                            },
+                            {
+                              "paddingLeft": 5,
+                            },
+                          ],
+                          {
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                      testID="Message without header-pinned"
+                    >
+                      
+                    </Text>
+                  </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -89494,7 +97957,7 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
 </RCTScrollView>
 `;
 
-exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
+exports[`Story Snapshots: PinnedLargeFont should match snapshot 1`] = `
 <RCTScrollView
   style={
     {
@@ -89504,13 +97967,13 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
 >
   <View>
     <A11yOrderView
-      orderKey=":r67:"
+      orderKey=":r63:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r67:"
+        orderKey=":r63:"
       >
         <View
           accessibilityState={
@@ -89543,824 +98006,411 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Reactions.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Reactions"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r67:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message header.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message header"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r63:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={323}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={324}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Reactions"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
-                          <Text
+                          />
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
-                            >
-                              <Text
-                                accessibilityLabel="Reactions"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Reactions
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                            "flexWrap": "wrap",
-                            "gap": 4,
-                          }
-                        }
-                      >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-reaction-:joy:"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
-                                },
-                              ]
                             }
                           >
                             <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
-                              }
-                            >
-                              😂
-                            </Text>
-                            <Text
+                              numberOfLines={1}
                               style={
                                 [
                                   {
                                     "backgroundColor": "transparent",
+                                    "flexShrink": 1,
                                     "fontFamily": "Inter",
-                                    "fontSize": 14,
+                                    "fontSize": 16,
                                     "fontWeight": "600",
-                                    "lineHeight": 18,
+                                    "lineHeight": 22,
                                     "textAlign": "left",
                                   },
                                   {
-                                    "color": "#1D74F5",
+                                    "color": "#1F2329",
                                   },
                                 ]
                               }
                             >
-                              1
+                              diego.mello
                             </Text>
                           </View>
-                        </View>
+                        </RNGestureHandlerButton>
                         <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
                           style={
                             {
-                              "backgroundColor": "#FFFFFF",
-                              "borderRadius": 4,
-                              "opacity": 1,
+                              "flexDirection": "row",
                             }
                           }
-                          testID="message-reaction-:marioparty:"
                         >
-                          <View
+                          <Text
+                            allowFontScaling={false}
+                            selectable={false}
                             style={
                               [
                                 {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#CBCED1",
-                                  "height": 28,
+                                  "color": "#2F343D",
+                                  "fontSize": 20.8,
                                 },
-                              ]
-                            }
-                          >
-                            <ViewManagerAdapter_ExpoImage
-                              containerViewRef={"[React.ref]"}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
-                              }
-                              height={19}
-                              nativeViewRef={"[React.ref]"}
-                              onError={[Function]}
-                              onLoad={[Function]}
-                              onLoadStart={[Function]}
-                              onProgress={[Function]}
-                              placeholder={[]}
-                              source={
-                                [
-                                  {
-                                    "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
-                                  },
-                                ]
-                              }
-                              style={
-                                {
-                                  "height": 19,
-                                  "width": 19,
-                                }
-                              }
-                              transition={null}
-                              width={19}
-                            />
-                            <Text
-                              style={
                                 [
                                   {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
-                                    "textAlign": "left",
+                                    "lineHeight": 20.8,
                                   },
                                   {
-                                    "color": "#1D74F5",
+                                    "paddingLeft": 5,
                                   },
-                                ]
-                              }
-                            >
-                              99
-                            </Text>
-                          </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#FFFFFF",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-reaction-:thinking:"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
+                                ],
                                 {
-                                  "borderColor": "#CBCED1",
-                                  "height": 28,
+                                  "fontFamily": "custom",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "normal",
                                 },
+                                {},
                               ]
                             }
+                            testID="undefined-pinned"
                           >
-                            <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
-                              }
-                            >
-                              🤔
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#1D74F5",
-                                  },
-                                ]
-                              }
-                            >
-                              999
-                            </Text>
-                          </View>
+                            
+                          </Text>
                         </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
+                      </View>
+                      <Text
+                        style={
+                          [
                             {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
                             {
-                              "backgroundColor": "#FFFFFF",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
                           }
-                          testID="message-reaction-:thinking:"
+                        }
+                      >
+                        <View
+                          testID="message-content-Message header"
                         >
                           <View
                             style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#CBCED1",
-                                  "height": 28,
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
-                            <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
-                              }
-                            >
-                              🤔
-                            </Text>
                             <Text
                               style={
                                 [
                                   {
                                     "backgroundColor": "transparent",
                                     "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
                                     "textAlign": "left",
                                   },
                                   {
-                                    "color": "#1D74F5",
+                                    "color": "#2F343D",
                                   },
                                 ]
                               }
                             >
-                              9999
-                            </Text>
-                          </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#FFFFFF",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-add-reaction"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#CBCED1",
-                                  "height": 28,
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              allowFontScaling={false}
-                              selectable={false}
-                              style={
-                                [
-                                  {
-                                    "color": "#1D74F5",
-                                    "fontSize": 26,
-                                  },
-                                  [
-                                    {
-                                      "lineHeight": 26,
-                                    },
-                                    undefined,
-                                  ],
+                              <Text
+                                style={
                                   {
-                                    "fontFamily": "custom",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "normal",
-                                  },
-                                  {},
-                                ]
-                              }
-                            >
-                              
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Message header"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message header
+                                </Text>
+                              </Text>
                             </Text>
                           </View>
                         </View>
@@ -90368,20 +98418,20 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r68:"
+      orderKey=":r64:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r68:"
+        orderKey=":r64:"
       >
         <View
           accessibilityState={
@@ -90414,1286 +98464,1172 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Multiple Reactions.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Multiple Reactions"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r68:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message without header.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message without header"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r64:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
                       }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
-                          }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
                     }
-                  }
-                >
+                  />
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
                             "gap": 4,
-                            "opacity": 1,
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
+                        <View
+                          testID="message-content-Message without header"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Message without header"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message without header
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
                       </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
                     </View>
+                  </View>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
+                  >
                     <Text
+                      allowFontScaling={false}
+                      selectable={false}
                       style={
                         [
                           {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
+                            "color": "#2F343D",
+                            "fontSize": 20.8,
                           },
+                          [
+                            {
+                              "lineHeight": 20.8,
+                            },
+                            {
+                              "paddingLeft": 5,
+                            },
+                          ],
                           {
-                            "color": "#6C727A",
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
                           },
+                          {},
                         ]
                       }
+                      testID="Message without header-pinned"
                     >
-                      10:00 AM
+                      
                     </Text>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: Reactions should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
+    <A11yOrderView
+      orderKey=":r65:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r65:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Reactions.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
+                }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Reactions"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r65:"
+              >
+                <View
+                  accessible={true}
+                  style={
+                    {
+                      "flexDirection": "row",
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  >
                     <View
+                      accessible={true}
                       style={
-                        {
-                          "gap": 4,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <View
-                        testID="message-content-Multiple Reactions"
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={325}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
                       >
                         <View
+                          collapsable={false}
                           style={
                             {
-                              "gap": 2,
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
                             }
                           }
-                        >
-                          <Text
-                            style={
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
                                 },
                               ]
                             }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
                               }
-                            >
-                              <Text
-                                accessibilityLabel="Multiple Reactions"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Multiple Reactions
-                              </Text>
-                            </Text>
-                          </Text>
+                            }
+                            transition={null}
+                            width={36}
+                          />
                         </View>
-                      </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
+                        {
+                          "flex": 1,
+                        }
+                      }
+                    >
                       <View
                         style={
                           {
+                            "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexWrap": "wrap",
-                            "gap": 4,
+                            "justifyContent": "space-between",
                           }
                         }
                       >
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
                           collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={326}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
-                            {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
                           }
-                          testID="message-reaction-:marioparty:"
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
                           <View
+                            collapsable={false}
                             style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
-                                },
-                              ]
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          >
-                            <ViewManagerAdapter_ExpoImage
-                              containerViewRef={"[React.ref]"}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
-                              height={19}
-                              nativeViewRef={"[React.ref]"}
-                              onError={[Function]}
-                              onLoad={[Function]}
-                              onLoadStart={[Function]}
-                              onProgress={[Function]}
-                              placeholder={[]}
-                              source={
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
                                 [
                                   {
-                                    "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
                                   },
                                 ]
                               }
-                              style={
-                                {
-                                  "height": 19,
-                                  "width": 19,
-                                }
-                              }
-                              transition={null}
-                              width={19}
-                            />
+                            >
+                              diego.mello
+                            </Text>
                             <Text
                               style={
                                 [
                                   {
                                     "backgroundColor": "transparent",
                                     "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
                                     "lineHeight": 18,
                                     "textAlign": "left",
                                   },
                                   {
-                                    "color": "#1D74F5",
+                                    "color": "#6C727A",
                                   },
                                 ]
                               }
                             >
-                              1
+                              10:00 AM
                             </Text>
                           </View>
-                        </View>
+                        </RNGestureHandlerButton>
                         <View
-                          accessibilityState={
+                          style={
                             {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
+                              "flexDirection": "row",
                             }
                           }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
                           }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-reaction-:react_rocket:"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
-                                },
-                              ]
+                        }
+                      >
+                        <View
+                          testID="message-content-Reactions"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
-                            <ViewManagerAdapter_ExpoImage
-                              containerViewRef={"[React.ref]"}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
-                              }
-                              height={19}
-                              nativeViewRef={"[React.ref]"}
-                              onError={[Function]}
-                              onLoad={[Function]}
-                              onLoadStart={[Function]}
-                              onProgress={[Function]}
-                              placeholder={[]}
-                              source={
-                                [
-                                  {
-                                    "uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
-                                  },
-                                ]
-                              }
-                              style={
-                                {
-                                  "height": 19,
-                                  "width": 19,
-                                }
-                              }
-                              transition={null}
-                              width={19}
-                            />
                             <Text
                               style={
                                 [
                                   {
                                     "backgroundColor": "transparent",
                                     "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
                                     "textAlign": "left",
                                   },
                                   {
-                                    "color": "#1D74F5",
+                                    "color": "#2F343D",
                                   },
                                 ]
                               }
                             >
-                              1
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Reactions"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Reactions
+                                </Text>
+                              </Text>
                             </Text>
                           </View>
                         </View>
                         <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
                           style={
                             {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
+                              "flexDirection": "row",
+                              "flexWrap": "wrap",
+                              "gap": 4,
                             }
                           }
-                          testID="message-reaction-:nyan_rocket:"
                         >
                           <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
                               [
                                 {
-                                  "alignItems": "center",
                                   "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
                                 },
                                 {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
+                                  "backgroundColor": "#E4E7EA",
                                 },
                               ]
                             }
+                            testID="message-reaction-:joy:"
                           >
-                            <ViewManagerAdapter_ExpoImage
-                              containerViewRef={"[React.ref]"}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
-                              }
-                              height={19}
-                              nativeViewRef={"[React.ref]"}
-                              onError={[Function]}
-                              onLoad={[Function]}
-                              onLoadStart={[Function]}
-                              onProgress={[Function]}
-                              placeholder={[]}
-                              source={
-                                [
-                                  {
-                                    "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                  },
-                                ]
-                              }
-                              style={
-                                {
-                                  "height": 19,
-                                  "width": 19,
-                                }
-                              }
-                              transition={null}
-                              width={19}
-                            />
-                            <Text
+                            <View
                               style={
                                 [
                                   {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
-                                    "textAlign": "left",
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
                                   },
                                   {
-                                    "color": "#1D74F5",
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
                                   },
                                 ]
                               }
                             >
-                              1
-                            </Text>
+                              <Text
+                                style={
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
+                                }
+                              >
+                                😂
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                1
+                              </Text>
+                            </View>
                           </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
                             }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
                             }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
                             }
-                          }
-                          testID="message-reaction-:heart:"
-                        >
-                          <View
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
                               [
                                 {
-                                  "alignItems": "center",
                                   "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
                                 },
                                 {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
+                                  "backgroundColor": "#FFFFFF",
                                 },
                               ]
                             }
+                            testID="message-reaction-:marioparty:"
                           >
-                            <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
-                              }
-                            >
-                              ❤️
-                            </Text>
-                            <Text
+                            <View
                               style={
                                 [
                                   {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
-                                    "textAlign": "left",
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
                                   },
                                   {
-                                    "color": "#1D74F5",
+                                    "borderColor": "#CBCED1",
+                                    "height": 28,
                                   },
                                 ]
                               }
                             >
-                              1
-                            </Text>
+                              <ViewManagerAdapter_ExpoImage
+                                containerViewRef={"[React.ref]"}
+                                contentFit="contain"
+                                contentPosition={
+                                  {
+                                    "left": "50%",
+                                    "top": "50%",
+                                  }
+                                }
+                                height={19}
+                                nativeViewRef={"[React.ref]"}
+                                onError={[Function]}
+                                onLoad={[Function]}
+                                onLoadStart={[Function]}
+                                onProgress={[Function]}
+                                placeholder={[]}
+                                source={
+                                  [
+                                    {
+                                      "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
+                                    },
+                                  ]
+                                }
+                                style={
+                                  {
+                                    "height": 19,
+                                    "width": 19,
+                                  }
+                                }
+                                transition={null}
+                                width={19}
+                              />
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                99
+                              </Text>
+                            </View>
                           </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
                             }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
                             }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
                             }
-                          }
-                          testID="message-reaction-:dog:"
-                        >
-                          <View
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
                               [
                                 {
-                                  "alignItems": "center",
                                   "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
                                 },
                                 {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
+                                  "backgroundColor": "#FFFFFF",
                                 },
                               ]
                             }
+                            testID="message-reaction-:thinking:"
                           >
-                            <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
-                              }
-                            >
-                              🐶
-                            </Text>
-                            <Text
+                            <View
                               style={
                                 [
                                   {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
-                                    "textAlign": "left",
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
                                   },
                                   {
-                                    "color": "#1D74F5",
+                                    "borderColor": "#CBCED1",
+                                    "height": 28,
                                   },
                                 ]
                               }
                             >
-                              1
-                            </Text>
+                              <Text
+                                style={
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
+                                }
+                              >
+                                🤔
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                999
+                              </Text>
+                            </View>
                           </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
                             }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
                             }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
                             }
-                          }
-                          testID="message-reaction-:grinning:"
-                        >
-                          <View
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
                               [
                                 {
-                                  "alignItems": "center",
                                   "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
                                 },
                                 {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
+                                  "backgroundColor": "#FFFFFF",
                                 },
                               ]
                             }
+                            testID="message-reaction-:thinking:"
                           >
-                            <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
-                              }
-                            >
-                              😀
-                            </Text>
-                            <Text
+                            <View
                               style={
                                 [
                                   {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
-                                    "textAlign": "left",
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
                                   },
                                   {
-                                    "color": "#1D74F5",
+                                    "borderColor": "#CBCED1",
+                                    "height": 28,
                                   },
                                 ]
                               }
                             >
-                              1
-                            </Text>
+                              <Text
+                                style={
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
+                                }
+                              >
+                                🤔
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                9999
+                              </Text>
+                            </View>
                           </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-reaction-:grimacing:"
-                        >
                           <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
-                              }
-                            >
-                              😬
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#1D74F5",
-                                  },
-                                ]
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
                               }
-                            >
-                              1
-                            </Text>
-                          </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
                             }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
                             }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#E4E7EA",
-                              "borderRadius": 4,
-                              "opacity": 1,
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
                             }
-                          }
-                          testID="message-reaction-:grin:"
-                        >
-                          <View
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
                               [
                                 {
-                                  "alignItems": "center",
                                   "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
                                 },
                                 {
-                                  "borderColor": "#1D74F5",
-                                  "height": 28,
+                                  "backgroundColor": "#FFFFFF",
                                 },
                               ]
                             }
+                            testID="message-add-reaction"
                           >
-                            <Text
-                              style={
-                                {
-                                  "color": "#ffffff",
-                                  "fontSize": 13,
-                                }
-                              }
-                            >
-                              😁
-                            </Text>
-                            <Text
+                            <View
                               style={
                                 [
                                   {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 14,
-                                    "fontWeight": "600",
-                                    "lineHeight": 18,
-                                    "textAlign": "left",
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
                                   },
                                   {
-                                    "color": "#1D74F5",
+                                    "borderColor": "#CBCED1",
+                                    "height": 28,
                                   },
                                 ]
                               }
                             >
-                              1
-                            </Text>
-                          </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          hitSlop={
-                            {
-                              "bottom": 4,
-                              "left": 4,
-                              "right": 4,
-                              "top": 4,
-                            }
-                          }
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#FFFFFF",
-                              "borderRadius": 4,
-                              "opacity": 1,
-                            }
-                          }
-                          testID="message-add-reaction"
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "gap": 4,
-                                  "justifyContent": "center",
-                                  "minWidth": 46.3,
-                                  "paddingHorizontal": 4,
-                                },
-                                {
-                                  "borderColor": "#CBCED1",
-                                  "height": 28,
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              allowFontScaling={false}
-                              selectable={false}
-                              style={
-                                [
-                                  {
-                                    "color": "#1D74F5",
-                                    "fontSize": 26,
-                                  },
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
                                   [
                                     {
-                                      "lineHeight": 26,
+                                      "color": "#1D74F5",
+                                      "fontSize": 20,
                                     },
-                                    undefined,
-                                  ],
-                                  {
-                                    "fontFamily": "custom",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "normal",
-                                  },
-                                  {},
-                                ]
-                              }
-                            >
-                              
-                            </Text>
+                                    [
+                                      {
+                                        "lineHeight": 20,
+                                      },
+                                      undefined,
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                            </View>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r69:"
+      orderKey=":r66:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r69:"
+        orderKey=":r66:"
       >
         <View
           accessibilityState={
@@ -91726,573 +99662,1350 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  How are you?.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="How are you?"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r69:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Multiple Reactions.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Multiple Reactions"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r66:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={327}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={328}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-How are you?"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Multiple Reactions"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="How are you?"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                How are you?
+                                <Text
+                                  accessibilityLabel="Multiple Reactions"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Multiple Reactions
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
                         <View
                           style={
-                            [
-                              {
-                                "alignItems": "center",
-                                "borderRadius": 4,
-                                "flexDirection": "row",
-                                "justifyContent": "center",
-                                "paddingHorizontal": 12,
-                                "paddingVertical": 8,
-                              },
-                              {
-                                "backgroundColor": "#1D74F5",
-                              },
-                            ]
+                            {
+                              "flexDirection": "row",
+                              "flexWrap": "wrap",
+                              "gap": 4,
+                            }
                           }
-                          testID="message-thread-button-How are you?"
                         >
-                          <Text
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 12,
-                                  "fontWeight": "600",
-                                  "lineHeight": 16,
-                                  "textAlign": "left",
+                                  "borderRadius": 4,
                                 },
                                 {
-                                  "color": "#FFFFFF",
+                                  "backgroundColor": "#E4E7EA",
                                 },
                               ]
                             }
-                          >
-                            View thread
-                          </Text>
-                        </View>
-                        <View
-                          style={
-                            [
-                              {
-                                "alignItems": "center",
-                                "flex": 1,
-                                "flexDirection": "row",
-                              },
-                              {
-                                "flex": 1,
-                                "marginLeft": 12,
-                              },
-                            ]
-                          }
-                        >
-                          <View
-                            style={
-                              {
-                                "flex": 1,
-                                "flexDirection": "row",
-                              }
-                            }
+                            testID="message-reaction-:marioparty:"
                           >
                             <View
                               style={
-                                {
-                                  "alignItems": "center",
-                                  "flexDirection": "row",
-                                  "marginRight": 8,
-                                }
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
                               }
                             >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
-                                style={
+                              <ViewManagerAdapter_ExpoImage
+                                containerViewRef={"[React.ref]"}
+                                contentFit="contain"
+                                contentPosition={
+                                  {
+                                    "left": "50%",
+                                    "top": "50%",
+                                  }
+                                }
+                                height={19}
+                                nativeViewRef={"[React.ref]"}
+                                onError={[Function]}
+                                onLoad={[Function]}
+                                onLoadStart={[Function]}
+                                onProgress={[Function]}
+                                placeholder={[]}
+                                source={
                                   [
                                     {
-                                      "color": "#2F343D",
-                                      "fontSize": 24,
-                                    },
-                                    [
-                                      {
-                                        "lineHeight": 24,
-                                      },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
                                     },
-                                    {},
                                   ]
                                 }
-                              >
-                                
-                              </Text>
+                                style={
+                                  {
+                                    "height": 19,
+                                    "width": 19,
+                                  }
+                                }
+                                transition={null}
+                                width={19}
+                              />
                               <Text
-                                numberOfLines={1}
                                 style={
                                   [
                                     {
                                       "backgroundColor": "transparent",
                                       "fontFamily": "Inter",
-                                      "fontSize": 10,
+                                      "fontSize": 14,
                                       "fontWeight": "600",
-                                      "marginLeft": 2,
+                                      "lineHeight": 18,
                                       "textAlign": "left",
                                     },
                                     {
-                                      "color": "#6C727A",
+                                      "color": "#1D74F5",
                                     },
                                   ]
                                 }
-                                testID="thread-count-1"
                               >
                                 1
                               </Text>
                             </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#E4E7EA",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:react_rocket:"
+                          >
                             <View
                               style={
-                                {
-                                  "alignItems": "center",
-                                  "flexDirection": "row",
-                                  "marginRight": 8,
-                                }
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
                               }
                             >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
-                                style={
+                              <ViewManagerAdapter_ExpoImage
+                                containerViewRef={"[React.ref]"}
+                                contentFit="contain"
+                                contentPosition={
+                                  {
+                                    "left": "50%",
+                                    "top": "50%",
+                                  }
+                                }
+                                height={19}
+                                nativeViewRef={"[React.ref]"}
+                                onError={[Function]}
+                                onLoad={[Function]}
+                                onLoadStart={[Function]}
+                                onProgress={[Function]}
+                                placeholder={[]}
+                                source={
                                   [
                                     {
-                                      "color": "#2F343D",
-                                      "fontSize": 24,
-                                    },
-                                    [
-                                      {
-                                        "lineHeight": 24,
-                                      },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
                                     },
-                                    {},
                                   ]
                                 }
-                              >
-                                
-                              </Text>
+                                style={
+                                  {
+                                    "height": 19,
+                                    "width": 19,
+                                  }
+                                }
+                                transition={null}
+                                width={19}
+                              />
                               <Text
-                                numberOfLines={1}
                                 style={
                                   [
                                     {
                                       "backgroundColor": "transparent",
                                       "fontFamily": "Inter",
-                                      "fontSize": 10,
+                                      "fontSize": 14,
                                       "fontWeight": "600",
-                                      "marginLeft": 2,
+                                      "lineHeight": 18,
                                       "textAlign": "left",
                                     },
                                     {
-                                      "color": "#6C727A",
+                                      "color": "#1D74F5",
                                     },
                                   ]
                                 }
                               >
-                                0
+                                1
                               </Text>
                             </View>
                           </View>
                           <View
-                            style={
+                            accessibilityState={
                               {
-                                "alignItems": "center",
-                                "flexDirection": "row",
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
                               }
                             }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#E4E7EA",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:nyan_rocket:"
                           >
                             <View
                               style={
                                 [
                                   {
+                                    "alignItems": "center",
                                     "borderRadius": 4,
-                                    "height": 8,
-                                    "marginRight": 8,
-                                    "width": 8,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
                                   },
                                   {
-                                    "backgroundColor": "#6C727A",
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
                                   },
                                 ]
                               }
-                            />
-                            <View
-                              accessibilityLabel="Follow thread"
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": undefined,
-                                  "expanded": undefined,
-                                  "selected": undefined,
+                            >
+                              <ViewManagerAdapter_ExpoImage
+                                containerViewRef={"[React.ref]"}
+                                contentFit="contain"
+                                contentPosition={
+                                  {
+                                    "left": "50%",
+                                    "top": "50%",
+                                  }
                                 }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
+                                height={19}
+                                nativeViewRef={"[React.ref]"}
+                                onError={[Function]}
+                                onLoad={[Function]}
+                                onLoadStart={[Function]}
+                                onProgress={[Function]}
+                                placeholder={[]}
+                                source={
+                                  [
+                                    {
+                                      "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                    },
+                                  ]
                                 }
-                              }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                {
-                                  "opacity": 1,
+                                style={
+                                  {
+                                    "height": 19,
+                                    "width": 19,
+                                  }
                                 }
-                              }
-                            >
+                                transition={null}
+                                width={19}
+                              />
                               <Text
-                                allowFontScaling={false}
-                                selectable={false}
                                 style={
                                   [
                                     {
-                                      "color": "#2F343D",
-                                      "fontSize": 24,
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
                                     },
-                                    [
-                                      {
-                                        "lineHeight": 24,
-                                      },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                1
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#E4E7EA",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:heart:"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
+                                }
+                              >
+                                ❤️
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                1
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#E4E7EA",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:dog:"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
+                                }
+                              >
+                                🐶
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                1
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#E4E7EA",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:grinning:"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
+                                }
+                              >
+                                😀
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                1
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#E4E7EA",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:grimacing:"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
+                                }
+                              >
+                                😬
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                1
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#E4E7EA",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:grin:"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
+                                }
+                              >
+                                😁
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                1
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#FFFFFF",
+                                },
+                              ]
+                            }
+                            testID="message-add-reaction"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1D74F5",
+                                      "fontSize": 20,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 20,
+                                      },
                                       undefined,
                                     ],
                                     {
@@ -92304,7 +101017,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                                   ]
                                 }
                               >
-                                
+                                
                               </Text>
                             </View>
                           </View>
@@ -92313,20 +101026,33 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r6a:"
+      orderKey=":r67:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r6a:"
+        orderKey=":r67:"
       >
         <View
           accessibilityState={
@@ -92359,1219 +101085,887 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
-                {
-                  "flexDirection": "column",
-                  "gap": 8,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 4,
-                  "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
+            style={{}}
           >
             <View
-              accessibilityLabel="diego.mello 10:00:00 AM  thread message I'm fine!.  "
+              accessibilityLabel="diego.mello 10:00:00 AM  Reactions.  "
               accessible={true}
               style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
-                }
-              >
-                <View
-                  accessible={true}
-                  style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 20,
-                        "width": 20,
-                      },
-                      undefined,
-                    ]
-                  }
-                  testID="avatar"
-                >
-                  <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      {
-                        "opacity": 1,
-                      }
-                    }
-                  >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
-                        {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={20}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
-                        [
-                          {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                          },
-                        ]
-                      }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 20,
-                          "width": 20,
-                        }
-                      }
-                      transition={null}
-                      width={20}
-                    />
-                  </View>
-                </View>
-              </View>
-              <A11yIndexView
-                accessibilityLabel="I'm fine!"
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r6a:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    testID="message-content-I'm fine!"
-                  >
-                    <Text
-                      accessibilityLabel="I'm fine!"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
-                          },
-                        ]
-                      }
-                      testID="message-preview-I'm fine!"
-                    >
-                      I'm fine!
-                    </Text>
-                  </View>
-                </View>
-              </A11yIndexView>
-            </View>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r6b:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r6b:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
-        >
-          <View
-            style={
-              [
                 {
                   "flexDirection": "column",
                   "gap": 8,
                   "paddingHorizontal": 12,
                   "paddingVertical": 4,
                   "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
-          >
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  thread message Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
+                }
               }
+              testID="message-undefined"
             >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
-                }
-              >
-                <View
-                  accessible={true}
-                  style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 20,
-                        "width": 20,
-                      },
-                      undefined,
-                    ]
-                  }
-                  testID="avatar"
-                >
-                  <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      {
-                        "opacity": 1,
-                      }
-                    }
-                  >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
-                        {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={20}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
-                        [
-                          {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                          },
-                        ]
-                      }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 20,
-                          "width": 20,
-                        }
-                      }
-                      transition={null}
-                      width={20}
-                    />
-                  </View>
-                </View>
-              </View>
               <A11yIndexView
-                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                accessibilityLabel="Reactions"
                 importantForAccessibility="yes"
                 orderFocusType={0}
                 orderIndex={2}
-                orderKey=":r6b:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
+                orderKey=":r67:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
                   >
-                    <Text
-                      accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                      numberOfLines={1}
+                    <View
+                      accessible={true}
                       style={
                         [
                           {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
                           },
                           {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
+                            "marginTop": 4,
                           },
                         ]
                       }
-                      testID="message-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      testID="avatar"
                     >
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                    </Text>
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={329}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
                   </View>
-                </View>
-              </A11yIndexView>
-            </View>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r6c:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r6c:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
-        >
-          <View
-            style={
-              [
-                {
-                  "flexDirection": "column",
-                  "gap": 8,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 4,
-                  "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
-          >
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  thread message undefined.  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
-                }
-              >
-                <View
-                  accessible={true}
-                  style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 20,
-                        "width": 20,
-                      },
-                      undefined,
-                    ]
-                  }
-                  testID="avatar"
-                >
                   <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
                       {
-                        "opacity": 1,
+                        "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
+                    <View
+                      onLayout={[Function]}
+                      style={
                         {
-                          "left": "50%",
-                          "top": "50%",
+                          "flex": 1,
                         }
                       }
-                      height={20}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
-                        [
+                    >
+                      <View
+                        style={
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                          },
-                        ]
-                      }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 20,
-                          "width": 20,
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
                         }
-                      }
-                      transition={null}
-                      width={20}
-                    />
-                  </View>
-                </View>
-              </View>
-              <A11yIndexView
-                accessibilityLabel=""
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r6c:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    testID="message-content-"
-                  />
-                </View>
-              </A11yIndexView>
-            </View>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
-    <A11yOrderView
-      orderKey=":r6d:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r6d:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
-        >
-          <View
-            accessibilityLabel="diego.mello 10:00:00 AM  How are you?.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
-          >
-            <A11yIndexView
-              accessibilityLabel="How are you?"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r6d:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                >
-                  <View
-                    accessible={true}
-                    style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
-                      }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
-                          }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={330}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-How are you?"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Reactions"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="How are you?"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                How are you?
+                                <Text
+                                  accessibilityLabel="Reactions"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Reactions
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
                         <View
                           style={
-                            [
-                              {
-                                "alignItems": "center",
-                                "borderRadius": 4,
-                                "flexDirection": "row",
-                                "justifyContent": "center",
-                                "paddingHorizontal": 12,
-                                "paddingVertical": 8,
-                              },
-                              {
-                                "backgroundColor": "#1D74F5",
-                              },
-                            ]
+                            {
+                              "flexDirection": "row",
+                              "flexWrap": "wrap",
+                              "gap": 4,
+                            }
                           }
-                          testID="message-thread-button-How are you?"
                         >
-                          <Text
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 12,
-                                  "fontWeight": "600",
-                                  "lineHeight": 16,
-                                  "textAlign": "left",
+                                  "borderRadius": 4,
                                 },
                                 {
-                                  "color": "#FFFFFF",
+                                  "backgroundColor": "#E4E7EA",
                                 },
                               ]
                             }
-                          >
-                            View thread
-                          </Text>
-                        </View>
-                        <View
-                          style={
-                            [
-                              {
-                                "alignItems": "center",
-                                "flex": 1,
-                                "flexDirection": "row",
-                              },
-                              {
-                                "flex": 1,
-                                "marginLeft": 12,
-                              },
-                            ]
-                          }
-                        >
-                          <View
-                            style={
-                              {
-                                "flex": 1,
-                                "flexDirection": "row",
-                              }
-                            }
+                            testID="message-reaction-:joy:"
                           >
                             <View
                               style={
-                                {
-                                  "alignItems": "center",
-                                  "flexDirection": "row",
-                                  "marginRight": 8,
-                                }
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                allowFontScaling={false}
-                                selectable={false}
                                 style={
-                                  [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 31.200000000000003,
-                                    },
-                                    [
-                                      {
-                                        "lineHeight": 31.200000000000003,
-                                      },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
                                 }
                               >
-                                
+                                😂
                               </Text>
                               <Text
-                                numberOfLines={1}
                                 style={
                                   [
                                     {
                                       "backgroundColor": "transparent",
                                       "fontFamily": "Inter",
-                                      "fontSize": 10,
+                                      "fontSize": 14,
                                       "fontWeight": "600",
-                                      "marginLeft": 2,
+                                      "lineHeight": 18,
                                       "textAlign": "left",
                                     },
                                     {
-                                      "color": "#6C727A",
+                                      "color": "#1D74F5",
                                     },
                                   ]
                                 }
-                                testID="thread-count-1"
                               >
                                 1
                               </Text>
                             </View>
-                            <View
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "flexDirection": "row",
-                                  "marginRight": 8,
-                                }
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
-                                style={
-                                  [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 31.200000000000003,
-                                    },
-                                    [
-                                      {
-                                        "lineHeight": 31.200000000000003,
-                                      },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
-                                }
-                              >
-                                
-                              </Text>
-                              <Text
-                                numberOfLines={1}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 10,
-                                      "fontWeight": "600",
-                                      "marginLeft": 2,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#6C727A",
-                                    },
-                                  ]
-                                }
-                              >
-                                0
-                              </Text>
-                            </View>
                           </View>
                           <View
-                            style={
+                            accessibilityState={
                               {
-                                "alignItems": "center",
-                                "flexDirection": "row",
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
                               }
                             }
-                          >
-                            <View
-                              style={
-                                [
-                                  {
-                                    "borderRadius": 4,
-                                    "height": 8,
-                                    "marginRight": 8,
-                                    "width": 8,
-                                  },
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#FFFFFF",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:marioparty:"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
                                   {
-                                    "backgroundColor": "#6C727A",
+                                    "borderColor": "#CBCED1",
+                                    "height": 28,
                                   },
                                 ]
                               }
-                            />
-                            <View
-                              accessibilityLabel="Follow thread"
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": undefined,
-                                  "expanded": undefined,
-                                  "selected": undefined,
+                            >
+                              <ViewManagerAdapter_ExpoImage
+                                containerViewRef={"[React.ref]"}
+                                contentFit="contain"
+                                contentPosition={
+                                  {
+                                    "left": "50%",
+                                    "top": "50%",
+                                  }
+                                }
+                                height={19}
+                                nativeViewRef={"[React.ref]"}
+                                onError={[Function]}
+                                onLoad={[Function]}
+                                onLoadStart={[Function]}
+                                onProgress={[Function]}
+                                placeholder={[]}
+                                source={
+                                  [
+                                    {
+                                      "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
+                                    },
+                                  ]
+                                }
+                                style={
+                                  {
+                                    "height": 19,
+                                    "width": 19,
+                                  }
+                                }
+                                transition={null}
+                                width={19}
+                              />
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
                                 }
+                              >
+                                99
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
                               }
-                              accessibilityValue={
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
                                 {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#FFFFFF",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:thinking:"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
+                                }
+                              >
+                                🤔
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
                                 }
+                              >
+                                999
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
                               }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
                                 {
-                                  "opacity": 1,
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#FFFFFF",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:thinking:"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
+                                }
+                              >
+                                🤔
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
                                 }
+                              >
+                                9999
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#FFFFFF",
+                                },
+                              ]
+                            }
+                            testID="message-add-reaction"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                    "height": 28,
+                                  },
+                                ]
                               }
                             >
                               <Text
@@ -93580,12 +101974,12 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                                 style={
                                   [
                                     {
-                                      "color": "#2F343D",
-                                      "fontSize": 31.200000000000003,
+                                      "color": "#1D74F5",
+                                      "fontSize": 26,
                                     },
                                     [
                                       {
-                                        "lineHeight": 31.200000000000003,
+                                        "lineHeight": 26,
                                       },
                                       undefined,
                                     ],
@@ -93598,7 +101992,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                                   ]
                                 }
                               >
-                                
+                                
                               </Text>
                             </View>
                           </View>
@@ -93607,20 +102001,20 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r6e:"
+      orderKey=":r68:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r6e:"
+        orderKey=":r68:"
       >
         <View
           accessibilityState={
@@ -93653,198 +102047,3621 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Multiple Reactions.  "
+              accessible={true}
+              style={
                 {
                   "flexDirection": "column",
                   "gap": 8,
                   "paddingHorizontal": 12,
                   "paddingVertical": 4,
                   "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
-          >
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  thread message I'm fine!.  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
+                }
               }
+              testID="message-undefined"
             >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
-                  }
-                }
+              <A11yIndexView
+                accessibilityLabel="Multiple Reactions"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r68:"
               >
                 <View
                   accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 26,
-                        "width": 26,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "flexDirection": "row",
+                    }
                   }
-                  testID="avatar"
                 >
                   <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
                       {
-                        "opacity": 1,
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
                       }
                     }
                   >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
-                        {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={26}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
+                    <View
+                      accessible={true}
+                      style={
                         [
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
                           },
                         ]
                       }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 26,
-                          "width": 26,
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={331}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
                         }
-                      }
-                      transition={null}
-                      width={26}
-                    />
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
                   </View>
-                </View>
-              </View>
-              <A11yIndexView
-                accessibilityLabel="I'm fine!"
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r6e:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    testID="message-content-I'm fine!"
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
                   >
-                    <Text
-                      accessibilityLabel="I'm fine!"
-                      numberOfLines={1}
+                    <View
+                      onLayout={[Function]}
                       style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
-                          },
-                        ]
+                        {
+                          "flex": 1,
+                        }
                       }
-                      testID="message-preview-I'm fine!"
                     >
-                      I'm fine!
-                    </Text>
-                  </View>
-                </View>
-              </A11yIndexView>
-            </View>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r6f:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={332}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Multiple Reactions"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Multiple Reactions"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Multiple Reactions
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                              "flexWrap": "wrap",
+                              "gap": 4,
+                            }
+                          }
+                        >
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#E4E7EA",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:marioparty:"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <ViewManagerAdapter_ExpoImage
+                                containerViewRef={"[React.ref]"}
+                                contentFit="contain"
+                                contentPosition={
+                                  {
+                                    "left": "50%",
+                                    "top": "50%",
+                                  }
+                                }
+                                height={19}
+                                nativeViewRef={"[React.ref]"}
+                                onError={[Function]}
+                                onLoad={[Function]}
+                                onLoadStart={[Function]}
+                                onProgress={[Function]}
+                                placeholder={[]}
+                                source={
+                                  [
+                                    {
+                                      "uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
+                                    },
+                                  ]
+                                }
+                                style={
+                                  {
+                                    "height": 19,
+                                    "width": 19,
+                                  }
+                                }
+                                transition={null}
+                                width={19}
+                              />
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                1
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#E4E7EA",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:react_rocket:"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <ViewManagerAdapter_ExpoImage
+                                containerViewRef={"[React.ref]"}
+                                contentFit="contain"
+                                contentPosition={
+                                  {
+                                    "left": "50%",
+                                    "top": "50%",
+                                  }
+                                }
+                                height={19}
+                                nativeViewRef={"[React.ref]"}
+                                onError={[Function]}
+                                onLoad={[Function]}
+                                onLoadStart={[Function]}
+                                onProgress={[Function]}
+                                placeholder={[]}
+                                source={
+                                  [
+                                    {
+                                      "uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
+                                    },
+                                  ]
+                                }
+                                style={
+                                  {
+                                    "height": 19,
+                                    "width": 19,
+                                  }
+                                }
+                                transition={null}
+                                width={19}
+                              />
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                1
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#E4E7EA",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:nyan_rocket:"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <ViewManagerAdapter_ExpoImage
+                                containerViewRef={"[React.ref]"}
+                                contentFit="contain"
+                                contentPosition={
+                                  {
+                                    "left": "50%",
+                                    "top": "50%",
+                                  }
+                                }
+                                height={19}
+                                nativeViewRef={"[React.ref]"}
+                                onError={[Function]}
+                                onLoad={[Function]}
+                                onLoadStart={[Function]}
+                                onProgress={[Function]}
+                                placeholder={[]}
+                                source={
+                                  [
+                                    {
+                                      "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                    },
+                                  ]
+                                }
+                                style={
+                                  {
+                                    "height": 19,
+                                    "width": 19,
+                                  }
+                                }
+                                transition={null}
+                                width={19}
+                              />
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                1
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#E4E7EA",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:heart:"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
+                                }
+                              >
+                                ❤️
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                1
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#E4E7EA",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:dog:"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
+                                }
+                              >
+                                🐶
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                1
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#E4E7EA",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:grinning:"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
+                                }
+                              >
+                                😀
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                1
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#E4E7EA",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:grimacing:"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
+                                }
+                              >
+                                😬
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                1
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#E4E7EA",
+                                },
+                              ]
+                            }
+                            testID="message-reaction-:grin:"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#1D74F5",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "color": "#ffffff",
+                                    "fontSize": 13,
+                                  }
+                                }
+                              >
+                                😁
+                              </Text>
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "600",
+                                      "lineHeight": 18,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1D74F5",
+                                    },
+                                  ]
+                                }
+                              >
+                                1
+                              </Text>
+                            </View>
+                          </View>
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              {
+                                "bottom": 4,
+                                "left": 4,
+                                "right": 4,
+                                "top": 4,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                },
+                                {
+                                  "backgroundColor": "#FFFFFF",
+                                },
+                              ]
+                            }
+                            testID="message-add-reaction"
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                    "justifyContent": "center",
+                                    "minWidth": 46.3,
+                                    "paddingHorizontal": 4,
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                    "height": 28,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1D74F5",
+                                      "fontSize": 26,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 26,
+                                      },
+                                      undefined,
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
+    <A11yOrderView
+      orderKey=":r69:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r69:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  How are you?.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
+                }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="How are you?"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r69:"
+              >
+                <View
+                  accessible={true}
+                  style={
+                    {
+                      "flexDirection": "row",
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  >
+                    <View
+                      accessible={true}
+                      style={
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
+                      }
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={333}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
+                        {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={334}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-How are you?"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="How are you?"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  How are you?
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "paddingHorizontal": 12,
+                                  "paddingVertical": 8,
+                                },
+                                {
+                                  "backgroundColor": "#1D74F5",
+                                },
+                              ]
+                            }
+                            testID="message-thread-button-How are you?"
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 12,
+                                    "fontWeight": "600",
+                                    "lineHeight": 16,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#FFFFFF",
+                                  },
+                                ]
+                              }
+                            >
+                              View thread
+                            </Text>
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                },
+                                {
+                                  "flex": 1,
+                                  "marginLeft": 12,
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "marginRight": 8,
+                                  }
+                                }
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 24,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 24,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                                <Text
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 10,
+                                        "fontWeight": "600",
+                                        "marginLeft": 2,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#6C727A",
+                                      },
+                                    ]
+                                  }
+                                  testID="thread-count-1"
+                                >
+                                  1
+                                </Text>
+                              </View>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "marginRight": 8,
+                                  }
+                                }
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 24,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 24,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                                <Text
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 10,
+                                        "fontWeight": "600",
+                                        "marginLeft": 2,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#6C727A",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  0
+                                </Text>
+                              </View>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  [
+                                    {
+                                      "borderRadius": 4,
+                                      "height": 8,
+                                      "marginRight": 8,
+                                      "width": 8,
+                                    },
+                                    {
+                                      "backgroundColor": "#6C727A",
+                                    },
+                                  ]
+                                }
+                              />
+                              <RNGestureHandlerButton
+                                activeOpacity={1}
+                                collapsable={false}
+                                delayLongPress={600}
+                                enabled={true}
+                                handlerTag={335}
+                                handlerType="NativeViewGestureHandler"
+                                innerRef={null}
+                                onActiveStateChange={[Function]}
+                                onGestureHandlerEvent={[Function]}
+                                onGestureHandlerStateChange={[Function]}
+                                onPress={[Function]}
+                                rippleColor="#E4E7EA"
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": undefined,
+                                      "borderRadius": undefined,
+                                      "margin": undefined,
+                                      "marginBottom": undefined,
+                                      "marginEnd": undefined,
+                                      "marginHorizontal": undefined,
+                                      "marginLeft": undefined,
+                                      "marginRight": undefined,
+                                      "marginStart": undefined,
+                                      "marginTop": undefined,
+                                      "marginVertical": undefined,
+                                    },
+                                    {
+                                      "cursor": undefined,
+                                    },
+                                  ]
+                                }
+                                underlayColor="#E4E7EA"
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    {
+                                      "backgroundColor": "#E4E7EA",
+                                      "borderBottomLeftRadius": undefined,
+                                      "borderBottomRightRadius": undefined,
+                                      "borderRadius": undefined,
+                                      "borderTopLeftRadius": undefined,
+                                      "borderTopRightRadius": undefined,
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "opacity": 0,
+                                      "position": "absolute",
+                                      "right": 0,
+                                      "top": 0,
+                                    }
+                                  }
+                                />
+                                <View
+                                  accessibilityLabel="Follow thread"
+                                  style={{}}
+                                >
+                                  <Text
+                                    allowFontScaling={false}
+                                    selectable={false}
+                                    style={
+                                      [
+                                        {
+                                          "color": "#2F343D",
+                                          "fontSize": 24,
+                                        },
+                                        [
+                                          {
+                                            "lineHeight": 24,
+                                          },
+                                          undefined,
+                                        ],
+                                        {
+                                          "fontFamily": "custom",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "normal",
+                                        },
+                                        {},
+                                      ]
+                                    }
+                                  >
+                                    
+                                  </Text>
+                                </View>
+                              </RNGestureHandlerButton>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r6a:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r6a:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <View
+              style={
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
+              }
+            >
+              <View
+                accessibilityLabel="diego.mello 10:00:00 AM  thread message I'm fine!.  "
+                accessible={true}
+                style={
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
+                }
+              >
+                <View
+                  style={
+                    {
+                      "alignItems": "flex-end",
+                      "width": 36,
+                    }
+                  }
+                >
+                  <View
+                    accessible={true}
+                    style={
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 20,
+                          "width": 20,
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="avatar"
+                  >
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={336}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
+                      style={
+                        [
+                          {
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
+                          },
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
+                        }
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={20}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 20,
+                              "width": 20,
+                            }
+                          }
+                          transition={null}
+                          width={20}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
+                  </View>
+                </View>
+                <A11yIndexView
+                  accessibilityLabel="I'm fine!"
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r6a:"
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-I'm fine!"
+                    >
+                      <Text
+                        accessibilityLabel="I'm fine!"
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
+                        }
+                        testID="message-preview-I'm fine!"
+                      >
+                        I'm fine!
+                      </Text>
+                    </View>
+                  </View>
+                </A11yIndexView>
+              </View>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r6b:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r6b:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <View
+              style={
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
+              }
+            >
+              <View
+                accessibilityLabel="diego.mello 10:00:00 AM  thread message Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
+                accessible={true}
+                style={
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
+                }
+              >
+                <View
+                  style={
+                    {
+                      "alignItems": "flex-end",
+                      "width": 36,
+                    }
+                  }
+                >
+                  <View
+                    accessible={true}
+                    style={
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 20,
+                          "width": 20,
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="avatar"
+                  >
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={337}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
+                      style={
+                        [
+                          {
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
+                          },
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
+                        }
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={20}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 20,
+                              "width": 20,
+                            }
+                          }
+                          transition={null}
+                          width={20}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
+                  </View>
+                </View>
+                <A11yIndexView
+                  accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r6b:"
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                    >
+                      <Text
+                        accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
+                        }
+                        testID="message-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      >
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                      </Text>
+                    </View>
+                  </View>
+                </A11yIndexView>
+              </View>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r6c:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r6c:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <View
+              style={
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
+              }
+            >
+              <View
+                accessibilityLabel="diego.mello 10:00:00 AM  thread message undefined.  "
+                accessible={true}
+                style={
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
+                }
+              >
+                <View
+                  style={
+                    {
+                      "alignItems": "flex-end",
+                      "width": 36,
+                    }
+                  }
+                >
+                  <View
+                    accessible={true}
+                    style={
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 20,
+                          "width": 20,
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="avatar"
+                  >
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={338}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
+                      style={
+                        [
+                          {
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
+                          },
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
+                        }
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={20}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 20,
+                              "width": 20,
+                            }
+                          }
+                          transition={null}
+                          width={20}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
+                  </View>
+                </View>
+                <A11yIndexView
+                  accessibilityLabel=""
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r6c:"
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-"
+                    />
+                  </View>
+                </A11yIndexView>
+              </View>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
+    <A11yOrderView
+      orderKey=":r6d:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r6d:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  How are you?.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
+                }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="How are you?"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r6d:"
+              >
+                <View
+                  accessible={true}
+                  style={
+                    {
+                      "flexDirection": "row",
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
+                  >
+                    <View
+                      accessible={true}
+                      style={
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
+                      }
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={339}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
+                        {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={340}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-How are you?"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="How are you?"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  How are you?
+                                </Text>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "paddingHorizontal": 12,
+                                  "paddingVertical": 8,
+                                },
+                                {
+                                  "backgroundColor": "#1D74F5",
+                                },
+                              ]
+                            }
+                            testID="message-thread-button-How are you?"
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 12,
+                                    "fontWeight": "600",
+                                    "lineHeight": 16,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#FFFFFF",
+                                  },
+                                ]
+                              }
+                            >
+                              View thread
+                            </Text>
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                },
+                                {
+                                  "flex": 1,
+                                  "marginLeft": 12,
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "marginRight": 8,
+                                  }
+                                }
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 31.200000000000003,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 31.200000000000003,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                                <Text
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 10,
+                                        "fontWeight": "600",
+                                        "marginLeft": 2,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#6C727A",
+                                      },
+                                    ]
+                                  }
+                                  testID="thread-count-1"
+                                >
+                                  1
+                                </Text>
+                              </View>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "marginRight": 8,
+                                  }
+                                }
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 31.200000000000003,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 31.200000000000003,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                                <Text
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 10,
+                                        "fontWeight": "600",
+                                        "marginLeft": 2,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#6C727A",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  0
+                                </Text>
+                              </View>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  [
+                                    {
+                                      "borderRadius": 4,
+                                      "height": 8,
+                                      "marginRight": 8,
+                                      "width": 8,
+                                    },
+                                    {
+                                      "backgroundColor": "#6C727A",
+                                    },
+                                  ]
+                                }
+                              />
+                              <RNGestureHandlerButton
+                                activeOpacity={1}
+                                collapsable={false}
+                                delayLongPress={600}
+                                enabled={true}
+                                handlerTag={341}
+                                handlerType="NativeViewGestureHandler"
+                                innerRef={null}
+                                onActiveStateChange={[Function]}
+                                onGestureHandlerEvent={[Function]}
+                                onGestureHandlerStateChange={[Function]}
+                                onPress={[Function]}
+                                rippleColor="#E4E7EA"
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": undefined,
+                                      "borderRadius": undefined,
+                                      "margin": undefined,
+                                      "marginBottom": undefined,
+                                      "marginEnd": undefined,
+                                      "marginHorizontal": undefined,
+                                      "marginLeft": undefined,
+                                      "marginRight": undefined,
+                                      "marginStart": undefined,
+                                      "marginTop": undefined,
+                                      "marginVertical": undefined,
+                                    },
+                                    {
+                                      "cursor": undefined,
+                                    },
+                                  ]
+                                }
+                                underlayColor="#E4E7EA"
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    {
+                                      "backgroundColor": "#E4E7EA",
+                                      "borderBottomLeftRadius": undefined,
+                                      "borderBottomRightRadius": undefined,
+                                      "borderRadius": undefined,
+                                      "borderTopLeftRadius": undefined,
+                                      "borderTopRightRadius": undefined,
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "opacity": 0,
+                                      "position": "absolute",
+                                      "right": 0,
+                                      "top": 0,
+                                    }
+                                  }
+                                />
+                                <View
+                                  accessibilityLabel="Follow thread"
+                                  style={{}}
+                                >
+                                  <Text
+                                    allowFontScaling={false}
+                                    selectable={false}
+                                    style={
+                                      [
+                                        {
+                                          "color": "#2F343D",
+                                          "fontSize": 31.200000000000003,
+                                        },
+                                        [
+                                          {
+                                            "lineHeight": 31.200000000000003,
+                                          },
+                                          undefined,
+                                        ],
+                                        {
+                                          "fontFamily": "custom",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "normal",
+                                        },
+                                        {},
+                                      ]
+                                    }
+                                  >
+                                    
+                                  </Text>
+                                </View>
+                              </RNGestureHandlerButton>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r6e:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
         orderIndex={1}
-        orderKey=":r6f:"
+        orderKey=":r6e:"
       >
         <View
           accessibilityState={
@@ -93877,185 +105694,487 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
-                {
-                  "flexDirection": "column",
-                  "gap": 8,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 4,
-                  "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
+            style={{}}
           >
             <View
-              accessibilityLabel="diego.mello 10:00:00 AM  thread message Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
-              accessible={true}
               style={
                 [
                   {
-                    "flexDirection": "row",
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
                   },
-                  {},
                 ]
               }
             >
               <View
+                accessibilityLabel="diego.mello 10:00:00 AM  thread message I'm fine!.  "
+                accessible={true}
                 style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
-                  accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 26,
-                        "width": 26,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "alignItems": "flex-end",
+                      "width": 46.800000000000004,
+                    }
                   }
-                  testID="avatar"
                 >
                   <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
                     accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
-                      {
-                        "opacity": 1,
-                      }
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 26,
+                          "width": 26,
+                        },
+                        undefined,
+                      ]
                     }
+                    testID="avatar"
                   >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
-                        {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={26}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={342}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
+                      style={
                         [
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
                           },
                         ]
                       }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 26,
-                          "width": 26,
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
                         }
-                      }
-                      transition={null}
-                      width={26}
-                    />
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={26}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 26,
+                              "width": 26,
+                            }
+                          }
+                          transition={null}
+                          width={26}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
                 </View>
+                <A11yIndexView
+                  accessibilityLabel="I'm fine!"
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r6e:"
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-I'm fine!"
+                    >
+                      <Text
+                        accessibilityLabel="I'm fine!"
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
+                        }
+                        testID="message-preview-I'm fine!"
+                      >
+                        I'm fine!
+                      </Text>
+                    </View>
+                  </View>
+                </A11yIndexView>
               </View>
-              <A11yIndexView
-                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r6f:"
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r6f:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r6f:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <View
+              style={
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
+              }
+            >
+              <View
+                accessibilityLabel="diego.mello 10:00:00 AM  thread message Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
+                accessible={true}
                 style={
-                  {
-                    "flex": 1,
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
                   style={
                     {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "alignItems": "flex-end",
+                      "width": 46.800000000000004,
                     }
                   }
                 >
                   <View
-                    testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                    accessible={true}
+                    style={
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 26,
+                          "width": 26,
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="avatar"
                   >
-                    <Text
-                      accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                      numberOfLines={1}
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={343}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
                       style={
                         [
                           {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
                           },
                           {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
+                            "cursor": undefined,
                           },
                         ]
                       }
-                      testID="message-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      underlayColor="#E4E7EA"
                     >
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                    </Text>
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
+                        }
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={26}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 26,
+                              "width": 26,
+                            }
+                          }
+                          transition={null}
+                          width={26}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
                 </View>
-              </A11yIndexView>
+                <A11yIndexView
+                  accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r6f:"
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                    >
+                      <Text
+                        accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
+                        }
+                        testID="message-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      >
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                      </Text>
+                    </View>
+                  </View>
+                </A11yIndexView>
+              </View>
             </View>
           </View>
         </View>
@@ -94101,161 +106220,200 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
-                {
-                  "flexDirection": "column",
-                  "gap": 8,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 4,
-                  "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
+            style={{}}
           >
             <View
-              accessibilityLabel="diego.mello 10:00:00 AM  thread message undefined.  "
-              accessible={true}
               style={
                 [
                   {
-                    "flexDirection": "row",
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
                   },
-                  {},
                 ]
               }
             >
               <View
+                accessibilityLabel="diego.mello 10:00:00 AM  thread message undefined.  "
+                accessible={true}
                 style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
-                  accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 26,
-                        "width": 26,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "alignItems": "flex-end",
+                      "width": 46.800000000000004,
+                    }
                   }
-                  testID="avatar"
                 >
                   <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
                     accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
-                      {
-                        "opacity": 1,
-                      }
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 26,
+                          "width": 26,
+                        },
+                        undefined,
+                      ]
                     }
+                    testID="avatar"
                   >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
-                        {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={26}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={344}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
+                      style={
                         [
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
                           },
                         ]
                       }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 26,
-                          "width": 26,
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
                         }
-                      }
-                      transition={null}
-                      width={26}
-                    />
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={26}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 26,
+                              "width": 26,
+                            }
+                          }
+                          transition={null}
+                          width={26}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
                 </View>
-              </View>
-              <A11yIndexView
-                accessibilityLabel=""
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r6g:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
+                <A11yIndexView
+                  accessibilityLabel=""
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r6g:"
                   style={
                     {
                       "flex": 1,
-                      "marginLeft": 10,
                     }
                   }
                 >
                   <View
-                    testID="message-content-"
-                  />
-                </View>
-              </A11yIndexView>
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-"
+                    />
+                  </View>
+                </A11yIndexView>
+              </View>
             </View>
           </View>
         </View>
@@ -94314,302 +106472,341 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
-                {
-                  "flexDirection": "column",
-                  "gap": 8,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 4,
-                  "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
+            style={{}}
           >
             <View
               style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "gap": 10,
-                }
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
               }
-              testID="message-thread-replied-on-How are you?"
             >
               <View
                 style={
                   {
-                    "alignItems": "flex-end",
-                    "width": 36,
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "gap": 10,
                   }
                 }
+                testID="message-thread-replied-on-How are you?"
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#095AD2",
-                        "fontSize": 20,
-                      },
+                    {
+                      "alignItems": "flex-end",
+                      "width": 36,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 20,
+                          "color": "#095AD2",
+                          "fontSize": 20,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <Text
-                accessibilityLabel="How are you?"
-                numberOfLines={1}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 22,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#2F343D",
-                      "lineHeight": undefined,
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "flex": 1,
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ]
-                }
-                testID="markdown-preview-How are you?"
-              >
-                How are you?
-              </Text>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "marginLeft": 4,
-                    "marginRight": 4,
-                  }
-                }
-              >
+                        [
+                          {
+                            "lineHeight": 20,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
                 <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                  accessibilityLabel="How are you?"
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "color": "#6C727A",
-                        "fontSize": 20,
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
                       },
-                      [
-                        {
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "color": "#2F343D",
+                        "lineHeight": undefined,
+                      },
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#095AD2",
                       },
-                      {},
                     ]
                   }
+                  testID="markdown-preview-How are you?"
                 >
-                  
+                  How are you?
                 </Text>
-              </View>
-            </View>
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message I'm fine!.  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
-                }
-              >
                 <View
-                  accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 20,
-                        "width": 20,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "marginLeft": 4,
+                      "marginRight": 4,
+                    }
                   }
-                  testID="avatar"
                 >
-                  <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
                     style={
-                      {
-                        "opacity": 1,
-                      }
-                    }
-                  >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
+                      [
                         {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={20}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
+                          "color": "#6C727A",
+                          "fontSize": 20,
+                        },
                         [
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                            "lineHeight": 20,
                           },
-                        ]
-                      }
-                      style={
+                          undefined,
+                        ],
                         {
-                          "borderRadius": 4,
-                          "height": 20,
-                          "width": 20,
-                        }
-                      }
-                      transition={null}
-                      width={20}
-                    />
-                  </View>
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
                 </View>
               </View>
-              <A11yIndexView
-                accessibilityLabel="I'm fine!"
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r6h:"
+              <View
+                accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message I'm fine!.  "
+                accessible={true}
                 style={
-                  {
-                    "flex": 1,
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
                   style={
                     {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "alignItems": "flex-end",
+                      "width": 36,
+                    }
+                  }
+                >
+                  <View
+                    accessible={true}
+                    style={
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 20,
+                          "width": 20,
+                        },
+                        undefined,
+                      ]
                     }
-                  }
-                >
-                  <View
-                    testID="message-content-I'm fine!"
+                    testID="avatar"
                   >
-                    <Text
-                      accessibilityLabel="I'm fine!"
-                      numberOfLines={1}
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={345}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
                       style={
                         [
                           {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
                           },
                           {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
+                            "cursor": undefined,
                           },
                         ]
                       }
-                      testID="message-preview-I'm fine!"
+                      underlayColor="#E4E7EA"
                     >
-                      I'm fine!
-                    </Text>
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
+                        }
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={20}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 20,
+                              "width": 20,
+                            }
+                          }
+                          transition={null}
+                          width={20}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
                 </View>
-              </A11yIndexView>
+                <A11yIndexView
+                  accessibilityLabel="I'm fine!"
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r6h:"
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-I'm fine!"
+                    >
+                      <Text
+                        accessibilityLabel="I'm fine!"
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
+                        }
+                        testID="message-preview-I'm fine!"
+                      >
+                        I'm fine!
+                      </Text>
+                    </View>
+                  </View>
+                </A11yIndexView>
+              </View>
             </View>
           </View>
         </View>
@@ -94655,185 +106852,224 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
-                {
-                  "flexDirection": "column",
-                  "gap": 8,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 4,
-                  "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
+            style={{}}
           >
             <View
-              accessibilityLabel="diego.mello 10:00:00 AM  thread message Cool!.  "
-              accessible={true}
               style={
                 [
                   {
-                    "flexDirection": "row",
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
                   },
-                  {},
                 ]
               }
             >
               <View
+                accessibilityLabel="diego.mello 10:00:00 AM  thread message Cool!.  "
+                accessible={true}
                 style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
-                  accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 20,
-                        "width": 20,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "alignItems": "flex-end",
+                      "width": 36,
+                    }
                   }
-                  testID="avatar"
                 >
                   <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
                     accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
-                      {
-                        "opacity": 1,
-                      }
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 20,
+                          "width": 20,
+                        },
+                        undefined,
+                      ]
                     }
+                    testID="avatar"
                   >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
-                        {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={20}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={346}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
+                      style={
                         [
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
                           },
                         ]
                       }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 20,
-                          "width": 20,
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
                         }
-                      }
-                      transition={null}
-                      width={20}
-                    />
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={20}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 20,
+                              "width": 20,
+                            }
+                          }
+                          transition={null}
+                          width={20}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
                 </View>
-              </View>
-              <A11yIndexView
-                accessibilityLabel="Cool!"
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r6i:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
+                <A11yIndexView
+                  accessibilityLabel="Cool!"
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r6i:"
                   style={
                     {
                       "flex": 1,
-                      "marginLeft": 10,
                     }
                   }
                 >
                   <View
-                    testID="message-content-Cool!"
-                  >
-                    <Text
-                      accessibilityLabel="Cool!"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
-                          },
-                        ]
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
                       }
-                      testID="message-preview-Cool!"
+                    }
+                  >
+                    <View
+                      testID="message-content-Cool!"
                     >
-                      Cool!
-                    </Text>
+                      <Text
+                        accessibilityLabel="Cool!"
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
+                        }
+                        testID="message-preview-Cool!"
+                      >
+                        Cool!
+                      </Text>
+                    </View>
                   </View>
-                </View>
-              </A11yIndexView>
+                </A11yIndexView>
+              </View>
             </View>
           </View>
         </View>
@@ -94879,185 +107115,224 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
-                {
-                  "flexDirection": "column",
-                  "gap": 8,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 4,
-                  "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
+            style={{}}
           >
             <View
-              accessibilityLabel="diego.mello 10:00:00 AM  thread message Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
-              accessible={true}
               style={
                 [
                   {
-                    "flexDirection": "row",
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
                   },
-                  {},
                 ]
               }
             >
               <View
+                accessibilityLabel="diego.mello 10:00:00 AM  thread message Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
+                accessible={true}
                 style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
-                  accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 20,
-                        "width": 20,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "alignItems": "flex-end",
+                      "width": 36,
+                    }
                   }
-                  testID="avatar"
                 >
                   <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
                     accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
-                      {
-                        "opacity": 1,
-                      }
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 20,
+                          "width": 20,
+                        },
+                        undefined,
+                      ]
                     }
+                    testID="avatar"
                   >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
-                        {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={20}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={347}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
+                      style={
                         [
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
                           },
                         ]
                       }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 20,
-                          "width": 20,
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
                         }
-                      }
-                      transition={null}
-                      width={20}
-                    />
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={20}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 20,
+                              "width": 20,
+                            }
+                          }
+                          transition={null}
+                          width={20}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
                 </View>
-              </View>
-              <A11yIndexView
-                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r6j:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
+                <A11yIndexView
+                  accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r6j:"
                   style={
                     {
                       "flex": 1,
-                      "marginLeft": 10,
                     }
                   }
                 >
                   <View
-                    testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                  >
-                    <Text
-                      accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
-                          },
-                        ]
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
                       }
-                      testID="message-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                    }
+                  >
+                    <View
+                      testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                     >
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                    </Text>
+                      <Text
+                        accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
+                        }
+                        testID="message-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      >
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                      </Text>
+                    </View>
                   </View>
-                </View>
-              </A11yIndexView>
+                </A11yIndexView>
+              </View>
             </View>
           </View>
         </View>
@@ -95103,161 +107378,200 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
-                {
-                  "flexDirection": "column",
-                  "gap": 8,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 4,
-                  "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
+            style={{}}
           >
             <View
-              accessibilityLabel="diego.mello 10:00:00 AM  thread message undefined.  "
-              accessible={true}
               style={
                 [
                   {
-                    "flexDirection": "row",
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
                   },
-                  {},
                 ]
               }
             >
               <View
+                accessibilityLabel="diego.mello 10:00:00 AM  thread message undefined.  "
+                accessible={true}
                 style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 36,
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
-                  accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 20,
-                        "width": 20,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "alignItems": "flex-end",
+                      "width": 36,
+                    }
                   }
-                  testID="avatar"
                 >
                   <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
                     accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
-                      {
-                        "opacity": 1,
-                      }
-                    }
-                  >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
+                      [
                         {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={20}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
+                          "borderRadius": 4,
+                          "height": 20,
+                          "width": 20,
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="avatar"
+                  >
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={348}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
+                      style={
                         [
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
                           },
                         ]
                       }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 20,
-                          "width": 20,
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
                         }
-                      }
-                      transition={null}
-                      width={20}
-                    />
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={20}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 20,
+                              "width": 20,
+                            }
+                          }
+                          transition={null}
+                          width={20}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
                 </View>
-              </View>
-              <A11yIndexView
-                accessibilityLabel=""
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r6k:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
+                <A11yIndexView
+                  accessibilityLabel=""
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r6k:"
                   style={
                     {
                       "flex": 1,
-                      "marginLeft": 10,
                     }
                   }
                 >
                   <View
-                    testID="message-content-"
-                  />
-                </View>
-              </A11yIndexView>
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-"
+                    />
+                  </View>
+                </A11yIndexView>
+              </View>
             </View>
           </View>
         </View>
@@ -95316,302 +107630,341 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
-                {
-                  "flexDirection": "column",
-                  "gap": 8,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 4,
-                  "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
+            style={{}}
           >
             <View
               style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "gap": 10,
-                }
+                [
+                  {
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
+                  },
+                ]
               }
-              testID="message-thread-replied-on-How are you?"
             >
               <View
                 style={
                   {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "gap": 10,
                   }
                 }
+                testID="message-thread-replied-on-How are you?"
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#095AD2",
-                        "fontSize": 26,
-                      },
+                    {
+                      "alignItems": "flex-end",
+                      "width": 46.800000000000004,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 26,
+                          "color": "#095AD2",
+                          "fontSize": 26,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <Text
-                accessibilityLabel="How are you?"
-                numberOfLines={1}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "lineHeight": 22,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#2F343D",
-                      "lineHeight": undefined,
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "flex": 1,
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ]
-                }
-                testID="markdown-preview-How are you?"
-              >
-                How are you?
-              </Text>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "marginLeft": 4,
-                    "marginRight": 4,
-                  }
-                }
-              >
+                        [
+                          {
+                            "lineHeight": 26,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
                 <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                  accessibilityLabel="How are you?"
+                  numberOfLines={1}
                   style={
                     [
                       {
-                        "color": "#6C727A",
-                        "fontSize": 26,
+                        "backgroundColor": "transparent",
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "lineHeight": 22,
+                        "textAlign": "left",
                       },
-                      [
-                        {
-                          "lineHeight": 26,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "color": "#2F343D",
+                        "lineHeight": undefined,
+                      },
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "#095AD2",
                       },
-                      {},
                     ]
                   }
+                  testID="markdown-preview-How are you?"
                 >
-                  
+                  How are you?
                 </Text>
-              </View>
-            </View>
-            <View
-              accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message I'm fine!.  "
-              accessible={true}
-              style={
-                [
-                  {
-                    "flexDirection": "row",
-                  },
-                  {},
-                ]
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
-                  }
-                }
-              >
                 <View
-                  accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 26,
-                        "width": 26,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "alignItems": "center",
+                      "justifyContent": "center",
+                      "marginLeft": 4,
+                      "marginRight": 4,
+                    }
                   }
-                  testID="avatar"
                 >
-                  <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
                     style={
-                      {
-                        "opacity": 1,
-                      }
-                    }
-                  >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
+                      [
                         {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={26}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
+                          "color": "#6C727A",
+                          "fontSize": 26,
+                        },
                         [
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                            "lineHeight": 26,
                           },
-                        ]
-                      }
-                      style={
+                          undefined,
+                        ],
                         {
-                          "borderRadius": 4,
-                          "height": 26,
-                          "width": 26,
-                        }
-                      }
-                      transition={null}
-                      width={26}
-                    />
-                  </View>
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
                 </View>
               </View>
-              <A11yIndexView
-                accessibilityLabel="I'm fine!"
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r6l:"
+              <View
+                accessibilityLabel="diego.mello 10:00:00 AM  replying to thread message I'm fine!.  "
+                accessible={true}
                 style={
-                  {
-                    "flex": 1,
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
                   style={
                     {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "alignItems": "flex-end",
+                      "width": 46.800000000000004,
                     }
                   }
                 >
                   <View
-                    testID="message-content-I'm fine!"
+                    accessible={true}
+                    style={
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 26,
+                          "width": 26,
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="avatar"
                   >
-                    <Text
-                      accessibilityLabel="I'm fine!"
-                      numberOfLines={1}
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={349}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
                       style={
                         [
                           {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
                           },
                           {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
+                            "cursor": undefined,
                           },
                         ]
                       }
-                      testID="message-preview-I'm fine!"
+                      underlayColor="#E4E7EA"
                     >
-                      I'm fine!
-                    </Text>
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
+                        }
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={26}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 26,
+                              "width": 26,
+                            }
+                          }
+                          transition={null}
+                          width={26}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
                 </View>
-              </A11yIndexView>
+                <A11yIndexView
+                  accessibilityLabel="I'm fine!"
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r6l:"
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-I'm fine!"
+                    >
+                      <Text
+                        accessibilityLabel="I'm fine!"
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
+                        }
+                        testID="message-preview-I'm fine!"
+                      >
+                        I'm fine!
+                      </Text>
+                    </View>
+                  </View>
+                </A11yIndexView>
+              </View>
             </View>
           </View>
         </View>
@@ -95657,185 +108010,224 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
-                {
-                  "flexDirection": "column",
-                  "gap": 8,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 4,
-                  "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
+            style={{}}
           >
             <View
-              accessibilityLabel="diego.mello 10:00:00 AM  thread message Cool!.  "
-              accessible={true}
               style={
                 [
                   {
-                    "flexDirection": "row",
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
                   },
-                  {},
                 ]
               }
             >
               <View
-                style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
-                  }
-                }
-              >
-                <View
-                  accessible={true}
-                  style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 26,
-                        "width": 26,
-                      },
-                      undefined,
-                    ]
-                  }
-                  testID="avatar"
-                >
-                  <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      {
-                        "opacity": 1,
-                      }
-                    }
-                  >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
-                        {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={26}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
-                        [
-                          {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                          },
-                        ]
-                      }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 26,
-                          "width": 26,
-                        }
-                      }
-                      transition={null}
-                      width={26}
-                    />
-                  </View>
-                </View>
-              </View>
-              <A11yIndexView
-                accessibilityLabel="Cool!"
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r6m:"
-                style={
-                  {
-                    "flex": 1,
-                  }
+                accessibilityLabel="diego.mello 10:00:00 AM  thread message Cool!.  "
+                accessible={true}
+                style={
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
                   style={
                     {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "alignItems": "flex-end",
+                      "width": 46.800000000000004,
                     }
                   }
                 >
                   <View
-                    testID="message-content-Cool!"
+                    accessible={true}
+                    style={
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 26,
+                          "width": 26,
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="avatar"
                   >
-                    <Text
-                      accessibilityLabel="Cool!"
-                      numberOfLines={1}
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={350}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
                       style={
                         [
                           {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
                           },
                           {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
+                            "cursor": undefined,
                           },
                         ]
                       }
-                      testID="message-preview-Cool!"
+                      underlayColor="#E4E7EA"
                     >
-                      Cool!
-                    </Text>
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
+                        }
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={26}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 26,
+                              "width": 26,
+                            }
+                          }
+                          transition={null}
+                          width={26}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
                 </View>
-              </A11yIndexView>
+                <A11yIndexView
+                  accessibilityLabel="Cool!"
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r6m:"
+                  style={
+                    {
+                      "flex": 1,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-Cool!"
+                    >
+                      <Text
+                        accessibilityLabel="Cool!"
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
+                        }
+                        testID="message-preview-Cool!"
+                      >
+                        Cool!
+                      </Text>
+                    </View>
+                  </View>
+                </A11yIndexView>
+              </View>
             </View>
           </View>
         </View>
@@ -95881,185 +108273,224 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
-                {
-                  "flexDirection": "column",
-                  "gap": 8,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 4,
-                  "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
+            style={{}}
           >
             <View
-              accessibilityLabel="diego.mello 10:00:00 AM  thread message Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
-              accessible={true}
               style={
                 [
                   {
-                    "flexDirection": "row",
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
                   },
-                  {},
                 ]
               }
             >
               <View
+                accessibilityLabel="diego.mello 10:00:00 AM  thread message Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..  "
+                accessible={true}
                 style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
-                  accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 26,
-                        "width": 26,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "alignItems": "flex-end",
+                      "width": 46.800000000000004,
+                    }
                   }
-                  testID="avatar"
                 >
                   <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
                     accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
-                      {
-                        "opacity": 1,
-                      }
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 26,
+                          "width": 26,
+                        },
+                        undefined,
+                      ]
                     }
+                    testID="avatar"
                   >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
-                        {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={26}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={351}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
+                      style={
                         [
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
                           },
                         ]
                       }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 26,
-                          "width": 26,
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
                         }
-                      }
-                      transition={null}
-                      width={26}
-                    />
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={26}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 26,
+                              "width": 26,
+                            }
+                          }
+                          transition={null}
+                          width={26}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
                 </View>
-              </View>
-              <A11yIndexView
-                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r6n:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
+                <A11yIndexView
+                  accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r6n:"
                   style={
                     {
                       "flex": 1,
-                      "marginLeft": 10,
                     }
                   }
                 >
                   <View
-                    testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                  >
-                    <Text
-                      accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "lineHeight": 22,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                            "lineHeight": undefined,
-                          },
-                        ]
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
                       }
-                      testID="message-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                    }
+                  >
+                    <View
+                      testID="message-content-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                     >
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                    </Text>
+                      <Text
+                        accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 16,
+                              "fontWeight": "400",
+                              "lineHeight": 22,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#2F343D",
+                              "lineHeight": undefined,
+                            },
+                          ]
+                        }
+                        testID="message-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      >
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                      </Text>
+                    </View>
                   </View>
-                </View>
-              </A11yIndexView>
+                </A11yIndexView>
+              </View>
             </View>
           </View>
         </View>
@@ -96105,161 +108536,200 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            style={
-              [
-                {
-                  "flexDirection": "column",
-                  "gap": 8,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 4,
-                  "width": "100%",
-                },
-                {
-                  "marginTop": 4,
-                },
-              ]
-            }
+            style={{}}
           >
             <View
-              accessibilityLabel="diego.mello 10:00:00 AM  thread message undefined.  "
-              accessible={true}
               style={
                 [
                   {
-                    "flexDirection": "row",
+                    "flexDirection": "column",
+                    "gap": 8,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 4,
+                    "width": "100%",
+                  },
+                  {
+                    "marginTop": 4,
                   },
-                  {},
                 ]
               }
             >
               <View
+                accessibilityLabel="diego.mello 10:00:00 AM  thread message undefined.  "
+                accessible={true}
                 style={
-                  {
-                    "alignItems": "flex-end",
-                    "width": 46.800000000000004,
-                  }
+                  [
+                    {
+                      "flexDirection": "row",
+                    },
+                    {},
+                  ]
                 }
               >
                 <View
-                  accessible={true}
                   style={
-                    [
-                      {
-                        "borderRadius": 4,
-                        "height": 26,
-                        "width": 26,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "alignItems": "flex-end",
+                      "width": 46.800000000000004,
+                    }
                   }
-                  testID="avatar"
                 >
                   <View
-                    accessibilityLabel="diego.mello's avatar"
-                    accessibilityState={
-                      {
-                        "busy": undefined,
-                        "checked": undefined,
-                        "disabled": undefined,
-                        "expanded": undefined,
-                        "selected": undefined,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
-                      }
-                    }
                     accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
-                      {
-                        "opacity": 1,
-                      }
+                      [
+                        {
+                          "borderRadius": 4,
+                          "height": 26,
+                          "width": 26,
+                        },
+                        undefined,
+                      ]
                     }
+                    testID="avatar"
                   >
-                    <ViewManagerAdapter_ExpoImage
-                      borderRadius={4}
-                      containerViewRef={"[React.ref]"}
-                      contentFit="cover"
-                      contentPosition={
-                        {
-                          "left": "50%",
-                          "top": "50%",
-                        }
-                      }
-                      height={26}
-                      nativeViewRef={"[React.ref]"}
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      onLoadStart={[Function]}
-                      onProgress={[Function]}
-                      placeholder={[]}
-                      priority="high"
-                      source={
+                    <RNGestureHandlerButton
+                      activeOpacity={1}
+                      collapsable={false}
+                      delayLongPress={600}
+                      enabled={true}
+                      handlerTag={352}
+                      handlerType="NativeViewGestureHandler"
+                      innerRef={null}
+                      onActiveStateChange={[Function]}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      onPress={[Function]}
+                      rippleColor="#E4E7EA"
+                      style={
                         [
                           {
-                            "headers": {
-                              "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                            },
-                            "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                            "backgroundColor": undefined,
+                            "borderRadius": undefined,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "cursor": undefined,
                           },
                         ]
                       }
-                      style={
-                        {
-                          "borderRadius": 4,
-                          "height": 26,
-                          "width": 26,
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        collapsable={false}
+                        style={
+                          {
+                            "backgroundColor": "#E4E7EA",
+                            "borderBottomLeftRadius": undefined,
+                            "borderBottomRightRadius": undefined,
+                            "borderRadius": undefined,
+                            "borderTopLeftRadius": undefined,
+                            "borderTopRightRadius": undefined,
+                            "bottom": 0,
+                            "left": 0,
+                            "opacity": 0,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
                         }
-                      }
-                      transition={null}
-                      width={26}
-                    />
+                      />
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={"[React.ref]"}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={26}
+                          nativeViewRef={"[React.ref]"}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 26,
+                              "width": 26,
+                            }
+                          }
+                          transition={null}
+                          width={26}
+                        />
+                      </View>
+                    </RNGestureHandlerButton>
                   </View>
                 </View>
-              </View>
-              <A11yIndexView
-                accessibilityLabel=""
-                importantForAccessibility="yes"
-                orderFocusType={0}
-                orderIndex={2}
-                orderKey=":r6o:"
-                style={
-                  {
-                    "flex": 1,
-                  }
-                }
-              >
-                <View
+                <A11yIndexView
+                  accessibilityLabel=""
+                  importantForAccessibility="yes"
+                  orderFocusType={0}
+                  orderIndex={2}
+                  orderKey=":r6o:"
                   style={
                     {
                       "flex": 1,
-                      "marginLeft": 10,
                     }
                   }
                 >
                   <View
-                    testID="message-content-"
-                  />
-                </View>
-              </A11yIndexView>
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      testID="message-content-"
+                    />
+                  </View>
+                </A11yIndexView>
+              </View>
             </View>
           </View>
         </View>
@@ -96318,260 +108788,318 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r6p:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r6p:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
+                      accessible={true}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={353}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={354}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
                       <View
                         style={
                           {
@@ -96582,126 +109110,129 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "gap": 4,
                             }
                           }
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Test Button"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Test Button
+                                <Text
+                                  accessibilityLabel="Test Button"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Test Button
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
-                        </View>
-                        <View
-                          accessibilityLabel="Text button"
-                          accessibilityRole="button"
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#156FF5",
-                              "borderRadius": 4,
-                              "justifyContent": "center",
-                              "marginBottom": 12,
-                              "opacity": 1,
-                              "paddingHorizontal": 16,
-                              "paddingVertical": 14,
+                          </View>
+                          <RNGestureHandlerButton
+                            accessibilityLabel="Text button"
+                            accessibilityRole="button"
+                            collapsable={false}
+                            enabled={true}
+                            hitSlop={
+                              {
+                                "bottom": 0,
+                                "left": 0,
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
-                          <Text
+                            rippleColor="transparent"
                             style={
                               [
-                                {
-                                  "color": "#FFFFFF",
-                                  "fontSize": 16,
-                                },
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "500",
-                                  "textAlign": "center",
-                                },
-                                undefined,
+                                {},
+                                [
+                                  {
+                                    "justifyContent": "center",
+                                    "paddingHorizontal": 16,
+                                    "paddingVertical": 14,
+                                  },
+                                  {
+                                    "borderRadius": 4,
+                                    "marginBottom": 12,
+                                  },
+                                  {
+                                    "backgroundColor": "#156FF5",
+                                  },
+                                  {},
+                                  undefined,
+                                ],
                               ]
                             }
+                            testOnly_onPress={[Function]}
                           >
-                            Text button
-                          </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "color": "#FFFFFF",
+                                    "fontSize": 16,
+                                  },
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "500",
+                                    "textAlign": "center",
+                                  },
+                                  undefined,
+                                ]
+                              }
+                            >
+                              Text button
+                            </Text>
+                          </RNGestureHandlerButton>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -96746,260 +109277,318 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r6q:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r6q:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={355}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={356}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
                           style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#6C727A",
-                              },
-                            ]
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
                       <View
                         style={
                           {
@@ -97010,88 +109599,68 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "gap": 4,
                             }
                           }
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {},
-                                    false,
-                                  ]
-                                }
-                              >
-                                🥑
-                              </Text>
-                              <Text
-                                accessibilityLabel=" "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 
-                              </Text>
                               <Text
                                 style={
                                   {
                                     "backgroundColor": "transparent",
+                                    "flexShrink": 1,
                                     "fontFamily": "Inter",
-                                    "fontWeight": "700",
+                                    "fontWeight": "400",
                                     "textAlign": "left",
                                   }
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="Message with markdown"
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {},
+                                      false,
+                                    ]
+                                  }
+                                >
+                                  🥑
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" "
                                   style={
                                     [
                                       {
@@ -97105,55 +109674,137 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
                                     ]
                                   }
                                 >
-                                  Message with markdown
+                                   
+                                </Text>
+                                <Text
+                                  style={
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "700",
+                                      "textAlign": "left",
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    accessibilityLabel="Message with markdown"
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Message with markdown
+                                  </Text>
                                 </Text>
                               </Text>
                             </Text>
-                          </Text>
-                          <View
-                            style={
-                              {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
+                            <View
+                              style={
                                 {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
+                                  "height": 8,
+                                }
+                              }
+                            />
                             <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  style={
+                                    {
+                                      "fontStyle": "italic",
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    accessibilityLabel="Some text"
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Some text
+                                  </Text>
+                                </Text>
+                              </Text>
+                            </Text>
+                            <View
                               style={
                                 {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
+                                  "height": 8,
                                 }
                               }
+                            />
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
                             >
                               <Text
                                 style={
                                   {
-                                    "fontStyle": "italic",
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
                                   }
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="Some text"
+                                  accessibilityLabel="This is a test"
                                   style={
                                     [
                                       {
@@ -97167,134 +109818,75 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
                                     ]
                                   }
                                 >
-                                  Some text
+                                  This is a test
                                 </Text>
                               </Text>
                             </Text>
-                          </Text>
-                          <View
-                            style={
+                          </View>
+                          <RNGestureHandlerButton
+                            accessibilityLabel="Text button"
+                            accessibilityRole="button"
+                            collapsable={false}
+                            enabled={true}
+                            hitSlop={
                               {
-                                "height": 8,
+                                "bottom": 0,
+                                "left": 0,
+                                "right": 0,
+                                "top": 0,
                               }
                             }
-                          />
-                          <Text
+                            rippleColor="transparent"
                             style={
                               [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
+                                {},
+                                [
+                                  {
+                                    "justifyContent": "center",
+                                    "paddingHorizontal": 16,
+                                    "paddingVertical": 14,
+                                  },
+                                  {
+                                    "borderRadius": 4,
+                                    "marginBottom": 12,
+                                  },
+                                  {
+                                    "backgroundColor": "#156FF5",
+                                  },
+                                  {},
+                                  undefined,
+                                ],
                               ]
                             }
+                            testOnly_onPress={[Function]}
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "color": "#FFFFFF",
+                                    "fontSize": 16,
+                                  },
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "500",
+                                    "textAlign": "center",
+                                  },
+                                  undefined,
+                                ]
                               }
                             >
-                              <Text
-                                accessibilityLabel="This is a test"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                This is a test
-                              </Text>
+                              Text button
                             </Text>
-                          </Text>
-                        </View>
-                        <View
-                          accessibilityLabel="Text button"
-                          accessibilityRole="button"
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#156FF5",
-                              "borderRadius": 4,
-                              "justifyContent": "center",
-                              "marginBottom": 12,
-                              "opacity": 1,
-                              "paddingHorizontal": 16,
-                              "paddingVertical": 14,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "color": "#FFFFFF",
-                                  "fontSize": 16,
-                                },
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "500",
-                                  "textAlign": "center",
-                                },
-                                undefined,
-                              ]
-                            }
-                          >
-                            Text button
-                          </Text>
+                          </RNGestureHandlerButton>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -97352,260 +109944,318 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r6r:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r6r:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={363}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={364}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -97616,126 +110266,129 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "gap": 4,
                             }
                           }
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Test Button"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Test Button
+                                <Text
+                                  accessibilityLabel="Test Button"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Test Button
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
-                        </View>
-                        <View
-                          accessibilityLabel="Text button"
-                          accessibilityRole="button"
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#156FF5",
-                              "borderRadius": 4,
-                              "justifyContent": "center",
-                              "marginBottom": 12,
-                              "opacity": 1,
-                              "paddingHorizontal": 16,
-                              "paddingVertical": 14,
+                          </View>
+                          <RNGestureHandlerButton
+                            accessibilityLabel="Text button"
+                            accessibilityRole="button"
+                            collapsable={false}
+                            enabled={true}
+                            hitSlop={
+                              {
+                                "bottom": 0,
+                                "left": 0,
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
-                          <Text
+                            rippleColor="transparent"
                             style={
                               [
-                                {
-                                  "color": "#FFFFFF",
-                                  "fontSize": 16,
-                                },
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "500",
-                                  "textAlign": "center",
-                                },
-                                undefined,
+                                {},
+                                [
+                                  {
+                                    "justifyContent": "center",
+                                    "paddingHorizontal": 16,
+                                    "paddingVertical": 14,
+                                  },
+                                  {
+                                    "borderRadius": 4,
+                                    "marginBottom": 12,
+                                  },
+                                  {
+                                    "backgroundColor": "#156FF5",
+                                  },
+                                  {},
+                                  undefined,
+                                ],
                               ]
                             }
+                            testOnly_onPress={[Function]}
                           >
-                            Text button
-                          </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "color": "#FFFFFF",
+                                    "fontSize": 16,
+                                  },
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "500",
+                                    "textAlign": "center",
+                                  },
+                                  undefined,
+                                ]
+                              }
+                            >
+                              Text button
+                            </Text>
+                          </RNGestureHandlerButton>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -97780,260 +110433,318 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r6s:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r6s:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={365}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={366}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -98044,88 +110755,68 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "gap": 4,
                             }
                           }
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontWeight": "400",
-                                      "lineHeight": 22,
-                                      "textAlign": "left",
-                                    },
-                                    {},
-                                    false,
-                                  ]
-                                }
-                              >
-                                🥑
-                              </Text>
-                              <Text
-                                accessibilityLabel=" "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                 
-                              </Text>
                               <Text
                                 style={
                                   {
                                     "backgroundColor": "transparent",
+                                    "flexShrink": 1,
                                     "fontFamily": "Inter",
-                                    "fontWeight": "700",
+                                    "fontWeight": "400",
                                     "textAlign": "left",
                                   }
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="Message with markdown"
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontWeight": "400",
+                                        "lineHeight": 22,
+                                        "textAlign": "left",
+                                      },
+                                      {},
+                                      false,
+                                    ]
+                                  }
+                                >
+                                  🥑
+                                </Text>
+                                <Text
+                                  accessibilityLabel=" "
                                   style={
                                     [
                                       {
@@ -98139,55 +110830,137 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
                                     ]
                                   }
                                 >
-                                  Message with markdown
+                                   
+                                </Text>
+                                <Text
+                                  style={
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "700",
+                                      "textAlign": "left",
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    accessibilityLabel="Message with markdown"
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Message with markdown
+                                  </Text>
                                 </Text>
                               </Text>
                             </Text>
-                          </Text>
-                          <View
-                            style={
-                              {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
+                            <View
+                              style={
                                 {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
+                                  "height": 8,
+                                }
+                              }
+                            />
                             <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  style={
+                                    {
+                                      "fontStyle": "italic",
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    accessibilityLabel="Some text"
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Some text
+                                  </Text>
+                                </Text>
+                              </Text>
+                            </Text>
+                            <View
                               style={
                                 {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
+                                  "height": 8,
                                 }
                               }
+                            />
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
                             >
                               <Text
                                 style={
                                   {
-                                    "fontStyle": "italic",
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
                                   }
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="Some text"
+                                  accessibilityLabel="This is a test"
                                   style={
                                     [
                                       {
@@ -98201,134 +110974,75 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
                                     ]
                                   }
                                 >
-                                  Some text
+                                  This is a test
                                 </Text>
                               </Text>
                             </Text>
-                          </Text>
-                          <View
-                            style={
+                          </View>
+                          <RNGestureHandlerButton
+                            accessibilityLabel="Text button"
+                            accessibilityRole="button"
+                            collapsable={false}
+                            enabled={true}
+                            hitSlop={
                               {
-                                "height": 8,
+                                "bottom": 0,
+                                "left": 0,
+                                "right": 0,
+                                "top": 0,
                               }
                             }
-                          />
-                          <Text
+                            rippleColor="transparent"
                             style={
                               [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
+                                {},
+                                [
+                                  {
+                                    "justifyContent": "center",
+                                    "paddingHorizontal": 16,
+                                    "paddingVertical": 14,
+                                  },
+                                  {
+                                    "borderRadius": 4,
+                                    "marginBottom": 12,
+                                  },
+                                  {
+                                    "backgroundColor": "#156FF5",
+                                  },
+                                  {},
+                                  undefined,
+                                ],
                               ]
                             }
+                            testOnly_onPress={[Function]}
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "color": "#FFFFFF",
+                                    "fontSize": 16,
+                                  },
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "500",
+                                    "textAlign": "center",
+                                  },
+                                  undefined,
+                                ]
                               }
                             >
-                              <Text
-                                accessibilityLabel="This is a test"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                This is a test
-                              </Text>
+                              Text button
                             </Text>
-                          </Text>
-                        </View>
-                        <View
-                          accessibilityLabel="Text button"
-                          accessibilityRole="button"
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "backgroundColor": "#156FF5",
-                              "borderRadius": 4,
-                              "justifyContent": "center",
-                              "marginBottom": 12,
-                              "opacity": 1,
-                              "paddingHorizontal": 16,
-                              "paddingVertical": 14,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "color": "#FFFFFF",
-                                  "fontSize": 16,
-                                },
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "500",
-                                  "textAlign": "center",
-                                },
-                                undefined,
-                              ]
-                            }
-                          >
-                            Text button
-                          </Text>
+                          </RNGestureHandlerButton>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -98386,324 +111100,390 @@ exports[`Story Snapshots: StaticAvatar should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r6t:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r6t:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="'s avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={373}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://pbs.twimg.com/profile_images/1016397063649660929/14EIApTi_400x400.jpg",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="'s avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://pbs.twimg.com/profile_images/1016397063649660929/14EIApTi_400x400.jpg",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={374}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
                           style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#6C727A",
-                              },
-                            ]
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -98761,324 +111541,390 @@ exports[`Story Snapshots: StaticAvatarLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r6u:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r6u:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="'s avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={375}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://pbs.twimg.com/profile_images/1016397063649660929/14EIApTi_400x400.jpg",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="'s avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://pbs.twimg.com/profile_images/1016397063649660929/14EIApTi_400x400.jpg",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={376}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -99151,80 +111997,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={377}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -99348,80 +112219,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={378}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -99545,80 +112441,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={379}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -99745,80 +112666,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={380}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -99942,80 +112888,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={381}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -100139,80 +113110,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={382}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -100336,80 +113332,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={383}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -100533,80 +113554,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={384}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -100730,80 +113776,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={385}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -100927,80 +113998,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={386}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -101124,80 +114220,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={387}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -101321,80 +114442,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={388}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -101518,80 +114664,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={389}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -101715,80 +114886,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={390}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -101912,80 +115108,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={391}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -102109,80 +115330,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={392}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -102306,80 +115552,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={393}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -102503,80 +115774,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={394}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -102700,80 +115996,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={395}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -102897,80 +116218,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={396}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -103094,80 +116440,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={397}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -103291,80 +116662,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={398}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -103488,80 +116884,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={399}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -103685,80 +117106,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={400}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -103882,80 +117328,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={401}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -104079,80 +117550,105 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={402}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={20}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 20,
-                      "width": 20,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={20}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={20}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=40",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 20,
+                        "width": 20,
+                      }
+                    }
+                    transition={null}
+                    width={20}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -104267,80 +117763,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={403}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -104464,80 +117985,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={404}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -104661,80 +118207,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={405}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -104861,80 +118432,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={406}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -105058,80 +118654,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={407}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -105255,80 +118876,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={408}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -105452,80 +119098,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={409}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -105649,80 +119320,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={410}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -105846,80 +119542,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={411}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -106043,80 +119764,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={412}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -106240,80 +119986,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={413}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -106437,80 +120208,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={414}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -106634,80 +120430,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={415}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -106831,80 +120652,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={416}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -107028,80 +120874,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={417}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -107225,80 +121096,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={418}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -107422,80 +121318,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={419}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -107619,80 +121540,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={420}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -107816,80 +121762,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={421}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -108013,80 +121984,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={422}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -108210,80 +122206,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={423}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -108407,80 +122428,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={424}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -108604,80 +122650,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={425}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -108801,80 +122872,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={426}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -108998,80 +123094,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={427}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -109195,80 +123316,105 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
               }
               testID="avatar"
             >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
+              <RNGestureHandlerButton
+                activeOpacity={1}
                 collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                delayLongPress={600}
+                enabled={true}
+                handlerTag={428}
+                handlerType="NativeViewGestureHandler"
+                innerRef={null}
+                onActiveStateChange={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onPress={[Function]}
+                rippleColor="#E4E7EA"
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "backgroundColor": undefined,
+                      "borderRadius": undefined,
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "cursor": undefined,
+                    },
+                  ]
                 }
+                underlayColor="#E4E7EA"
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={"[React.ref]"}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={26}
-                  nativeViewRef={"[React.ref]"}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
-                      },
-                    ]
-                  }
+                <View
+                  collapsable={false}
                   style={
                     {
-                      "borderRadius": 4,
-                      "height": 26,
-                      "width": 26,
+                      "backgroundColor": "#E4E7EA",
+                      "borderBottomLeftRadius": undefined,
+                      "borderBottomRightRadius": undefined,
+                      "borderRadius": undefined,
+                      "borderTopLeftRadius": undefined,
+                      "borderTopRightRadius": undefined,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
-                  transition={null}
-                  width={26}
                 />
-              </View>
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={"[React.ref]"}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={26}
+                    nativeViewRef={"[React.ref]"}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=52",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 26,
+                        "width": 26,
+                      }
+                    }
+                    transition={null}
+                    width={26}
+                  />
+                </View>
+              </RNGestureHandlerButton>
             </View>
           </View>
           <A11yIndexView
@@ -109368,329 +123514,395 @@ exports[`Story Snapshots: Temp should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Temp message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Temp message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r8j:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Temp message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Temp message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r8j:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
-                      }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
+                        [
                           {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
+                      }
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={429}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={430}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        style={
-                          {
-                            "opacity": 0.3,
+                            "gap": 4,
                           }
                         }
-                        testID="message-content-Temp message"
                       >
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "opacity": 0.3,
                             }
                           }
+                          testID="message-content-Temp message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Temp message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Temp message
+                                <Text
+                                  accessibilityLabel="Temp message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Temp message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -109748,329 +123960,395 @@ exports[`Story Snapshots: TempLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Temp message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Temp message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r8k:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Temp message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Temp message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r8k:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={431}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={432}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "opacity": 0.3,
+                            "gap": 4,
                           }
                         }
-                        testID="message-content-Temp message"
                       >
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "opacity": 0.3,
                             }
                           }
+                          testID="message-content-Temp message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Temp message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Temp message
+                                <Text
+                                  accessibilityLabel="Temp message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Temp message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -110128,260 +124406,318 @@ exports[`Story Snapshots: ThumbnailFromServer should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  this is a thumbnail.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="this is a thumbnail"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r8l:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  this is a thumbnail.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="this is a thumbnail"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r8l:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={433}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={434}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
                       <View
                         style={
                           {
@@ -110397,261 +124733,274 @@ exports[`Story Snapshots: ThumbnailFromServer should match snapshot 1`] = `
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-Image text"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-Image text"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
-                                    Title
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Title
+                                    </Text>
+                                  </View>
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
-                                        accessibilityLabel="Image text"
                                         style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
                                         }
                                       >
-                                        Image text
+                                        <Text
+                                          accessibilityLabel="Image text"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          Image text
+                                        </Text>
                                       </Text>
                                     </Text>
-                                  </Text>
+                                  </View>
                                 </View>
-                              </View>
-                              <ViewManagerAdapter_ExpoImage
-                                borderTopLeftRadius={4}
-                                borderTopRightRadius={4}
-                                containerViewRef={"[React.ref]"}
-                                contentFit="cover"
-                                contentPosition={
-                                  {
-                                    "left": "50%",
-                                    "top": "50%",
+                                <ViewManagerAdapter_ExpoImage
+                                  borderTopLeftRadius={4}
+                                  borderTopRightRadius={4}
+                                  containerViewRef={"[React.ref]"}
+                                  contentFit="cover"
+                                  contentPosition={
+                                    {
+                                      "left": "50%",
+                                      "top": "50%",
+                                    }
                                   }
-                                }
-                                height={80}
-                                marginBottom={1}
-                                marginLeft={20}
-                                nativeViewRef={"[React.ref]"}
-                                onError={[Function]}
-                                onLoad={[Function]}
-                                onLoadStart={[Function]}
-                                onProgress={[Function]}
-                                placeholder={[]}
-                                source={
-                                  [
+                                  height={80}
+                                  marginBottom={1}
+                                  marginLeft={20}
+                                  nativeViewRef={"[React.ref]"}
+                                  onError={[Function]}
+                                  onLoad={[Function]}
+                                  onLoadStart={[Function]}
+                                  onProgress={[Function]}
+                                  placeholder={[]}
+                                  source={
+                                    [
+                                      {
+                                        "uri": "https://images-na.ssl-images-amazon.com/images/I/71jKxPAMFbL._AC_SL1500_.jpg",
+                                      },
+                                    ]
+                                  }
+                                  style={
                                     {
-                                      "uri": "https://images-na.ssl-images-amazon.com/images/I/71jKxPAMFbL._AC_SL1500_.jpg",
-                                    },
-                                  ]
-                                }
-                                style={
-                                  {
-                                    "borderTopLeftRadius": 4,
-                                    "borderTopRightRadius": 4,
-                                    "height": 80,
-                                    "marginBottom": 1,
-                                    "marginLeft": 20,
-                                    "width": 80,
+                                      "borderTopLeftRadius": 4,
+                                      "borderTopRightRadius": 4,
+                                      "height": 80,
+                                      "marginBottom": 1,
+                                      "marginLeft": 20,
+                                      "width": 80,
+                                    }
                                   }
-                                }
-                                transition={null}
-                                width={80}
-                              />
+                                  transition={null}
+                                  width={80}
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        testID="message-content-this is a thumbnail"
-                      >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-this is a thumbnail"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="this is a thumbnail"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                this is a thumbnail
+                                <Text
+                                  accessibilityLabel="this is a thumbnail"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  this is a thumbnail
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -110709,260 +125058,318 @@ exports[`Story Snapshots: ThumbnailFromServerLargeFont should match snapshot 1`]
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  this is a thumbnail.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="this is a thumbnail"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r8m:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  this is a thumbnail.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="this is a thumbnail"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r8m:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={435}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={436}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -110978,261 +125385,274 @@ exports[`Story Snapshots: ThumbnailFromServerLargeFont should match snapshot 1`]
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-Image text"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-Image text"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flex": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
-                                    Title
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flex": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Title
+                                    </Text>
+                                  </View>
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
-                                        accessibilityLabel="Image text"
                                         style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
                                         }
                                       >
-                                        Image text
+                                        <Text
+                                          accessibilityLabel="Image text"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          Image text
+                                        </Text>
                                       </Text>
                                     </Text>
-                                  </Text>
+                                  </View>
                                 </View>
-                              </View>
-                              <ViewManagerAdapter_ExpoImage
-                                borderTopLeftRadius={4}
-                                borderTopRightRadius={4}
-                                containerViewRef={"[React.ref]"}
-                                contentFit="cover"
-                                contentPosition={
-                                  {
-                                    "left": "50%",
-                                    "top": "50%",
+                                <ViewManagerAdapter_ExpoImage
+                                  borderTopLeftRadius={4}
+                                  borderTopRightRadius={4}
+                                  containerViewRef={"[React.ref]"}
+                                  contentFit="cover"
+                                  contentPosition={
+                                    {
+                                      "left": "50%",
+                                      "top": "50%",
+                                    }
                                   }
-                                }
-                                height={80}
-                                marginBottom={1}
-                                marginLeft={20}
-                                nativeViewRef={"[React.ref]"}
-                                onError={[Function]}
-                                onLoad={[Function]}
-                                onLoadStart={[Function]}
-                                onProgress={[Function]}
-                                placeholder={[]}
-                                source={
-                                  [
+                                  height={80}
+                                  marginBottom={1}
+                                  marginLeft={20}
+                                  nativeViewRef={"[React.ref]"}
+                                  onError={[Function]}
+                                  onLoad={[Function]}
+                                  onLoadStart={[Function]}
+                                  onProgress={[Function]}
+                                  placeholder={[]}
+                                  source={
+                                    [
+                                      {
+                                        "uri": "https://images-na.ssl-images-amazon.com/images/I/71jKxPAMFbL._AC_SL1500_.jpg",
+                                      },
+                                    ]
+                                  }
+                                  style={
                                     {
-                                      "uri": "https://images-na.ssl-images-amazon.com/images/I/71jKxPAMFbL._AC_SL1500_.jpg",
-                                    },
-                                  ]
-                                }
-                                style={
-                                  {
-                                    "borderTopLeftRadius": 4,
-                                    "borderTopRightRadius": 4,
-                                    "height": 80,
-                                    "marginBottom": 1,
-                                    "marginLeft": 20,
-                                    "width": 80,
+                                      "borderTopLeftRadius": 4,
+                                      "borderTopRightRadius": 4,
+                                      "height": 80,
+                                      "marginBottom": 1,
+                                      "marginLeft": 20,
+                                      "width": 80,
+                                    }
                                   }
-                                }
-                                transition={null}
-                                width={80}
-                              />
+                                  transition={null}
+                                  width={80}
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        testID="message-content-this is a thumbnail"
-                      >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-this is a thumbnail"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="this is a thumbnail"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                this is a thumbnail
+                                <Text
+                                  accessibilityLabel="this is a thumbnail"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  this is a thumbnail
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -111290,324 +125710,390 @@ exports[`Story Snapshots: TimeFormat should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Testing.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Testing"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r8n:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Testing.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Testing"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r8n:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={437}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={438}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10 November 2017
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10 November 2017
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Testing"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Testing"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Testing"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Testing
+                                <Text
+                                  accessibilityLabel="Testing"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Testing
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -111665,324 +126151,390 @@ exports[`Story Snapshots: TimeFormatLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Testing.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Testing"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r8o:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Testing.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Testing"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r8o:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={439}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={440}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10 November 2017
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10 November 2017
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Testing"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Testing"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Testing"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Testing
+                                <Text
+                                  accessibilityLabel="Testing"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Testing
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -112040,360 +126592,426 @@ exports[`Story Snapshots: Translated should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM Message translated into English"
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message translated"
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM Message translated into English"
               accessible={true}
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r8p:"
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
+                }
+              }
+              testID="message-undefined"
             >
-              <View
+              <A11yIndexView
+                accessibilityLabel="Message translated"
                 accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r8p:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={441}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={442}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
                         <View
                           style={
                             {
-                              "paddingLeft": 5,
+                              "flexDirection": "row",
                             }
                           }
                         >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
+                          <View
                             style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                  "fontSize": 16,
-                                },
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
                                 [
                                   {
-                                    "lineHeight": 16,
+                                    "color": "#2F343D",
+                                    "fontSize": 16,
                                   },
-                                  undefined,
-                                ],
-                                {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            
-                          </Text>
+                                  [
+                                    {
+                                      "lineHeight": 16,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
                         </View>
                       </View>
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
                       <View
-                        testID="message-content-Message translated"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message translated"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message translated"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message translated
+                                <Text
+                                  accessibilityLabel="Message translated"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message translated
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -112451,360 +127069,426 @@ exports[`Story Snapshots: TranslatedLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM Message translated into English"
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message translated"
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM Message translated into English"
               accessible={true}
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r8q:"
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
+                }
+              }
+              testID="message-undefined"
             >
-              <View
+              <A11yIndexView
+                accessibilityLabel="Message translated"
                 accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r8q:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={443}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={444}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
                         <View
                           style={
                             {
-                              "paddingLeft": 5,
+                              "flexDirection": "row",
                             }
                           }
                         >
-                          <Text
-                            allowFontScaling={false}
-                            selectable={false}
+                          <View
                             style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                  "fontSize": 20.8,
-                                },
+                              {
+                                "paddingLeft": 5,
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
                                 [
                                   {
-                                    "lineHeight": 20.8,
+                                    "color": "#2F343D",
+                                    "fontSize": 20.8,
                                   },
-                                  undefined,
-                                ],
-                                {
-                                  "fontFamily": "custom",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "normal",
-                                },
-                                {},
-                              ]
-                            }
-                          >
-                            
-                          </Text>
+                                  [
+                                    {
+                                      "lineHeight": 20.8,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
                         </View>
                       </View>
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
-                        testID="message-content-Message translated"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message translated"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message translated"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message translated
+                                <Text
+                                  accessibilityLabel="Message translated"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message translated
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -112862,260 +127546,318 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r8r:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r8r:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={445}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
+                  </View>
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={446}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
                       <View
                         style={
                           {
@@ -113131,173 +127873,115 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-rocket.cat-Custom fields"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
                                 }
                               }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-Custom fields"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    rocket.cat
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
                                     <Text
+                                      numberOfLines={1}
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
                                       }
                                     >
-                                      <Text
-                                        accessibilityLabel="Custom fields"
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        Custom fields
-                                      </Text>
+                                      rocket.cat
                                     </Text>
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "flexWrap": "wrap",
-                                      "rowGap": 12,
-                                    }
-                                  }
-                                >
+                                  </View>
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
@@ -113306,8 +127990,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                           {
                                             "backgroundColor": "transparent",
                                             "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
                                             "textAlign": "left",
                                           },
                                           {
@@ -113316,13 +128001,57 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                         ]
                                       }
                                     >
-                                      Field 1
+                                      <Text
+                                        style={
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          accessibilityLabel="Custom fields"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          Custom fields
+                                        </Text>
+                                      </Text>
                                     </Text>
+                                  </View>
+                                  <View
+                                    style={
+                                      {
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "flexWrap": "wrap",
+                                        "rowGap": 12,
+                                      }
+                                    }
+                                  >
                                     <View
                                       style={
-                                        {
-                                          "gap": 2,
-                                        }
+                                        [
+                                          {
+                                            "flexDirection": "column",
+                                          },
+                                          {
+                                            "width": "50%",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
@@ -113331,9 +128060,8 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -113341,75 +128069,76 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 1
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 1"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 1
+                                            <Text
+                                              accessibilityLabel="Value 1"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 1
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 2
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -113417,9 +128146,8 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -113427,222 +128155,183 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 2
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            onLongPress={[Function]}
-                                            onPress={[Function]}
                                             style={
-                                              [
-                                                {
-                                                  "backgroundColor": "transparent",
-                                                  "fontFamily": "Inter",
-                                                  "fontSize": 16,
-                                                  "fontWeight": "400",
-                                                  "textAlign": "left",
-                                                },
-                                                {
-                                                  "color": "#095AD2",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 2
+                                            <Text
+                                              onLongPress={[Function]}
+                                              onPress={[Function]}
+                                              style={
+                                                [
+                                                  {
+                                                    "backgroundColor": "transparent",
+                                                    "fontFamily": "Inter",
+                                                    "fontSize": 16,
+                                                    "fontWeight": "400",
+                                                    "textAlign": "left",
+                                                  },
+                                                  {
+                                                    "color": "#095AD2",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 2
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
                               </View>
                             </View>
                           </View>
-                        </View>
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
-                        >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-rocket.cat-Custom fields 2"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-Custom fields 2"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    rocket.cat
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
                                     <Text
+                                      numberOfLines={1}
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
                                       }
                                     >
-                                      <Text
-                                        accessibilityLabel="Custom fields 2"
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        Custom fields 2
-                                      </Text>
+                                      rocket.cat
                                     </Text>
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "flexWrap": "wrap",
-                                      "rowGap": 12,
-                                    }
-                                  }
-                                >
+                                  </View>
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
@@ -113651,8 +128340,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                           {
                                             "backgroundColor": "transparent",
                                             "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
                                             "textAlign": "left",
                                           },
                                           {
@@ -113661,13 +128351,57 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                         ]
                                       }
                                     >
-                                      Field 1
+                                      <Text
+                                        style={
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          accessibilityLabel="Custom fields 2"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          Custom fields 2
+                                        </Text>
+                                      </Text>
                                     </Text>
+                                  </View>
+                                  <View
+                                    style={
+                                      {
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "flexWrap": "wrap",
+                                        "rowGap": 12,
+                                      }
+                                    }
+                                  >
                                     <View
                                       style={
-                                        {
-                                          "gap": 2,
-                                        }
+                                        [
+                                          {
+                                            "flexDirection": "column",
+                                          },
+                                          {
+                                            "width": "50%",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
@@ -113676,9 +128410,8 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -113686,75 +128419,76 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 1
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 1"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 1
+                                            <Text
+                                              accessibilityLabel="Value 1"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 1
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 2
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -113762,9 +128496,8 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -113772,48 +128505,75 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 2
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
                                             style={
                                               {
                                                 "backgroundColor": "transparent",
+                                                "flexShrink": 1,
                                                 "fontFamily": "Inter",
-                                                "fontWeight": "700",
+                                                "fontWeight": "400",
                                                 "textAlign": "left",
                                               }
                                             }
                                           >
                                             <Text
-                                              accessibilityLabel="Value 2"
                                               style={
-                                                [
-                                                  {
-                                                    "flexShrink": 1,
-                                                    "fontSize": 16,
-                                                    "lineHeight": 22,
-                                                  },
-                                                  {
-                                                    "color": "#2F343D",
-                                                  },
-                                                ]
+                                                {
+                                                  "backgroundColor": "transparent",
+                                                  "fontFamily": "Inter",
+                                                  "fontWeight": "700",
+                                                  "textAlign": "left",
+                                                }
                                               }
                                             >
-                                              Value 2
+                                              <Text
+                                                accessibilityLabel="Value 2"
+                                                style={
+                                                  [
+                                                    {
+                                                      "flexShrink": 1,
+                                                      "fontSize": 16,
+                                                      "lineHeight": 22,
+                                                    },
+                                                    {
+                                                      "color": "#2F343D",
+                                                    },
+                                                  ]
+                                                }
+                                              >
+                                                Value 2
+                                              </Text>
                                             </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
@@ -113821,71 +128581,71 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        testID="message-content-Message"
-                      >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -113943,260 +128703,318 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r8s:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r8s:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={447}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={448}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -114212,259 +129030,115 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-rocket.cat-Custom fields"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-Custom fields"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    rocket.cat
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
-                                      style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
-                                      }
-                                    >
-                                      <Text
-                                        accessibilityLabel="Custom fields"
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        Custom fields
-                                      </Text>
-                                    </Text>
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "flexWrap": "wrap",
-                                      "rowGap": 12,
+                                      "width": 200,
                                     }
                                   }
                                 >
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
                                     }
                                   >
                                     <Text
+                                      numberOfLines={1}
                                       style={
                                         [
                                           {
                                             "backgroundColor": "transparent",
+                                            "flexShrink": 1,
                                             "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
                                             "textAlign": "left",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "color": "#6C727A",
                                           },
                                         ]
                                       }
                                     >
-                                      Field 1
+                                      rocket.cat
                                     </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
-                                    >
-                                      <Text
-                                        style={
-                                          [
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
-                                              "textAlign": "left",
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <Text
-                                          style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
-                                          }
-                                        >
-                                          <Text
-                                            accessibilityLabel="Value 1"
-                                            style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            Value 1
-                                          </Text>
-                                        </Text>
-                                      </Text>
-                                    </View>
                                   </View>
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
@@ -114473,8 +129147,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                                           {
                                             "backgroundColor": "transparent",
                                             "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
                                             "textAlign": "left",
                                           },
                                           {
@@ -114482,274 +129157,59 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 2
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
-                                          [
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
-                                              "textAlign": "left",
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
                                         }
                                       >
                                         <Text
+                                          accessibilityLabel="Custom fields"
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
-                                          <Text
-                                            onLongPress={[Function]}
-                                            onPress={[Function]}
-                                            style={
-                                              [
-                                                {
-                                                  "backgroundColor": "transparent",
-                                                  "fontFamily": "Inter",
-                                                  "fontSize": 16,
-                                                  "fontWeight": "400",
-                                                  "textAlign": "left",
-                                                },
-                                                {
-                                                  "color": "#095AD2",
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            Value 2
-                                          </Text>
+                                          Custom fields
                                         </Text>
                                       </Text>
-                                    </View>
-                                  </View>
-                                </View>
-                              </View>
-                            </View>
-                          </View>
-                        </View>
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
-                        >
-                          <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
-                              }
-                            }
-                            testID="reply-rocket.cat-Custom fields 2"
-                          >
-                            <View
-                              style={
-                                {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
-                                }
-                              }
-                            >
-                              <View
-                                style={
-                                  {
-                                    "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
-                                  }
-                                }
-                              >
-                                <View
-                                  style={
-                                    {
-                                      "alignItems": "center",
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "gap": 4,
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    numberOfLines={1}
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "500",
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#6C727A",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    rocket.cat
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
-                                      style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
-                                      }
-                                    >
-                                      <Text
-                                        accessibilityLabel="Custom fields 2"
-                                        style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        Custom fields 2
-                                      </Text>
                                     </Text>
-                                  </Text>
-                                </View>
-                                <View
-                                  style={
-                                    {
-                                      "flex": 1,
-                                      "flexDirection": "row",
-                                      "flexWrap": "wrap",
-                                      "rowGap": 12,
-                                    }
-                                  }
-                                >
+                                  </View>
                                   <View
                                     style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
+                                      {
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "flexWrap": "wrap",
+                                        "rowGap": 12,
+                                      }
                                     }
                                   >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 1
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -114757,9 +129217,8 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -114767,75 +129226,76 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 1
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
-                                            accessibilityLabel="Value 1"
                                             style={
-                                              [
-                                                {
-                                                  "flexShrink": 1,
-                                                  "fontSize": 16,
-                                                  "lineHeight": 22,
-                                                },
-                                                {
-                                                  "color": "#2F343D",
-                                                },
-                                              ]
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
                                             }
                                           >
-                                            Value 1
+                                            <Text
+                                              accessibilityLabel="Value 1"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 1
+                                            </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
-                                  </View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "flexDirection": "column",
-                                        },
-                                        {
-                                          "width": "50%",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <Text
+                                    <View
                                       style={
                                         [
                                           {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 14,
-                                            "fontWeight": "600",
-                                            "textAlign": "left",
+                                            "flexDirection": "column",
                                           },
                                           {
-                                            "color": "#2F343D",
+                                            "width": "50%",
                                           },
                                         ]
                                       }
-                                    >
-                                      Field 2
-                                    </Text>
-                                    <View
-                                      style={
-                                        {
-                                          "gap": 2,
-                                        }
-                                      }
                                     >
                                       <Text
                                         style={
@@ -114843,9 +129303,8 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                                             {
                                               "backgroundColor": "transparent",
                                               "fontFamily": "Inter",
-                                              "fontSize": 16,
-                                              "fontWeight": "400",
-                                              "lineHeight": 22,
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
                                               "textAlign": "left",
                                             },
                                             {
@@ -114853,39 +129312,58 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                                             },
                                           ]
                                         }
+                                      >
+                                        Field 2
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
                                       >
                                         <Text
                                           style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "flexShrink": 1,
-                                              "fontFamily": "Inter",
-                                              "fontWeight": "400",
-                                              "textAlign": "left",
-                                            }
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
                                           }
                                         >
                                           <Text
                                             style={
                                               {
                                                 "backgroundColor": "transparent",
+                                                "flexShrink": 1,
                                                 "fontFamily": "Inter",
-                                                "fontWeight": "700",
+                                                "fontWeight": "400",
                                                 "textAlign": "left",
                                               }
                                             }
                                           >
                                             <Text
-                                              accessibilityLabel="Value 2"
+                                              onLongPress={[Function]}
+                                              onPress={[Function]}
                                               style={
                                                 [
                                                   {
-                                                    "flexShrink": 1,
+                                                    "backgroundColor": "transparent",
+                                                    "fontFamily": "Inter",
                                                     "fontSize": 16,
-                                                    "lineHeight": 22,
+                                                    "fontWeight": "400",
+                                                    "textAlign": "left",
                                                   },
                                                   {
-                                                    "color": "#2F343D",
+                                                    "color": "#095AD2",
                                                   },
                                                 ]
                                               }
@@ -114894,1094 +129372,462 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                                             </Text>
                                           </Text>
                                         </Text>
-                                      </Text>
+                                      </View>
                                     </View>
                                   </View>
-                                </View>
-                              </View>
-                            </View>
-                          </View>
-                        </View>
-                      </View>
-                      <View
-                        testID="message-content-Message"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Message"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Message
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: URL should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
-    <A11yOrderView
-      orderKey=":r8t:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r8t:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
-        >
-          <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
-          >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r8t:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                >
-                  <View
-                    accessible={true}
-                    style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
-                      }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "backgroundColor": "#F7F8FA",
-                            "borderColor": "#CBCED1",
-                            "borderRadius": 4,
-                            "borderWidth": 1,
-                            "flex": 1,
-                            "flexDirection": "column",
-                            "gap": 4,
-                            "opacity": 1,
-                            "overflow": "hidden",
-                          }
-                        }
-                      >
-                        <View
-                          style={
-                            {
-                              "alignItems": "flex-start",
-                              "flex": 1,
-                              "flexDirection": "column",
-                              "justifyContent": "flex-start",
-                              "padding": 12,
-                            }
-                          }
-                        >
-                          <Text
-                            numberOfLines={2}
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "500",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#095AD2",
-                                },
-                              ]
-                            }
-                          >
-                            Rocket.Chat - Free, Open Source, Enterprise Team Chat
-                          </Text>
-                          <Text
-                            numberOfLines={2}
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#6C727A",
-                                },
-                              ]
-                            }
-                          >
-                            Rocket.Chat is the leading open source team chat software solution. Free, unlimited and completely customizable with on-premises and SaaS cloud hosting.
-                          </Text>
-                        </View>
-                      </View>
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "backgroundColor": "#F7F8FA",
-                            "borderColor": "#CBCED1",
-                            "borderRadius": 4,
-                            "borderWidth": 1,
-                            "flex": 1,
-                            "flexDirection": "column",
-                            "gap": 4,
-                            "opacity": 1,
-                            "overflow": "hidden",
-                          }
-                        }
-                      >
-                        <View
-                          style={
-                            {
-                              "alignItems": "flex-start",
-                              "flex": 1,
-                              "flexDirection": "column",
-                              "justifyContent": "flex-start",
-                              "padding": 12,
-                            }
-                          }
-                        >
-                          <Text
-                            numberOfLines={2}
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "500",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#095AD2",
-                                },
-                              ]
+                              {
+                                "gap": 4,
+                              }
                             }
                           >
-                            Google
-                          </Text>
-                          <Text
-                            numberOfLines={2}
-                            style={
-                              [
+                            <View
+                              accessibilityState={
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                },
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
                                 {
-                                  "color": "#6C727A",
-                                },
-                              ]
-                            }
-                          >
-                            Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
-                          </Text>
-                        </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </A11yIndexView>
-          </View>
-        </View>
-      </A11yIndexView>
-    </A11yOrderView>
-    <A11yOrderView
-      orderKey=":r8u:"
-    >
-      <A11yIndexView
-        importantForAccessibility="yes"
-        orderFocusType={0}
-        orderIndex={1}
-        orderKey=":r8u:"
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": undefined,
-              "opacity": 1,
-            }
-          }
-        >
-          <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message :nyan_rocket:.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
-          >
-            <A11yIndexView
-              accessibilityLabel="Message :nyan_rocket:"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r8u:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                >
-                  <View
-                    accessible={true}
-                    style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
-                      }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message :nyan_rocket:"
-                      >
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-rocket.cat-Custom fields 2"
+                            >
+                              <View
+                                style={
+                                  {
+                                    "borderRadius": 4,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "flexDirection": "column",
+                                      "gap": 4,
+                                      "width": 200,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      numberOfLines={1}
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "500",
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#6C727A",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      rocket.cat
+                                    </Text>
+                                  </View>
+                                  <View
+                                    style={
+                                      {
+                                        "gap": 2,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      style={
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      <Text
+                                        style={
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          accessibilityLabel="Custom fields 2"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          Custom fields 2
+                                        </Text>
+                                      </Text>
+                                    </Text>
+                                  </View>
+                                  <View
+                                    style={
+                                      {
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "flexWrap": "wrap",
+                                        "rowGap": 12,
+                                      }
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        [
+                                          {
+                                            "flexDirection": "column",
+                                          },
+                                          {
+                                            "width": "50%",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      <Text
+                                        style={
+                                          [
+                                            {
+                                              "backgroundColor": "transparent",
+                                              "fontFamily": "Inter",
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
+                                              "textAlign": "left",
+                                            },
+                                            {
+                                              "color": "#2F343D",
+                                            },
+                                          ]
+                                        }
+                                      >
+                                        Field 1
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          style={
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            style={
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
+                                            }
+                                          >
+                                            <Text
+                                              accessibilityLabel="Value 1"
+                                              style={
+                                                [
+                                                  {
+                                                    "flexShrink": 1,
+                                                    "fontSize": 16,
+                                                    "lineHeight": 22,
+                                                  },
+                                                  {
+                                                    "color": "#2F343D",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              Value 1
+                                            </Text>
+                                          </Text>
+                                        </Text>
+                                      </View>
+                                    </View>
+                                    <View
+                                      style={
+                                        [
+                                          {
+                                            "flexDirection": "column",
+                                          },
+                                          {
+                                            "width": "50%",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      <Text
+                                        style={
+                                          [
+                                            {
+                                              "backgroundColor": "transparent",
+                                              "fontFamily": "Inter",
+                                              "fontSize": 14,
+                                              "fontWeight": "600",
+                                              "textAlign": "left",
+                                            },
+                                            {
+                                              "color": "#2F343D",
+                                            },
+                                          ]
+                                        }
+                                      >
+                                        Field 2
+                                      </Text>
+                                      <View
+                                        style={
+                                          {
+                                            "gap": 2,
+                                          }
+                                        }
+                                      >
+                                        <Text
+                                          style={
+                                            [
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "fontFamily": "Inter",
+                                                "fontSize": 16,
+                                                "fontWeight": "400",
+                                                "lineHeight": 22,
+                                                "textAlign": "left",
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            style={
+                                              {
+                                                "backgroundColor": "transparent",
+                                                "flexShrink": 1,
+                                                "fontFamily": "Inter",
+                                                "fontWeight": "400",
+                                                "textAlign": "left",
+                                              }
+                                            }
+                                          >
+                                            <Text
+                                              style={
+                                                {
+                                                  "backgroundColor": "transparent",
+                                                  "fontFamily": "Inter",
+                                                  "fontWeight": "700",
+                                                  "textAlign": "left",
+                                                }
+                                              }
+                                            >
+                                              <Text
+                                                accessibilityLabel="Value 2"
+                                                style={
+                                                  [
+                                                    {
+                                                      "flexShrink": 1,
+                                                      "fontSize": 16,
+                                                      "lineHeight": 22,
+                                                    },
+                                                    {
+                                                      "color": "#2F343D",
+                                                    },
+                                                  ]
+                                                }
+                                              >
+                                                Value 2
+                                              </Text>
+                                            </Text>
+                                          </Text>
+                                        </Text>
+                                      </View>
+                                    </View>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Message 
-                              </Text>
-                              <View
                                 style={
-                                  [
-                                    {
-                                      "transform": [
-                                        {
-                                          "translateY": 3,
-                                        },
-                                      ],
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                <ViewManagerAdapter_ExpoImage
-                                  containerViewRef={"[React.ref]"}
-                                  contentFit="contain"
-                                  contentPosition={
-                                    {
-                                      "left": "50%",
-                                      "top": "50%",
-                                    }
-                                  }
-                                  height={15}
-                                  nativeViewRef={"[React.ref]"}
-                                  onError={[Function]}
-                                  onLoad={[Function]}
-                                  onLoadStart={[Function]}
-                                  onProgress={[Function]}
-                                  placeholder={[]}
-                                  source={
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
                                     [
                                       {
-                                        "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
                                       },
                                     ]
                                   }
-                                  style={
-                                    {
-                                      "height": 15,
-                                      "width": 15,
-                                    }
-                                  }
-                                  transition={null}
-                                  width={15}
-                                />
-                              </View>
+                                >
+                                  Message
+                                </Text>
+                              </Text>
                             </Text>
-                          </Text>
-                        </View>
-                      </View>
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "backgroundColor": "#F7F8FA",
-                            "borderColor": "#CBCED1",
-                            "borderRadius": 4,
-                            "borderWidth": 1,
-                            "flex": 1,
-                            "flexDirection": "column",
-                            "gap": 4,
-                            "opacity": 1,
-                            "overflow": "hidden",
-                          }
-                        }
-                      >
-                        <View
-                          style={
-                            {
-                              "alignItems": "flex-start",
-                              "flex": 1,
-                              "flexDirection": "column",
-                              "justifyContent": "flex-start",
-                              "padding": 12,
-                            }
-                          }
-                        >
-                          <Text
-                            numberOfLines={2}
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "500",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#095AD2",
-                                },
-                              ]
-                            }
-                          >
-                            Google
-                          </Text>
-                          <Text
-                            numberOfLines={2}
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#6C727A",
-                                },
-                              ]
-                            }
-                          >
-                            Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: URL should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r8v:"
+      orderKey=":r8t:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r8v:"
+        orderKey=":r8t:"
       >
         <View
           accessibilityState={
@@ -116014,200 +129860,539 @@ exports[`Story Snapshots: URL should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r8v:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r8t:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  >
+                    <View
+                      accessible={true}
+                      style={
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
+                      }
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={449}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        accessibilityState={
+                        style={
                           {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
                           }
                         }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={450}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
                           }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "backgroundColor": "#F7F8FA",
-                            "borderColor": "#CBCED1",
-                            "borderRadius": 4,
-                            "borderWidth": 1,
-                            "flex": 1,
-                            "flexDirection": "column",
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
                             "gap": 4,
-                            "opacity": 1,
-                            "overflow": "hidden",
                           }
                         }
                       >
                         <View
+                          accessibilityState={
+                            {
+                              "busy": undefined,
+                              "checked": undefined,
+                              "disabled": undefined,
+                              "expanded": undefined,
+                              "selected": undefined,
+                            }
+                          }
+                          accessibilityValue={
+                            {
+                              "max": undefined,
+                              "min": undefined,
+                              "now": undefined,
+                              "text": undefined,
+                            }
+                          }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
                           style={
+                            [
+                              {
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "gap": 4,
+                              },
+                              {
+                                "backgroundColor": "#F7F8FA",
+                                "borderColor": "#CBCED1",
+                                "borderRadius": 4,
+                                "borderWidth": 1,
+                                "overflow": "hidden",
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "flex-start",
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "justifyContent": "flex-start",
+                                "padding": 12,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={2}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#095AD2",
+                                  },
+                                ]
+                              }
+                            >
+                              Rocket.Chat - Free, Open Source, Enterprise Team Chat
+                            </Text>
+                            <Text
+                              numberOfLines={2}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              Rocket.Chat is the leading open source team chat software solution. Free, unlimited and completely customizable with on-premises and SaaS cloud hosting.
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          accessibilityState={
+                            {
+                              "busy": undefined,
+                              "checked": undefined,
+                              "disabled": undefined,
+                              "expanded": undefined,
+                              "selected": undefined,
+                            }
+                          }
+                          accessibilityValue={
                             {
-                              "alignItems": "flex-start",
-                              "flex": 1,
-                              "flexDirection": "column",
-                              "justifyContent": "flex-start",
-                              "padding": 12,
+                              "max": undefined,
+                              "min": undefined,
+                              "now": undefined,
+                              "text": undefined,
                             }
                           }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          style={
+                            [
+                              {
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "gap": 4,
+                              },
+                              {
+                                "backgroundColor": "#F7F8FA",
+                                "borderColor": "#CBCED1",
+                                "borderRadius": 4,
+                                "borderWidth": 1,
+                                "overflow": "hidden",
+                              },
+                            ]
+                          }
                         >
-                          <Text
-                            numberOfLines={2}
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "500",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#095AD2",
-                                },
-                              ]
-                            }
-                          >
-                            Google
-                          </Text>
-                          <Text
-                            numberOfLines={2}
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#6C727A",
-                                },
-                              ]
+                              {
+                                "alignItems": "flex-start",
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "justifyContent": "flex-start",
+                                "padding": 12,
+                              }
                             }
                           >
-                            Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
-                          </Text>
+                            <Text
+                              numberOfLines={2}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#095AD2",
+                                  },
+                                ]
+                              }
+                            >
+                              Google
+                            </Text>
+                            <Text
+                              numberOfLines={2}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
+                            </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: URLImagePreview should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r90:"
+      orderKey=":r8u:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r90:"
+        orderKey=":r8u:"
       >
         <View
           accessibilityState={
@@ -116240,370 +130425,544 @@ exports[`Story Snapshots: URLImagePreview should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r90:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message :nyan_rocket:.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message :nyan_rocket:"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r8u:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={451}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={452}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "backgroundColor": "#F7F8FA",
-                            "borderColor": "#CBCED1",
-                            "borderRadius": 4,
-                            "borderWidth": 1,
-                            "flex": 1,
-                            "flexDirection": "column",
                             "gap": 4,
-                            "opacity": 1,
-                            "overflow": "hidden",
                           }
                         }
                       >
                         <View
-                          style={
-                            {
-                              "alignItems": "flex-start",
-                              "flex": 1,
-                              "flexDirection": "column",
-                              "justifyContent": "flex-start",
-                              "padding": 12,
-                            }
-                          }
+                          testID="message-content-Message :nyan_rocket:"
                         >
-                          <Text
-                            numberOfLines={2}
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "500",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#095AD2",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
-                            Google
-                          </Text>
-                          <Text
-                            numberOfLines={2}
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Message "
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message 
+                                </Text>
+                                <View
+                                  style={
+                                    {
+                                      "transform": [
+                                        {
+                                          "translateY": 3,
+                                        },
+                                      ],
+                                    }
+                                  }
+                                >
+                                  <ViewManagerAdapter_ExpoImage
+                                    containerViewRef={"[React.ref]"}
+                                    contentFit="contain"
+                                    contentPosition={
+                                      {
+                                        "left": "50%",
+                                        "top": "50%",
+                                      }
+                                    }
+                                    height={15}
+                                    nativeViewRef={"[React.ref]"}
+                                    onError={[Function]}
+                                    onLoad={[Function]}
+                                    onLoadStart={[Function]}
+                                    onProgress={[Function]}
+                                    placeholder={[]}
+                                    source={
+                                      [
+                                        {
+                                          "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                        },
+                                      ]
+                                    }
+                                    style={
+                                      {
+                                        "height": 15,
+                                        "width": 15,
+                                      }
+                                    }
+                                    transition={null}
+                                    width={15}
+                                  />
+                                </View>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          accessibilityState={
+                            {
+                              "busy": undefined,
+                              "checked": undefined,
+                              "disabled": undefined,
+                              "expanded": undefined,
+                              "selected": undefined,
+                            }
+                          }
+                          accessibilityValue={
+                            {
+                              "max": undefined,
+                              "min": undefined,
+                              "now": undefined,
+                              "text": undefined,
+                            }
+                          }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          style={
+                            [
+                              {
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "gap": 4,
+                              },
+                              {
+                                "backgroundColor": "#F7F8FA",
+                                "borderColor": "#CBCED1",
+                                "borderRadius": 4,
+                                "borderWidth": 1,
+                                "overflow": "hidden",
+                              },
+                            ]
+                          }
+                        >
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#6C727A",
-                                },
-                              ]
+                              {
+                                "alignItems": "flex-start",
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "justifyContent": "flex-start",
+                                "padding": 12,
+                              }
                             }
                           >
-                            Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
-                          </Text>
+                            <Text
+                              numberOfLines={2}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#095AD2",
+                                  },
+                                ]
+                              }
+                            >
+                              Google
+                            </Text>
+                            <Text
+                              numberOfLines={2}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
+                            </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r91:"
+      orderKey=":r8v:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r91:"
+        orderKey=":r8v:"
       >
         <View
           accessibilityState={
@@ -116636,302 +130995,194 @@ exports[`Story Snapshots: URLImagePreview should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r91:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r8v:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
                       }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
                     }
-                  }
-                >
+                  />
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
                             "gap": 4,
-                            "opacity": 1,
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
+                        <View
+                          accessibilityState={
+                            {
+                              "busy": undefined,
+                              "checked": undefined,
+                              "disabled": undefined,
+                              "expanded": undefined,
+                              "selected": undefined,
+                            }
                           }
-                        >
-                          diego.mello
-                        </Text>
-                        <Text
+                          accessibilityValue={
+                            {
+                              "max": undefined,
+                              "min": undefined,
+                              "now": undefined,
+                              "text": undefined,
+                            }
+                          }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "gap": 4,
                               },
                               {
-                                "color": "#6C727A",
+                                "backgroundColor": "#F7F8FA",
+                                "borderColor": "#CBCED1",
+                                "borderRadius": 4,
+                                "borderWidth": 1,
+                                "overflow": "hidden",
                               },
                             ]
                           }
                         >
-                          10:00 AM
-                        </Text>
+                          <View
+                            style={
+                              {
+                                "alignItems": "flex-start",
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "justifyContent": "flex-start",
+                                "padding": 12,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={2}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#095AD2",
+                                  },
+                                ]
+                              }
+                            >
+                              Google
+                            </Text>
+                            <Text
+                              numberOfLines={2}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
+                            </Text>
+                          </View>
+                        </View>
                       </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "flex": 1,
-                            "flexDirection": "column",
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                      />
                     </View>
                   </View>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
+                  />
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -116940,7 +131191,7 @@ exports[`Story Snapshots: URLImagePreview should match snapshot 1`] = `
 </RCTScrollView>
 `;
 
-exports[`Story Snapshots: URLImagePreviewLargeFont should match snapshot 1`] = `
+exports[`Story Snapshots: URLImagePreview should match snapshot 1`] = `
 <RCTScrollView
   style={
     {
@@ -116950,13 +131201,13 @@ exports[`Story Snapshots: URLImagePreviewLargeFont should match snapshot 1`] = `
 >
   <View>
     <A11yOrderView
-      orderKey=":r92:"
+      orderKey=":r90:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r92:"
+        orderKey=":r90:"
       >
         <View
           accessibilityState={
@@ -116989,370 +131240,441 @@ exports[`Story Snapshots: URLImagePreviewLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r92:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r90:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={453}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
                         }
                       }
                     >
                       <View
-                        accessibilityState={
+                        style={
                           {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
                           }
                         }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={454}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
                           }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "backgroundColor": "#F7F8FA",
-                            "borderColor": "#CBCED1",
-                            "borderRadius": 4,
-                            "borderWidth": 1,
-                            "flex": 1,
-                            "flexDirection": "column",
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
                             "gap": 4,
-                            "opacity": 1,
-                            "overflow": "hidden",
                           }
                         }
                       >
                         <View
-                          style={
+                          accessibilityState={
                             {
-                              "alignItems": "flex-start",
-                              "flex": 1,
-                              "flexDirection": "column",
-                              "justifyContent": "flex-start",
-                              "padding": 12,
+                              "busy": undefined,
+                              "checked": undefined,
+                              "disabled": undefined,
+                              "expanded": undefined,
+                              "selected": undefined,
                             }
                           }
-                        >
-                          <Text
-                            numberOfLines={2}
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "500",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#095AD2",
-                                },
-                              ]
+                          accessibilityValue={
+                            {
+                              "max": undefined,
+                              "min": undefined,
+                              "now": undefined,
+                              "text": undefined,
                             }
-                          >
-                            Google
-                          </Text>
-                          <Text
-                            numberOfLines={2}
+                          }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          style={
+                            [
+                              {
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "gap": 4,
+                              },
+                              {
+                                "backgroundColor": "#F7F8FA",
+                                "borderColor": "#CBCED1",
+                                "borderRadius": 4,
+                                "borderWidth": 1,
+                                "overflow": "hidden",
+                              },
+                            ]
+                          }
+                        >
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#6C727A",
-                                },
-                              ]
+                              {
+                                "alignItems": "flex-start",
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "justifyContent": "flex-start",
+                                "padding": 12,
+                              }
                             }
                           >
-                            Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
-                          </Text>
+                            <Text
+                              numberOfLines={2}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#095AD2",
+                                  },
+                                ]
+                              }
+                            >
+                              Google
+                            </Text>
+                            <Text
+                              numberOfLines={2}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
+                            </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r93:"
+      orderKey=":r91:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r93:"
+        orderKey=":r91:"
       >
         <View
           accessibilityState={
@@ -117385,302 +131707,372 @@ exports[`Story Snapshots: URLImagePreviewLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r93:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r91:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={455}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={456}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
+                      >
+                        <View
+                          accessibilityState={
+                            {
+                              "busy": undefined,
+                              "checked": undefined,
+                              "disabled": undefined,
+                              "expanded": undefined,
+                              "selected": undefined,
+                            }
                           }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
+                          accessibilityValue={
+                            {
+                              "max": undefined,
+                              "min": undefined,
+                              "now": undefined,
+                              "text": undefined,
+                            }
                           }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "flex": 1,
-                            "flexDirection": "column",
-                            "gap": 4,
-                            "opacity": 1,
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          style={
+                            [
+                              {
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "gap": 4,
+                              },
+                              false,
+                            ]
                           }
-                        }
-                      />
+                        />
+                      </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -117689,7 +132081,7 @@ exports[`Story Snapshots: URLImagePreviewLargeFont should match snapshot 1`] = `
 </RCTScrollView>
 `;
 
-exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
+exports[`Story Snapshots: URLImagePreviewLargeFont should match snapshot 1`] = `
 <RCTScrollView
   style={
     {
@@ -117699,13 +132091,13 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
 >
   <View>
     <A11yOrderView
-      orderKey=":r94:"
+      orderKey=":r92:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r94:"
+        orderKey=":r92:"
       >
         <View
           accessibilityState={
@@ -117738,463 +132130,441 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r94:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r92:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={457}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={458}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
+                        style={
                           {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "backgroundColor": "#F7F8FA",
-                            "borderColor": "#CBCED1",
-                            "borderRadius": 4,
-                            "borderWidth": 1,
-                            "flex": 1,
-                            "flexDirection": "column",
                             "gap": 4,
-                            "opacity": 1,
-                            "overflow": "hidden",
                           }
                         }
                       >
                         <View
-                          style={
+                          accessibilityState={
                             {
-                              "alignItems": "flex-start",
-                              "flex": 1,
-                              "flexDirection": "column",
-                              "justifyContent": "flex-start",
-                              "padding": 12,
+                              "busy": undefined,
+                              "checked": undefined,
+                              "disabled": undefined,
+                              "expanded": undefined,
+                              "selected": undefined,
                             }
                           }
-                        >
-                          <Text
-                            numberOfLines={2}
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "500",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#095AD2",
-                                },
-                              ]
-                            }
-                          >
-                            Rocket.Chat - Free, Open Source, Enterprise Team Chat
-                          </Text>
-                          <Text
-                            numberOfLines={2}
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#6C727A",
-                                },
-                              ]
+                          accessibilityValue={
+                            {
+                              "max": undefined,
+                              "min": undefined,
+                              "now": undefined,
+                              "text": undefined,
                             }
-                          >
-                            Rocket.Chat is the leading open source team chat software solution. Free, unlimited and completely customizable with on-premises and SaaS cloud hosting.
-                          </Text>
-                        </View>
-                      </View>
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
                           }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "backgroundColor": "#F7F8FA",
-                            "borderColor": "#CBCED1",
-                            "borderRadius": 4,
-                            "borderWidth": 1,
-                            "flex": 1,
-                            "flexDirection": "column",
-                            "gap": 4,
-                            "opacity": 1,
-                            "overflow": "hidden",
-                          }
-                        }
-                      >
-                        <View
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
                           style={
-                            {
-                              "alignItems": "flex-start",
-                              "flex": 1,
-                              "flexDirection": "column",
-                              "justifyContent": "flex-start",
-                              "padding": 12,
-                            }
+                            [
+                              {
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "gap": 4,
+                              },
+                              {
+                                "backgroundColor": "#F7F8FA",
+                                "borderColor": "#CBCED1",
+                                "borderRadius": 4,
+                                "borderWidth": 1,
+                                "overflow": "hidden",
+                              },
+                            ]
                           }
                         >
-                          <Text
-                            numberOfLines={2}
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "500",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#095AD2",
-                                },
-                              ]
-                            }
-                          >
-                            Google
-                          </Text>
-                          <Text
-                            numberOfLines={2}
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#6C727A",
-                                },
-                              ]
+                              {
+                                "alignItems": "flex-start",
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "justifyContent": "flex-start",
+                                "padding": 12,
+                              }
                             }
                           >
-                            Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
-                          </Text>
+                            <Text
+                              numberOfLines={2}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#095AD2",
+                                  },
+                                ]
+                              }
+                            >
+                              Google
+                            </Text>
+                            <Text
+                              numberOfLines={2}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
+                            </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r95:"
+      orderKey=":r93:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r95:"
+        orderKey=":r93:"
       >
         <View
           accessibilityState={
@@ -118227,475 +132597,397 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message :nyan_rocket:.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message :nyan_rocket:"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r95:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r93:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={459}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={460}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message :nyan_rocket:"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
-                          <Text
+                          />
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
                           >
                             <Text
+                              numberOfLines={1}
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
                               }
                             >
-                              <Text
-                                accessibilityLabel="Message "
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Message 
-                              </Text>
-                              <View
-                                style={
-                                  [
-                                    {
-                                      "transform": [
-                                        {
-                                          "translateY": 3,
-                                        },
-                                      ],
-                                    },
-                                  ]
-                                }
-                              >
-                                <ViewManagerAdapter_ExpoImage
-                                  containerViewRef={"[React.ref]"}
-                                  contentFit="contain"
-                                  contentPosition={
-                                    {
-                                      "left": "50%",
-                                      "top": "50%",
-                                    }
-                                  }
-                                  height={15}
-                                  nativeViewRef={"[React.ref]"}
-                                  onError={[Function]}
-                                  onLoad={[Function]}
-                                  onLoadStart={[Function]}
-                                  onProgress={[Function]}
-                                  placeholder={[]}
-                                  source={
-                                    [
-                                      {
-                                        "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                      },
-                                    ]
-                                  }
-                                  style={
-                                    {
-                                      "height": 15,
-                                      "width": 15,
-                                    }
-                                  }
-                                  transition={null}
-                                  width={15}
-                                />
-                              </View>
+                              diego.mello
                             </Text>
-                          </Text>
-                        </View>
-                      </View>
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                        accessibilityValue={
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
                           {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "backgroundColor": "#F7F8FA",
-                            "borderColor": "#CBCED1",
-                            "borderRadius": 4,
-                            "borderWidth": 1,
-                            "flex": 1,
-                            "flexDirection": "column",
                             "gap": 4,
-                            "opacity": 1,
-                            "overflow": "hidden",
                           }
                         }
                       >
                         <View
-                          style={
+                          accessibilityState={
                             {
-                              "alignItems": "flex-start",
-                              "flex": 1,
-                              "flexDirection": "column",
-                              "justifyContent": "flex-start",
-                              "padding": 12,
+                              "busy": undefined,
+                              "checked": undefined,
+                              "disabled": undefined,
+                              "expanded": undefined,
+                              "selected": undefined,
                             }
                           }
-                        >
-                          <Text
-                            numberOfLines={2}
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "500",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#095AD2",
-                                },
-                              ]
-                            }
-                          >
-                            Google
-                          </Text>
-                          <Text
-                            numberOfLines={2}
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#6C727A",
-                                },
-                              ]
+                          accessibilityValue={
+                            {
+                              "max": undefined,
+                              "min": undefined,
+                              "now": undefined,
+                              "text": undefined,
                             }
-                          >
-                            Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
-                          </Text>
-                        </View>
+                          }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          style={
+                            [
+                              {
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "gap": 4,
+                              },
+                              false,
+                            ]
+                          }
+                        />
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r96:"
+      orderKey=":r94:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r96:"
+        orderKey=":r94:"
       >
         <View
           accessibilityState={
@@ -118728,200 +133020,539 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r96:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r94:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
+                  >
+                    <View
+                      accessible={true}
+                      style={
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
+                      }
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={461}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        accessibilityState={
+                        style={
                           {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
                           }
                         }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={462}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "backgroundColor": "#F7F8FA",
-                            "borderColor": "#CBCED1",
-                            "borderRadius": 4,
-                            "borderWidth": 1,
-                            "flex": 1,
-                            "flexDirection": "column",
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
                             "gap": 4,
-                            "opacity": 1,
-                            "overflow": "hidden",
                           }
                         }
                       >
                         <View
-                          style={
+                          accessibilityState={
+                            {
+                              "busy": undefined,
+                              "checked": undefined,
+                              "disabled": undefined,
+                              "expanded": undefined,
+                              "selected": undefined,
+                            }
+                          }
+                          accessibilityValue={
+                            {
+                              "max": undefined,
+                              "min": undefined,
+                              "now": undefined,
+                              "text": undefined,
+                            }
+                          }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          style={
+                            [
+                              {
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "gap": 4,
+                              },
+                              {
+                                "backgroundColor": "#F7F8FA",
+                                "borderColor": "#CBCED1",
+                                "borderRadius": 4,
+                                "borderWidth": 1,
+                                "overflow": "hidden",
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "flex-start",
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "justifyContent": "flex-start",
+                                "padding": 12,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={2}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#095AD2",
+                                  },
+                                ]
+                              }
+                            >
+                              Rocket.Chat - Free, Open Source, Enterprise Team Chat
+                            </Text>
+                            <Text
+                              numberOfLines={2}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              Rocket.Chat is the leading open source team chat software solution. Free, unlimited and completely customizable with on-premises and SaaS cloud hosting.
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          accessibilityState={
                             {
-                              "alignItems": "flex-start",
-                              "flex": 1,
-                              "flexDirection": "column",
-                              "justifyContent": "flex-start",
-                              "padding": 12,
+                              "busy": undefined,
+                              "checked": undefined,
+                              "disabled": undefined,
+                              "expanded": undefined,
+                              "selected": undefined,
                             }
                           }
-                        >
-                          <Text
-                            numberOfLines={2}
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "500",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#095AD2",
-                                },
-                              ]
+                          accessibilityValue={
+                            {
+                              "max": undefined,
+                              "min": undefined,
+                              "now": undefined,
+                              "text": undefined,
                             }
-                          >
-                            Google
-                          </Text>
-                          <Text
-                            numberOfLines={2}
+                          }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          style={
+                            [
+                              {
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "gap": 4,
+                              },
+                              {
+                                "backgroundColor": "#F7F8FA",
+                                "borderColor": "#CBCED1",
+                                "borderRadius": 4,
+                                "borderWidth": 1,
+                                "overflow": "hidden",
+                              },
+                            ]
+                          }
+                        >
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#6C727A",
-                                },
-                              ]
+                              {
+                                "alignItems": "flex-start",
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "justifyContent": "flex-start",
+                                "padding": 12,
+                              }
                             }
                           >
-                            Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
-                          </Text>
+                            <Text
+                              numberOfLines={2}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#095AD2",
+                                  },
+                                ]
+                              }
+                            >
+                              Google
+                            </Text>
+                            <Text
+                              numberOfLines={2}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
+                            </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: WithAlias should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r97:"
+      orderKey=":r95:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r97:"
+        orderKey=":r95:"
       >
         <View
           accessibilityState={
@@ -118954,355 +133585,544 @@ exports[`Story Snapshots: WithAlias should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r97:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message :nyan_rocket:.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message :nyan_rocket:"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r95:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={463}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={464}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          Diego Mello
-                          <Text
+                          <View
+                            collapsable={false}
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 14,
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#6C727A",
-                                },
-                              ]
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
                           >
-                             @
-                            diego.mello
-                          </Text>
-                        </Text>
-                        <Text
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
                           style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#6C727A",
-                              },
-                            ]
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message"
                       >
                         <View
+                          testID="message-content-Message :nyan_rocket:"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Message "
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message 
+                                </Text>
+                                <View
+                                  style={
+                                    {
+                                      "transform": [
+                                        {
+                                          "translateY": 3,
+                                        },
+                                      ],
+                                    }
+                                  }
+                                >
+                                  <ViewManagerAdapter_ExpoImage
+                                    containerViewRef={"[React.ref]"}
+                                    contentFit="contain"
+                                    contentPosition={
+                                      {
+                                        "left": "50%",
+                                        "top": "50%",
+                                      }
+                                    }
+                                    height={15}
+                                    nativeViewRef={"[React.ref]"}
+                                    onError={[Function]}
+                                    onLoad={[Function]}
+                                    onLoadStart={[Function]}
+                                    onProgress={[Function]}
+                                    placeholder={[]}
+                                    source={
+                                      [
+                                        {
+                                          "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                        },
+                                      ]
+                                    }
+                                    style={
+                                      {
+                                        "height": 15,
+                                        "width": 15,
+                                      }
+                                    }
+                                    transition={null}
+                                    width={15}
+                                  />
+                                </View>
+                              </Text>
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          accessibilityState={
+                            {
+                              "busy": undefined,
+                              "checked": undefined,
+                              "disabled": undefined,
+                              "expanded": undefined,
+                              "selected": undefined,
+                            }
+                          }
+                          accessibilityValue={
+                            {
+                              "max": undefined,
+                              "min": undefined,
+                              "now": undefined,
+                              "text": undefined,
+                            }
+                          }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
                           style={
-                            {
-                              "gap": 2,
-                            }
+                            [
+                              {
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "gap": 4,
+                              },
+                              {
+                                "backgroundColor": "#F7F8FA",
+                                "borderColor": "#CBCED1",
+                                "borderRadius": 4,
+                                "borderWidth": 1,
+                                "overflow": "hidden",
+                              },
+                            ]
                           }
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "alignItems": "flex-start",
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "justifyContent": "flex-start",
+                                "padding": 12,
+                              }
                             }
                           >
                             <Text
+                              numberOfLines={2}
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#095AD2",
+                                  },
+                                ]
                               }
                             >
-                              <Text
-                                accessibilityLabel="Message"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Message
-                              </Text>
+                              Google
                             </Text>
-                          </Text>
+                            <Text
+                              numberOfLines={2}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
+                            </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r98:"
+      orderKey=":r96:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r98:"
+        orderKey=":r96:"
       >
         <View
           accessibilityState={
@@ -119335,343 +134155,194 @@ exports[`Story Snapshots: WithAlias should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r98:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r96:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'s avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
                       }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.?format=png&size=72",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
                     }
-                  }
-                >
+                  />
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
                             "gap": 4,
-                            "opacity": 1,
                           }
                         }
-                        testID="username-header-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                       >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
+                        <View
+                          accessibilityState={
+                            {
+                              "busy": undefined,
+                              "checked": undefined,
+                              "disabled": undefined,
+                              "expanded": undefined,
+                              "selected": undefined,
+                            }
                           }
-                        >
-                          Diego Mello
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 14,
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#6C727A",
-                                },
-                              ]
+                          accessibilityValue={
+                            {
+                              "max": undefined,
+                              "min": undefined,
+                              "now": undefined,
+                              "text": undefined,
                             }
-                          >
-                             @
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                          </Text>
-                        </Text>
-                        <Text
+                          }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "gap": 4,
                               },
                               {
-                                "color": "#6C727A",
+                                "backgroundColor": "#F7F8FA",
+                                "borderColor": "#CBCED1",
+                                "borderRadius": 4,
+                                "borderWidth": 1,
+                                "overflow": "hidden",
                               },
                             ]
                           }
                         >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "alignItems": "flex-start",
+                                "flex": 1,
+                                "flexDirection": "column",
+                                "justifyContent": "flex-start",
+                                "padding": 12,
+                              }
                             }
                           >
                             <Text
+                              numberOfLines={2}
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#095AD2",
+                                  },
+                                ]
                               }
                             >
-                              <Text
-                                accessibilityLabel="Message"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Message
-                              </Text>
+                              Google
                             </Text>
-                          </Text>
+                            <Text
+                              numberOfLines={2}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
+                            </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
+                  />
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -119680,7 +134351,7 @@ exports[`Story Snapshots: WithAlias should match snapshot 1`] = `
 </RCTScrollView>
 `;
 
-exports[`Story Snapshots: WithAliasLargeFont should match snapshot 1`] = `
+exports[`Story Snapshots: WithAlias should match snapshot 1`] = `
 <RCTScrollView
   style={
     {
@@ -119690,13 +134361,13 @@ exports[`Story Snapshots: WithAliasLargeFont should match snapshot 1`] = `
 >
   <View>
     <A11yOrderView
-      orderKey=":r99:"
+      orderKey=":r97:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r99:"
+        orderKey=":r97:"
       >
         <View
           accessibilityState={
@@ -119729,355 +134400,421 @@ exports[`Story Snapshots: WithAliasLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r99:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r97:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={465}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={466}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          Diego Mello
-                          <Text
+                          <View
+                            collapsable={false}
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 14,
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#6C727A",
-                                },
-                              ]
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
                           >
-                             @
-                            diego.mello
-                          </Text>
-                        </Text>
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Diego Mello
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#6C727A",
+                                    },
+                                  ]
+                                }
+                              >
+                                 @
+                                diego.mello
+                              </Text>
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r9a:"
+      orderKey=":r98:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r9a:"
+        orderKey=":r98:"
       >
         <View
           accessibilityState={
@@ -120110,343 +134847,409 @@ exports[`Story Snapshots: WithAliasLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9a:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r98:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'s avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={467}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'s avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={468}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                          underlayColor="#E4E7EA"
                         >
-                          Diego Mello
-                          <Text
+                          <View
+                            collapsable={false}
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 14,
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#6C727A",
-                                },
-                              ]
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
                           >
-                             @
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                          </Text>
-                        </Text>
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Diego Mello
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#6C727A",
+                                    },
+                                  ]
+                                }
+                              >
+                                 @
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                              </Text>
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -120455,7 +135258,7 @@ exports[`Story Snapshots: WithAliasLargeFont should match snapshot 1`] = `
 </RCTScrollView>
 `;
 
-exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
+exports[`Story Snapshots: WithAliasLargeFont should match snapshot 1`] = `
 <RCTScrollView
   style={
     {
@@ -120465,13 +135268,13 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
 >
   <View>
     <A11yOrderView
-      orderKey=":r9b:"
+      orderKey=":r99:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r9b:"
+        orderKey=":r99:"
       >
         <View
           accessibilityState={
@@ -120504,260 +135307,337 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9b:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r99:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={469}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={470}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Diego Mello
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#6C727A",
+                                    },
+                                  ]
+                                }
+                              >
+                                 @
+                                diego.mello
+                              </Text>
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -120766,11 +135646,7 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                         }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
                           <View
                             style={
@@ -120803,338 +135679,49 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                                     "flexShrink": 1,
                                     "fontFamily": "Inter",
                                     "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityLabel="This is a description "
-                                  style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  This is a description 
-                                </Text>
-                                <View
-                                  style={
-                                    [
-                                      {
-                                        "transform": [
-                                          {
-                                            "translateY": 3,
-                                          },
-                                        ],
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <ViewManagerAdapter_ExpoImage
-                                    containerViewRef={"[React.ref]"}
-                                    contentFit="contain"
-                                    contentPosition={
-                                      {
-                                        "left": "50%",
-                                        "top": "50%",
-                                      }
-                                    }
-                                    height={15}
-                                    nativeViewRef={"[React.ref]"}
-                                    onError={[Function]}
-                                    onLoad={[Function]}
-                                    onLoadStart={[Function]}
-                                    onProgress={[Function]}
-                                    placeholder={[]}
-                                    source={
-                                      [
-                                        {
-                                          "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                        },
-                                      ]
-                                    }
-                                    style={
-                                      {
-                                        "height": 15,
-                                        "width": 15,
-                                      }
-                                    }
-                                    transition={null}
-                                    width={15}
-                                  />
-                                </View>
-                              </Text>
-                            </Text>
-                          </View>
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": 56,
-                                },
-                                {
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#EBECEF",
-                                },
-                              ]
-                            }
-                          >
-                            <View
-                              accessibilityLabel="To download"
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": false,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              hitSlop={
-                                {
-                                  "bottom": 8,
-                                  "left": 8,
-                                  "right": 8,
-                                  "top": 8,
-                                }
-                              }
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "backgroundColor": "#156FF5",
-                                  "borderRadius": 4,
-                                  "height": 32,
-                                  "justifyContent": "center",
-                                  "marginLeft": 16,
-                                  "opacity": 1,
-                                  "width": 32,
-                                }
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
-                                style={
-                                  [
-                                    {
-                                      "color": "#FFFFFF",
-                                      "fontSize": 24,
-                                    },
-                                    [
-                                      {
-                                        "lineHeight": 24,
-                                      },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
-                                }
-                              >
-                                
-                              </Text>
-                            </View>
-                            <View
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": undefined,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              focusable={false}
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": "100%",
-                                }
-                              }
-                            >
-                              <TextInput
-                                animatedProps={
-                                  {
-                                    "text": "00:00",
-                                  }
-                                }
-                                defaultValue="00:00"
-                                editable={false}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 14,
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                      "fontWeight": "400",
-                                      "marginHorizontal": 12,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              />
-                              <View
-                                onLayout={[Function]}
-                                style={
-                                  {
-                                    "flex": 1,
-                                    "height": "100%",
-                                    "justifyContent": "center",
-                                    "marginRight": 12,
+                                    "textAlign": "left",
                                   }
                                 }
                               >
-                                <View
+                                <Text
+                                  accessibilityLabel="Message"
                                   style={
                                     [
                                       {
-                                        "borderRadius": 2,
-                                        "height": 4,
-                                        "width": "100%",
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
                                       },
                                       {
-                                        "backgroundColor": "#CBCED1",
+                                        "color": "#2F343D",
                                       },
                                     ]
                                   }
                                 >
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "borderRadius": 2,
-                                          "height": 4,
-                                          "width": "100%",
-                                        },
-                                        {
-                                          "width": 0,
-                                        },
-                                        {
-                                          "backgroundColor": "#156FF5",
-                                        },
-                                      ]
-                                    }
-                                  />
-                                </View>
-                                <View
-                                  collapsable={false}
-                                  enabled={false}
-                                  handlerTag={1}
-                                  handlerType="PanGestureHandler"
-                                  hitSlop={
-                                    {
-                                      "bottom": 12,
-                                      "left": 8,
-                                      "right": 8,
-                                      "top": 12,
-                                    }
-                                  }
-                                  onGestureHandlerEvent={[Function]}
-                                  onGestureHandlerStateChange={[Function]}
-                                  style={
-                                    [
-                                      {
-                                        "borderRadius": 6,
-                                        "height": 12,
-                                        "position": "absolute",
-                                        "width": 12,
-                                      },
-                                      {
-                                        "backgroundColor": "#D1EBFE",
-                                      },
-                                      {
-                                        "transform": [
-                                          {
-                                            "translateX": -6,
-                                          },
-                                          {
-                                            "scale": 1,
-                                          },
-                                        ],
-                                      },
-                                    ]
-                                  }
-                                />
-                              </View>
-                            </View>
+                                  Message
+                                </Text>
+                              </Text>
+                            </Text>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r9c:"
+      orderKey=":r9a:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r9c:"
+        orderKey=":r9a:"
       >
         <View
           accessibilityState={
@@ -121167,83 +135754,346 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9c:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9a:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
+                  >
+                    <View
+                      accessible={true}
+                      style={
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
+                      }
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={471}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'s avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
                         style={
                           {
-                            "gap": 4,
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
                           }
                         }
                       >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={472}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              Diego Mello
+                              <Text
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#6C727A",
+                                    },
+                                  ]
+                                }
+                              >
+                                 @
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                              </Text>
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
                         <View
                           style={
                             {
-                              "gap": 4,
+                              "flexDirection": "row",
                             }
                           }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-Message"
                         >
                           <View
                             style={
@@ -121281,7 +136131,7 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="Header false"
+                                  accessibilityLabel="Message"
                                   style={
                                     [
                                       {
@@ -121295,280 +136145,43 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                                     ]
                                   }
                                 >
-                                  Header false
+                                  Message
                                 </Text>
                               </Text>
                             </Text>
                           </View>
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": 56,
-                                },
-                                {
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#EBECEF",
-                                },
-                              ]
-                            }
-                          >
-                            <View
-                              accessibilityLabel="To download"
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": false,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              hitSlop={
-                                {
-                                  "bottom": 8,
-                                  "left": 8,
-                                  "right": 8,
-                                  "top": 8,
-                                }
-                              }
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "backgroundColor": "#156FF5",
-                                  "borderRadius": 4,
-                                  "height": 32,
-                                  "justifyContent": "center",
-                                  "marginLeft": 16,
-                                  "opacity": 1,
-                                  "width": 32,
-                                }
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
-                                style={
-                                  [
-                                    {
-                                      "color": "#FFFFFF",
-                                      "fontSize": 24,
-                                    },
-                                    [
-                                      {
-                                        "lineHeight": 24,
-                                      },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
-                                }
-                              >
-                                
-                              </Text>
-                            </View>
-                            <View
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": undefined,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              focusable={false}
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": "100%",
-                                }
-                              }
-                            >
-                              <TextInput
-                                animatedProps={
-                                  {
-                                    "text": "00:00",
-                                  }
-                                }
-                                defaultValue="00:00"
-                                editable={false}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 14,
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                      "fontWeight": "400",
-                                      "marginHorizontal": 12,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              />
-                              <View
-                                onLayout={[Function]}
-                                style={
-                                  {
-                                    "flex": 1,
-                                    "height": "100%",
-                                    "justifyContent": "center",
-                                    "marginRight": 12,
-                                  }
-                                }
-                              >
-                                <View
-                                  style={
-                                    [
-                                      {
-                                        "borderRadius": 2,
-                                        "height": 4,
-                                        "width": "100%",
-                                      },
-                                      {
-                                        "backgroundColor": "#CBCED1",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "borderRadius": 2,
-                                          "height": 4,
-                                          "width": "100%",
-                                        },
-                                        {
-                                          "width": 0,
-                                        },
-                                        {
-                                          "backgroundColor": "#156FF5",
-                                        },
-                                      ]
-                                    }
-                                  />
-                                </View>
-                                <View
-                                  collapsable={false}
-                                  enabled={false}
-                                  handlerTag={2}
-                                  handlerType="PanGestureHandler"
-                                  hitSlop={
-                                    {
-                                      "bottom": 12,
-                                      "left": 8,
-                                      "right": 8,
-                                      "top": 12,
-                                    }
-                                  }
-                                  onGestureHandlerEvent={[Function]}
-                                  onGestureHandlerStateChange={[Function]}
-                                  style={
-                                    [
-                                      {
-                                        "borderRadius": 6,
-                                        "height": 12,
-                                        "position": "absolute",
-                                        "width": 12,
-                                      },
-                                      {
-                                        "backgroundColor": "#D1EBFE",
-                                      },
-                                      {
-                                        "transform": [
-                                          {
-                                            "translateX": -6,
-                                          },
-                                          {
-                                            "scale": 1,
-                                          },
-                                        ],
-                                      },
-                                    ]
-                                  }
-                                />
-                              </View>
-                            </View>
-                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r9d:"
+      orderKey=":r9b:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r9d:"
+        orderKey=":r9b:"
       >
         <View
           accessibilityState={
@@ -121601,128 +136214,317 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  multi file.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="multi file"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9d:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9b:"
+              >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
-                        "flex": 1,
+                        "alignItems": "flex-end",
+                        "width": 36,
                       }
                     }
                   >
                     <View
+                      accessible={true}
                       style={
-                        {
-                          "gap": 4,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <View
-                        testID="message-content-multi file"
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={473}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
                       >
                         <View
+                          collapsable={false}
                           style={
                             {
-                              "gap": 2,
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
                             }
                           }
-                        >
-                          <Text
-                            style={
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
                               [
                                 {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
                                 },
                               ]
                             }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
+                        {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={474}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
                           >
                             <Text
+                              numberOfLines={1}
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
                               }
                             >
-                              <Text
-                                accessibilityLabel="multi file"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                multi file
-                              </Text>
+                              diego.mello
                             </Text>
-                          </Text>
-                        </View>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
                       <View
                         style={
@@ -121740,154 +136542,27 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                         >
                           <View
                             style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": 56,
-                                },
-                                {
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#EBECEF",
-                                },
-                              ]
+                              {
+                                "gap": 4,
+                              }
                             }
                           >
                             <View
-                              accessibilityLabel="To download"
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": false,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              hitSlop={
-                                {
-                                  "bottom": 8,
-                                  "left": 8,
-                                  "right": 8,
-                                  "top": 8,
-                                }
-                              }
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
                               style={
                                 {
-                                  "alignItems": "center",
-                                  "backgroundColor": "#156FF5",
-                                  "borderRadius": 4,
-                                  "height": 32,
-                                  "justifyContent": "center",
-                                  "marginLeft": 16,
-                                  "opacity": 1,
-                                  "width": 32,
+                                  "gap": 2,
                                 }
                               }
                             >
                               <Text
-                                allowFontScaling={false}
-                                selectable={false}
-                                style={
-                                  [
-                                    {
-                                      "color": "#FFFFFF",
-                                      "fontSize": 24,
-                                    },
-                                    [
-                                      {
-                                        "lineHeight": 24,
-                                      },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
-                                }
-                              >
-                                
-                              </Text>
-                            </View>
-                            <View
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": undefined,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              focusable={false}
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": "100%",
-                                }
-                              }
-                            >
-                              <TextInput
-                                animatedProps={
-                                  {
-                                    "text": "00:00",
-                                  }
-                                }
-                                defaultValue="00:00"
-                                editable={false}
                                 style={
                                   [
                                     {
                                       "backgroundColor": "transparent",
                                       "fontFamily": "Inter",
-                                      "fontSize": 14,
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
+                                      "fontSize": 16,
                                       "fontWeight": "400",
-                                      "marginHorizontal": 12,
+                                      "lineHeight": 22,
                                       "textAlign": "left",
                                     },
                                     {
@@ -121895,282 +136570,250 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                                     },
                                   ]
                                 }
-                              />
-                              <View
-                                onLayout={[Function]}
-                                style={
-                                  {
-                                    "flex": 1,
-                                    "height": "100%",
-                                    "justifyContent": "center",
-                                    "marginRight": 12,
-                                  }
-                                }
                               >
-                                <View
+                                <Text
                                   style={
-                                    [
-                                      {
-                                        "borderRadius": 2,
-                                        "height": 4,
-                                        "width": "100%",
-                                      },
-                                      {
-                                        "backgroundColor": "#CBCED1",
-                                      },
-                                    ]
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
                                   }
                                 >
-                                  <View
+                                  <Text
+                                    accessibilityLabel="This is a description "
                                     style={
                                       [
                                         {
-                                          "borderRadius": 2,
-                                          "height": 4,
-                                          "width": "100%",
-                                        },
-                                        {
-                                          "width": 0,
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
                                         },
                                         {
-                                          "backgroundColor": "#156FF5",
+                                          "color": "#2F343D",
                                         },
                                       ]
                                     }
-                                  />
-                                </View>
-                                <View
-                                  collapsable={false}
-                                  enabled={false}
-                                  handlerTag={3}
-                                  handlerType="PanGestureHandler"
-                                  hitSlop={
-                                    {
-                                      "bottom": 12,
-                                      "left": 8,
-                                      "right": 8,
-                                      "top": 12,
-                                    }
-                                  }
-                                  onGestureHandlerEvent={[Function]}
-                                  onGestureHandlerStateChange={[Function]}
-                                  style={
-                                    [
-                                      {
-                                        "borderRadius": 6,
-                                        "height": 12,
-                                        "position": "absolute",
-                                        "width": 12,
-                                      },
-                                      {
-                                        "backgroundColor": "#D1EBFE",
-                                      },
+                                  >
+                                    This is a description 
+                                  </Text>
+                                  <View
+                                    style={
                                       {
                                         "transform": [
                                           {
-                                            "translateX": -6,
+                                            "translateY": 3,
                                           },
+                                        ],
+                                      }
+                                    }
+                                  >
+                                    <ViewManagerAdapter_ExpoImage
+                                      containerViewRef={"[React.ref]"}
+                                      contentFit="contain"
+                                      contentPosition={
+                                        {
+                                          "left": "50%",
+                                          "top": "50%",
+                                        }
+                                      }
+                                      height={15}
+                                      nativeViewRef={"[React.ref]"}
+                                      onError={[Function]}
+                                      onLoad={[Function]}
+                                      onLoadStart={[Function]}
+                                      onProgress={[Function]}
+                                      placeholder={[]}
+                                      source={
+                                        [
                                           {
-                                            "scale": 1,
+                                            "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
                                           },
-                                        ],
-                                      },
-                                    ]
-                                  }
-                                />
-                              </View>
+                                        ]
+                                      }
+                                      style={
+                                        {
+                                          "height": 15,
+                                          "width": 15,
+                                        }
+                                      }
+                                      transition={null}
+                                      width={15}
+                                    />
+                                  </View>
+                                </Text>
+                              </Text>
                             </View>
-                          </View>
-                        </View>
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": 56,
-                                },
-                                {
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#EBECEF",
-                                },
-                              ]
-                            }
-                          >
                             <View
-                              accessibilityLabel="To download"
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": false,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": 56,
+                                  },
+                                  {
+                                    "backgroundColor": "#FFFFFF",
+                                    "borderColor": "#EBECEF",
+                                  },
+                                ]
                               }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
+                            >
+                              <View
+                                accessibilityLabel="To download"
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": false,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
                                 }
-                              }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              hitSlop={
-                                {
-                                  "bottom": 8,
-                                  "left": 8,
-                                  "right": 8,
-                                  "top": 8,
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
                                 }
-                              }
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "backgroundColor": "#156FF5",
-                                  "borderRadius": 4,
-                                  "height": 32,
-                                  "justifyContent": "center",
-                                  "marginLeft": 16,
-                                  "opacity": 1,
-                                  "width": 32,
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={
+                                  {
+                                    "bottom": 8,
+                                    "left": 8,
+                                    "right": 8,
+                                    "top": 8,
+                                  }
                                 }
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
                                 style={
-                                  [
-                                    {
-                                      "color": "#FFFFFF",
-                                      "fontSize": 24,
-                                    },
+                                  {
+                                    "alignItems": "center",
+                                    "backgroundColor": "#156FF5",
+                                    "borderRadius": 4,
+                                    "height": 32,
+                                    "justifyContent": "center",
+                                    "marginLeft": 16,
+                                    "opacity": 1,
+                                    "width": 32,
+                                  }
+                                }
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
                                     [
                                       {
-                                        "lineHeight": 24,
+                                        "color": "#FFFFFF",
+                                        "fontSize": 24,
                                       },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
-                                }
-                              >
-                                
-                              </Text>
-                            </View>
-                            <View
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": undefined,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              focusable={false}
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": "100%",
-                                }
-                              }
-                            >
-                              <TextInput
-                                animatedProps={
+                                      [
+                                        {
+                                          "lineHeight": 24,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
+                              <View
+                                accessibilityState={
                                   {
-                                    "text": "00:00",
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": undefined,
+                                    "expanded": undefined,
+                                    "selected": undefined,
                                   }
                                 }
-                                defaultValue="00:00"
-                                editable={false}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 14,
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                      "fontWeight": "400",
-                                      "marginHorizontal": 12,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
                                 }
-                              />
-                              <View
-                                onLayout={[Function]}
+                                accessible={true}
+                                focusable={false}
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
                                 style={
                                   {
+                                    "alignItems": "center",
                                     "flex": 1,
+                                    "flexDirection": "row",
                                     "height": "100%",
-                                    "justifyContent": "center",
-                                    "marginRight": 12,
                                   }
                                 }
                               >
-                                <View
+                                <TextInput
+                                  animatedProps={
+                                    {
+                                      "text": "00:00",
+                                    }
+                                  }
+                                  defaultValue="00:00"
+                                  editable={false}
                                   style={
                                     [
                                       {
-                                        "borderRadius": 2,
-                                        "height": 4,
-                                        "width": "100%",
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 14,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginHorizontal": 12,
+                                        "textAlign": "left",
                                       },
                                       {
-                                        "backgroundColor": "#CBCED1",
+                                        "color": "#2F343D",
                                       },
                                     ]
                                   }
+                                />
+                                <View
+                                  onLayout={[Function]}
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "height": "100%",
+                                      "justifyContent": "center",
+                                      "marginRight": 12,
+                                    }
+                                  }
                                 >
                                   <View
                                     style={
@@ -122181,54 +136824,69 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                                           "width": "100%",
                                         },
                                         {
-                                          "width": 0,
-                                        },
-                                        {
-                                          "backgroundColor": "#156FF5",
+                                          "backgroundColor": "#CBCED1",
                                         },
                                       ]
                                     }
-                                  />
-                                </View>
-                                <View
-                                  collapsable={false}
-                                  enabled={false}
-                                  handlerTag={4}
-                                  handlerType="PanGestureHandler"
-                                  hitSlop={
-                                    {
-                                      "bottom": 12,
-                                      "left": 8,
-                                      "right": 8,
-                                      "top": 12,
-                                    }
-                                  }
-                                  onGestureHandlerEvent={[Function]}
-                                  onGestureHandlerStateChange={[Function]}
-                                  style={
-                                    [
-                                      {
-                                        "borderRadius": 6,
-                                        "height": 12,
-                                        "position": "absolute",
-                                        "width": 12,
-                                      },
-                                      {
-                                        "backgroundColor": "#D1EBFE",
-                                      },
-                                      {
-                                        "transform": [
+                                  >
+                                    <View
+                                      style={
+                                        [
                                           {
-                                            "translateX": -6,
+                                            "borderRadius": 2,
+                                            "height": 4,
+                                            "width": "100%",
                                           },
                                           {
-                                            "scale": 1,
+                                            "width": 0,
                                           },
-                                        ],
-                                      },
-                                    ]
-                                  }
-                                />
+                                          {
+                                            "backgroundColor": "#156FF5",
+                                          },
+                                        ]
+                                      }
+                                    />
+                                  </View>
+                                  <View
+                                    collapsable={false}
+                                    enabled={false}
+                                    handlerTag={475}
+                                    handlerType="PanGestureHandler"
+                                    hitSlop={
+                                      {
+                                        "bottom": 12,
+                                        "left": 8,
+                                        "right": 8,
+                                        "top": 12,
+                                      }
+                                    }
+                                    onGestureHandlerEvent={[Function]}
+                                    onGestureHandlerStateChange={[Function]}
+                                    style={
+                                      [
+                                        {
+                                          "borderRadius": 6,
+                                          "height": 12,
+                                          "position": "absolute",
+                                          "width": 12,
+                                        },
+                                        {
+                                          "backgroundColor": "#D1EBFE",
+                                        },
+                                        {
+                                          "transform": [
+                                            {
+                                              "translateX": -6,
+                                            },
+                                            {
+                                              "scale": 1,
+                                            },
+                                          ],
+                                        },
+                                      ]
+                                    }
+                                  />
+                                </View>
                               </View>
                             </View>
                           </View>
@@ -122237,27 +136895,20 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r9e:"
+      orderKey=":r9c:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r9e:"
+        orderKey=":r9c:"
       >
         <View
           accessibilityState={
@@ -122290,67 +136941,73 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9e:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9c:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
@@ -122361,257 +137018,6 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
-                        >
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": 56,
-                                },
-                                {
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#EBECEF",
-                                },
-                              ]
-                            }
-                          >
-                            <View
-                              accessibilityLabel="To download"
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": false,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              hitSlop={
-                                {
-                                  "bottom": 8,
-                                  "left": 8,
-                                  "right": 8,
-                                  "top": 8,
-                                }
-                              }
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "backgroundColor": "#156FF5",
-                                  "borderRadius": 4,
-                                  "height": 32,
-                                  "justifyContent": "center",
-                                  "marginLeft": 16,
-                                  "opacity": 1,
-                                  "width": 32,
-                                }
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
-                                style={
-                                  [
-                                    {
-                                      "color": "#FFFFFF",
-                                      "fontSize": 24,
-                                    },
-                                    [
-                                      {
-                                        "lineHeight": 24,
-                                      },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
-                                }
-                              >
-                                
-                              </Text>
-                            </View>
-                            <View
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": undefined,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              focusable={false}
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": "100%",
-                                }
-                              }
-                            >
-                              <TextInput
-                                animatedProps={
-                                  {
-                                    "text": "00:00",
-                                  }
-                                }
-                                defaultValue="00:00"
-                                editable={false}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 14,
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                      "fontWeight": "400",
-                                      "marginHorizontal": 12,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              />
-                              <View
-                                onLayout={[Function]}
-                                style={
-                                  {
-                                    "flex": 1,
-                                    "height": "100%",
-                                    "justifyContent": "center",
-                                    "marginRight": 12,
-                                  }
-                                }
-                              >
-                                <View
-                                  style={
-                                    [
-                                      {
-                                        "borderRadius": 2,
-                                        "height": 4,
-                                        "width": "100%",
-                                      },
-                                      {
-                                        "backgroundColor": "#CBCED1",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "borderRadius": 2,
-                                          "height": 4,
-                                          "width": "100%",
-                                        },
-                                        {
-                                          "width": 0,
-                                        },
-                                        {
-                                          "backgroundColor": "#156FF5",
-                                        },
-                                      ]
-                                    }
-                                  />
-                                </View>
-                                <View
-                                  collapsable={false}
-                                  enabled={false}
-                                  handlerTag={5}
-                                  handlerType="PanGestureHandler"
-                                  hitSlop={
-                                    {
-                                      "bottom": 12,
-                                      "left": 8,
-                                      "right": 8,
-                                      "top": 12,
-                                    }
-                                  }
-                                  onGestureHandlerEvent={[Function]}
-                                  onGestureHandlerStateChange={[Function]}
-                                  style={
-                                    [
-                                      {
-                                        "borderRadius": 6,
-                                        "height": 12,
-                                        "position": "absolute",
-                                        "width": 12,
-                                      },
-                                      {
-                                        "backgroundColor": "#D1EBFE",
-                                      },
-                                      {
-                                        "transform": [
-                                          {
-                                            "translateX": -6,
-                                          },
-                                          {
-                                            "scale": 1,
-                                          },
-                                        ],
-                                      },
-                                    ]
-                                  }
-                                />
-                              </View>
-                            </View>
-                          </View>
-                        </View>
                         <View
                           style={
                             {
@@ -122622,286 +137028,233 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                           <View
                             style={
                               {
-                                "gap": 2,
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
+                                "gap": 4,
                               }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityLabel="This is a description "
-                                  style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  This is a description 
-                                </Text>
-                                <View
-                                  style={
-                                    [
-                                      {
-                                        "transform": [
-                                          {
-                                            "translateY": 3,
-                                          },
-                                        ],
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <ViewManagerAdapter_ExpoImage
-                                    containerViewRef={"[React.ref]"}
-                                    contentFit="contain"
-                                    contentPosition={
-                                      {
-                                        "left": "50%",
-                                        "top": "50%",
-                                      }
-                                    }
-                                    height={15}
-                                    nativeViewRef={"[React.ref]"}
-                                    onError={[Function]}
-                                    onLoad={[Function]}
-                                    onLoadStart={[Function]}
-                                    onProgress={[Function]}
-                                    placeholder={[]}
-                                    source={
-                                      [
-                                        {
-                                          "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                        },
-                                      ]
-                                    }
-                                    style={
-                                      {
-                                        "height": 15,
-                                        "width": 15,
-                                      }
-                                    }
-                                    transition={null}
-                                    width={15}
-                                  />
-                                </View>
-                              </Text>
-                            </Text>
-                          </View>
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": 56,
-                                },
-                                {
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#EBECEF",
-                                },
-                              ]
                             }
                           >
                             <View
-                              accessibilityLabel="To download"
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": false,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              hitSlop={
-                                {
-                                  "bottom": 8,
-                                  "left": 8,
-                                  "right": 8,
-                                  "top": 8,
-                                }
-                              }
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "backgroundColor": "#156FF5",
-                                  "borderRadius": 4,
-                                  "height": 32,
-                                  "justifyContent": "center",
-                                  "marginLeft": 16,
-                                  "opacity": 1,
-                                  "width": 32,
+                              style={
+                                {
+                                  "gap": 2,
                                 }
                               }
                             >
                               <Text
-                                allowFontScaling={false}
-                                selectable={false}
                                 style={
                                   [
                                     {
-                                      "color": "#FFFFFF",
-                                      "fontSize": 24,
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
                                     },
-                                    [
-                                      {
-                                        "lineHeight": 24,
-                                      },
-                                      undefined,
-                                    ],
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "color": "#2F343D",
                                     },
-                                    {},
                                   ]
                                 }
                               >
-                                
+                                <Text
+                                  style={
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    accessibilityLabel="Header false"
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Header false
+                                  </Text>
+                                </Text>
                               </Text>
                             </View>
                             <View
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": undefined,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              focusable={false}
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
                               style={
-                                {
-                                  "alignItems": "center",
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": "100%",
-                                }
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": 56,
+                                  },
+                                  {
+                                    "backgroundColor": "#FFFFFF",
+                                    "borderColor": "#EBECEF",
+                                  },
+                                ]
                               }
                             >
-                              <TextInput
-                                animatedProps={
+                              <View
+                                accessibilityLabel="To download"
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": false,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={
                                   {
-                                    "text": "00:00",
+                                    "bottom": 8,
+                                    "left": 8,
+                                    "right": 8,
+                                    "top": 8,
                                   }
                                 }
-                                defaultValue="00:00"
-                                editable={false}
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
                                 style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 14,
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                      "fontWeight": "400",
-                                      "marginHorizontal": 12,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "alignItems": "center",
+                                    "backgroundColor": "#156FF5",
+                                    "borderRadius": 4,
+                                    "height": 32,
+                                    "justifyContent": "center",
+                                    "marginLeft": 16,
+                                    "opacity": 1,
+                                    "width": 32,
+                                  }
                                 }
-                              />
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#FFFFFF",
+                                        "fontSize": 24,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 24,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
                               <View
-                                onLayout={[Function]}
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": undefined,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                focusable={false}
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
                                 style={
                                   {
+                                    "alignItems": "center",
                                     "flex": 1,
+                                    "flexDirection": "row",
                                     "height": "100%",
-                                    "justifyContent": "center",
-                                    "marginRight": 12,
                                   }
                                 }
                               >
-                                <View
+                                <TextInput
+                                  animatedProps={
+                                    {
+                                      "text": "00:00",
+                                    }
+                                  }
+                                  defaultValue="00:00"
+                                  editable={false}
                                   style={
                                     [
                                       {
-                                        "borderRadius": 2,
-                                        "height": 4,
-                                        "width": "100%",
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 14,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginHorizontal": 12,
+                                        "textAlign": "left",
                                       },
                                       {
-                                        "backgroundColor": "#CBCED1",
+                                        "color": "#2F343D",
                                       },
                                     ]
                                   }
+                                />
+                                <View
+                                  onLayout={[Function]}
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "height": "100%",
+                                      "justifyContent": "center",
+                                      "marginRight": 12,
+                                    }
+                                  }
                                 >
                                   <View
                                     style={
@@ -122912,56 +137265,264 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                                           "width": "100%",
                                         },
                                         {
-                                          "width": 0,
+                                          "backgroundColor": "#CBCED1",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        [
+                                          {
+                                            "borderRadius": 2,
+                                            "height": 4,
+                                            "width": "100%",
+                                          },
+                                          {
+                                            "width": 0,
+                                          },
+                                          {
+                                            "backgroundColor": "#156FF5",
+                                          },
+                                        ]
+                                      }
+                                    />
+                                  </View>
+                                  <View
+                                    collapsable={false}
+                                    enabled={false}
+                                    handlerTag={476}
+                                    handlerType="PanGestureHandler"
+                                    hitSlop={
+                                      {
+                                        "bottom": 12,
+                                        "left": 8,
+                                        "right": 8,
+                                        "top": 12,
+                                      }
+                                    }
+                                    onGestureHandlerEvent={[Function]}
+                                    onGestureHandlerStateChange={[Function]}
+                                    style={
+                                      [
+                                        {
+                                          "borderRadius": 6,
+                                          "height": 12,
+                                          "position": "absolute",
+                                          "width": 12,
+                                        },
+                                        {
+                                          "backgroundColor": "#D1EBFE",
                                         },
                                         {
-                                          "backgroundColor": "#156FF5",
+                                          "transform": [
+                                            {
+                                              "translateX": -6,
+                                            },
+                                            {
+                                              "scale": 1,
+                                            },
+                                          ],
                                         },
                                       ]
                                     }
                                   />
                                 </View>
-                                <View
-                                  collapsable={false}
-                                  enabled={false}
-                                  handlerTag={6}
-                                  handlerType="PanGestureHandler"
-                                  hitSlop={
-                                    {
-                                      "bottom": 12,
-                                      "left": 8,
-                                      "right": 8,
-                                      "top": 12,
-                                    }
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r9d:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r9d:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  multi file.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
+                }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="multi file"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9d:"
+              >
+                <View
+                  accessible={true}
+                  style={
+                    {
+                      "flexDirection": "row",
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
+                        {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          testID="message-content-multi file"
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 2,
+                              }
+                            }
+                          >
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                style={
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
                                   }
-                                  onGestureHandlerEvent={[Function]}
-                                  onGestureHandlerStateChange={[Function]}
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="multi file"
                                   style={
                                     [
                                       {
-                                        "borderRadius": 6,
-                                        "height": 12,
-                                        "position": "absolute",
-                                        "width": 12,
-                                      },
-                                      {
-                                        "backgroundColor": "#D1EBFE",
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
                                       },
                                       {
-                                        "transform": [
-                                          {
-                                            "translateX": -6,
-                                          },
-                                          {
-                                            "scale": 1,
-                                          },
-                                        ],
+                                        "color": "#2F343D",
                                       },
                                     ]
                                   }
-                                />
-                              </View>
-                            </View>
+                                >
+                                  multi file
+                                </Text>
+                              </Text>
+                            </Text>
                           </View>
                         </View>
                         <View
@@ -122973,186 +137534,179 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                         >
                           <View
                             style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": 56,
-                                },
-                                {
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#EBECEF",
-                                },
-                              ]
+                              {
+                                "gap": 4,
+                              }
                             }
                           >
                             <View
-                              accessibilityLabel="To download"
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": false,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              hitSlop={
-                                {
-                                  "bottom": 8,
-                                  "left": 8,
-                                  "right": 8,
-                                  "top": 8,
-                                }
-                              }
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
                               style={
-                                {
-                                  "alignItems": "center",
-                                  "backgroundColor": "#156FF5",
-                                  "borderRadius": 4,
-                                  "height": 32,
-                                  "justifyContent": "center",
-                                  "marginLeft": 16,
-                                  "opacity": 1,
-                                  "width": 32,
-                                }
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": 56,
+                                  },
+                                  {
+                                    "backgroundColor": "#FFFFFF",
+                                    "borderColor": "#EBECEF",
+                                  },
+                                ]
                               }
                             >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
-                                style={
-                                  [
-                                    {
-                                      "color": "#FFFFFF",
-                                      "fontSize": 24,
-                                    },
-                                    [
-                                      {
-                                        "lineHeight": 24,
-                                      },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
+                              <View
+                                accessibilityLabel="To download"
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": false,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
                                 }
-                              >
-                                
-                              </Text>
-                            </View>
-                            <View
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": undefined,
-                                  "expanded": undefined,
-                                  "selected": undefined,
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
                                 }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={
+                                  {
+                                    "bottom": 8,
+                                    "left": 8,
+                                    "right": 8,
+                                    "top": 8,
+                                  }
                                 }
-                              }
-                              accessible={true}
-                              focusable={false}
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": "100%",
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "backgroundColor": "#156FF5",
+                                    "borderRadius": 4,
+                                    "height": 32,
+                                    "justifyContent": "center",
+                                    "marginLeft": 16,
+                                    "opacity": 1,
+                                    "width": 32,
+                                  }
                                 }
-                              }
-                            >
-                              <TextInput
-                                animatedProps={
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#FFFFFF",
+                                        "fontSize": 24,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 24,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
+                              <View
+                                accessibilityState={
                                   {
-                                    "text": "00:00",
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": undefined,
+                                    "expanded": undefined,
+                                    "selected": undefined,
                                   }
                                 }
-                                defaultValue="00:00"
-                                editable={false}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 14,
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                      "fontWeight": "400",
-                                      "marginHorizontal": 12,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
                                 }
-                              />
-                              <View
-                                onLayout={[Function]}
+                                accessible={true}
+                                focusable={false}
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
                                 style={
                                   {
+                                    "alignItems": "center",
                                     "flex": 1,
+                                    "flexDirection": "row",
                                     "height": "100%",
-                                    "justifyContent": "center",
-                                    "marginRight": 12,
                                   }
                                 }
                               >
-                                <View
+                                <TextInput
+                                  animatedProps={
+                                    {
+                                      "text": "00:00",
+                                    }
+                                  }
+                                  defaultValue="00:00"
+                                  editable={false}
                                   style={
                                     [
                                       {
-                                        "borderRadius": 2,
-                                        "height": 4,
-                                        "width": "100%",
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 14,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginHorizontal": 12,
+                                        "textAlign": "left",
                                       },
                                       {
-                                        "backgroundColor": "#CBCED1",
+                                        "color": "#2F343D",
                                       },
                                     ]
                                   }
+                                />
+                                <View
+                                  onLayout={[Function]}
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "height": "100%",
+                                      "justifyContent": "center",
+                                      "marginRight": 12,
+                                    }
+                                  }
                                 >
                                   <View
                                     style={
@@ -123163,54 +137717,320 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                                           "width": "100%",
                                         },
                                         {
-                                          "width": 0,
+                                          "backgroundColor": "#CBCED1",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        [
+                                          {
+                                            "borderRadius": 2,
+                                            "height": 4,
+                                            "width": "100%",
+                                          },
+                                          {
+                                            "width": 0,
+                                          },
+                                          {
+                                            "backgroundColor": "#156FF5",
+                                          },
+                                        ]
+                                      }
+                                    />
+                                  </View>
+                                  <View
+                                    collapsable={false}
+                                    enabled={false}
+                                    handlerTag={477}
+                                    handlerType="PanGestureHandler"
+                                    hitSlop={
+                                      {
+                                        "bottom": 12,
+                                        "left": 8,
+                                        "right": 8,
+                                        "top": 12,
+                                      }
+                                    }
+                                    onGestureHandlerEvent={[Function]}
+                                    onGestureHandlerStateChange={[Function]}
+                                    style={
+                                      [
+                                        {
+                                          "borderRadius": 6,
+                                          "height": 12,
+                                          "position": "absolute",
+                                          "width": 12,
+                                        },
+                                        {
+                                          "backgroundColor": "#D1EBFE",
                                         },
                                         {
-                                          "backgroundColor": "#156FF5",
+                                          "transform": [
+                                            {
+                                              "translateX": -6,
+                                            },
+                                            {
+                                              "scale": 1,
+                                            },
+                                          ],
                                         },
                                       ]
                                     }
                                   />
                                 </View>
-                                <View
-                                  collapsable={false}
-                                  enabled={false}
-                                  handlerTag={7}
-                                  handlerType="PanGestureHandler"
-                                  hitSlop={
-                                    {
-                                      "bottom": 12,
-                                      "left": 8,
-                                      "right": 8,
-                                      "top": 12,
-                                    }
+                              </View>
+                            </View>
+                          </View>
+                          <View
+                            style={
+                              {
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": 56,
+                                  },
+                                  {
+                                    "backgroundColor": "#FFFFFF",
+                                    "borderColor": "#EBECEF",
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                accessibilityLabel="To download"
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": false,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={
+                                  {
+                                    "bottom": 8,
+                                    "left": 8,
+                                    "right": 8,
+                                    "top": 8,
+                                  }
+                                }
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "backgroundColor": "#156FF5",
+                                    "borderRadius": 4,
+                                    "height": 32,
+                                    "justifyContent": "center",
+                                    "marginLeft": 16,
+                                    "opacity": 1,
+                                    "width": 32,
                                   }
-                                  onGestureHandlerEvent={[Function]}
-                                  onGestureHandlerStateChange={[Function]}
+                                }
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
                                   style={
                                     [
                                       {
-                                        "borderRadius": 6,
-                                        "height": 12,
-                                        "position": "absolute",
-                                        "width": 12,
+                                        "color": "#FFFFFF",
+                                        "fontSize": 24,
                                       },
+                                      [
+                                        {
+                                          "lineHeight": 24,
+                                        },
+                                        undefined,
+                                      ],
                                       {
-                                        "backgroundColor": "#D1EBFE",
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
                                       },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
+                              <View
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": undefined,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                focusable={false}
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": "100%",
+                                  }
+                                }
+                              >
+                                <TextInput
+                                  animatedProps={
+                                    {
+                                      "text": "00:00",
+                                    }
+                                  }
+                                  defaultValue="00:00"
+                                  editable={false}
+                                  style={
+                                    [
                                       {
-                                        "transform": [
-                                          {
-                                            "translateX": -6,
-                                          },
-                                          {
-                                            "scale": 1,
-                                          },
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 14,
+                                        "fontVariant": [
+                                          "tabular-nums",
                                         ],
+                                        "fontWeight": "400",
+                                        "marginHorizontal": 12,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
                                       },
                                     ]
                                   }
                                 />
+                                <View
+                                  onLayout={[Function]}
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "height": "100%",
+                                      "justifyContent": "center",
+                                      "marginRight": 12,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      [
+                                        {
+                                          "borderRadius": 2,
+                                          "height": 4,
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "backgroundColor": "#CBCED1",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        [
+                                          {
+                                            "borderRadius": 2,
+                                            "height": 4,
+                                            "width": "100%",
+                                          },
+                                          {
+                                            "width": 0,
+                                          },
+                                          {
+                                            "backgroundColor": "#156FF5",
+                                          },
+                                        ]
+                                      }
+                                    />
+                                  </View>
+                                  <View
+                                    collapsable={false}
+                                    enabled={false}
+                                    handlerTag={478}
+                                    handlerType="PanGestureHandler"
+                                    hitSlop={
+                                      {
+                                        "bottom": 12,
+                                        "left": 8,
+                                        "right": 8,
+                                        "top": 12,
+                                      }
+                                    }
+                                    onGestureHandlerEvent={[Function]}
+                                    onGestureHandlerStateChange={[Function]}
+                                    style={
+                                      [
+                                        {
+                                          "borderRadius": 6,
+                                          "height": 12,
+                                          "position": "absolute",
+                                          "width": 12,
+                                        },
+                                        {
+                                          "backgroundColor": "#D1EBFE",
+                                        },
+                                        {
+                                          "transform": [
+                                            {
+                                              "translateX": -6,
+                                            },
+                                            {
+                                              "scale": 1,
+                                            },
+                                          ],
+                                        },
+                                      ]
+                                    }
+                                  />
+                                </View>
                               </View>
                             </View>
                           </View>
@@ -123218,41 +138038,28 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-    }
-  }
->
-  <View>
     <A11yOrderView
-      orderKey=":r9f:"
+      orderKey=":r9e:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r9f:"
+        orderKey=":r9e:"
       >
         <View
           accessibilityState={
@@ -123285,257 +138092,73 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9f:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9e:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
-                    }
-                    testID="avatar"
-                  >
-                    <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
                       }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
-                            },
-                          ]
-                        }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
-                          }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
                     }
-                  }
-                >
+                  />
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
-                        }
-                        testID="username-header-diego.mello"
-                      >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
-                          }
-                        >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
                         }
                       }
                     >
@@ -123556,286 +138179,528 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                           <View
                             style={
                               {
-                                "gap": 2,
+                                "gap": 4,
                               }
                             }
                           >
-                            <Text
+                            <View
                               style={
                                 [
                                   {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": 56,
+                                  },
+                                  {
+                                    "backgroundColor": "#FFFFFF",
+                                    "borderColor": "#EBECEF",
                                   },
+                                ]
+                              }
+                            >
+                              <View
+                                accessibilityLabel="To download"
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": false,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={
+                                  {
+                                    "bottom": 8,
+                                    "left": 8,
+                                    "right": 8,
+                                    "top": 8,
+                                  }
+                                }
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "backgroundColor": "#156FF5",
+                                    "borderRadius": 4,
+                                    "height": 32,
+                                    "justifyContent": "center",
+                                    "marginLeft": 16,
+                                    "opacity": 1,
+                                    "width": 32,
+                                  }
+                                }
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#FFFFFF",
+                                        "fontSize": 24,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 24,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
+                              <View
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": undefined,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
                                   {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                focusable={false}
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
                                 style={
                                   {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
+                                    "alignItems": "center",
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": "100%",
                                   }
                                 }
                               >
-                                <Text
-                                  accessibilityLabel="This is a description "
+                                <TextInput
+                                  animatedProps={
+                                    {
+                                      "text": "00:00",
+                                    }
+                                  }
+                                  defaultValue="00:00"
+                                  editable={false}
                                   style={
                                     [
                                       {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 14,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginHorizontal": 12,
+                                        "textAlign": "left",
                                       },
                                       {
                                         "color": "#2F343D",
                                       },
                                     ]
                                   }
-                                >
-                                  This is a description 
-                                </Text>
+                                />
                                 <View
+                                  onLayout={[Function]}
                                   style={
-                                    [
-                                      {
-                                        "transform": [
-                                          {
-                                            "translateY": 3,
-                                          },
-                                        ],
-                                      },
-                                    ]
+                                    {
+                                      "flex": 1,
+                                      "height": "100%",
+                                      "justifyContent": "center",
+                                      "marginRight": 12,
+                                    }
                                   }
                                 >
-                                  <ViewManagerAdapter_ExpoImage
-                                    containerViewRef={"[React.ref]"}
-                                    contentFit="contain"
-                                    contentPosition={
-                                      {
-                                        "left": "50%",
-                                        "top": "50%",
-                                      }
-                                    }
-                                    height={15}
-                                    nativeViewRef={"[React.ref]"}
-                                    onError={[Function]}
-                                    onLoad={[Function]}
-                                    onLoadStart={[Function]}
-                                    onProgress={[Function]}
-                                    placeholder={[]}
-                                    source={
+                                  <View
+                                    style={
                                       [
                                         {
-                                          "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                          "borderRadius": 2,
+                                          "height": 4,
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "backgroundColor": "#CBCED1",
                                         },
                                       ]
                                     }
-                                    style={
+                                  >
+                                    <View
+                                      style={
+                                        [
+                                          {
+                                            "borderRadius": 2,
+                                            "height": 4,
+                                            "width": "100%",
+                                          },
+                                          {
+                                            "width": 0,
+                                          },
+                                          {
+                                            "backgroundColor": "#156FF5",
+                                          },
+                                        ]
+                                      }
+                                    />
+                                  </View>
+                                  <View
+                                    collapsable={false}
+                                    enabled={false}
+                                    handlerTag={479}
+                                    handlerType="PanGestureHandler"
+                                    hitSlop={
                                       {
-                                        "height": 15,
-                                        "width": 15,
+                                        "bottom": 12,
+                                        "left": 8,
+                                        "right": 8,
+                                        "top": 12,
                                       }
                                     }
-                                    transition={null}
-                                    width={15}
+                                    onGestureHandlerEvent={[Function]}
+                                    onGestureHandlerStateChange={[Function]}
+                                    style={
+                                      [
+                                        {
+                                          "borderRadius": 6,
+                                          "height": 12,
+                                          "position": "absolute",
+                                          "width": 12,
+                                        },
+                                        {
+                                          "backgroundColor": "#D1EBFE",
+                                        },
+                                        {
+                                          "transform": [
+                                            {
+                                              "translateX": -6,
+                                            },
+                                            {
+                                              "scale": 1,
+                                            },
+                                          ],
+                                        },
+                                      ]
+                                    }
                                   />
                                 </View>
-                              </Text>
-                            </Text>
+                              </View>
+                            </View>
                           </View>
                           <View
                             style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": 56,
-                                },
-                                {
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#EBECEF",
-                                },
-                              ]
+                              {
+                                "gap": 4,
+                              }
                             }
                           >
                             <View
-                              accessibilityLabel="To download"
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": false,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              hitSlop={
-                                {
-                                  "bottom": 8,
-                                  "left": 8,
-                                  "right": 8,
-                                  "top": 8,
-                                }
-                              }
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
                               style={
                                 {
-                                  "alignItems": "center",
-                                  "backgroundColor": "#156FF5",
-                                  "borderRadius": 4,
-                                  "height": 32,
-                                  "justifyContent": "center",
-                                  "marginLeft": 16,
-                                  "opacity": 1,
-                                  "width": 32,
+                                  "gap": 2,
                                 }
                               }
                             >
                               <Text
-                                allowFontScaling={false}
-                                selectable={false}
                                 style={
                                   [
                                     {
-                                      "color": "#FFFFFF",
-                                      "fontSize": 31.200000000000003,
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
                                     },
-                                    [
-                                      {
-                                        "lineHeight": 31.200000000000003,
-                                      },
-                                      undefined,
-                                    ],
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "color": "#2F343D",
                                     },
-                                    {},
                                   ]
                                 }
                               >
-                                
+                                <Text
+                                  style={
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    accessibilityLabel="This is a description "
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    This is a description 
+                                  </Text>
+                                  <View
+                                    style={
+                                      {
+                                        "transform": [
+                                          {
+                                            "translateY": 3,
+                                          },
+                                        ],
+                                      }
+                                    }
+                                  >
+                                    <ViewManagerAdapter_ExpoImage
+                                      containerViewRef={"[React.ref]"}
+                                      contentFit="contain"
+                                      contentPosition={
+                                        {
+                                          "left": "50%",
+                                          "top": "50%",
+                                        }
+                                      }
+                                      height={15}
+                                      nativeViewRef={"[React.ref]"}
+                                      onError={[Function]}
+                                      onLoad={[Function]}
+                                      onLoadStart={[Function]}
+                                      onProgress={[Function]}
+                                      placeholder={[]}
+                                      source={
+                                        [
+                                          {
+                                            "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                          },
+                                        ]
+                                      }
+                                      style={
+                                        {
+                                          "height": 15,
+                                          "width": 15,
+                                        }
+                                      }
+                                      transition={null}
+                                      width={15}
+                                    />
+                                  </View>
+                                </Text>
                               </Text>
                             </View>
                             <View
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": undefined,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              focusable={false}
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
                               style={
-                                {
-                                  "alignItems": "center",
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": "100%",
-                                }
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": 56,
+                                  },
+                                  {
+                                    "backgroundColor": "#FFFFFF",
+                                    "borderColor": "#EBECEF",
+                                  },
+                                ]
                               }
                             >
-                              <TextInput
-                                animatedProps={
+                              <View
+                                accessibilityLabel="To download"
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": false,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={
                                   {
-                                    "text": "00:00",
+                                    "bottom": 8,
+                                    "left": 8,
+                                    "right": 8,
+                                    "top": 8,
                                   }
                                 }
-                                defaultValue="00:00"
-                                editable={false}
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
                                 style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 14,
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                      "fontWeight": "400",
-                                      "marginHorizontal": 12,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "alignItems": "center",
+                                    "backgroundColor": "#156FF5",
+                                    "borderRadius": 4,
+                                    "height": 32,
+                                    "justifyContent": "center",
+                                    "marginLeft": 16,
+                                    "opacity": 1,
+                                    "width": 32,
+                                  }
                                 }
-                              />
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#FFFFFF",
+                                        "fontSize": 24,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 24,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
                               <View
-                                onLayout={[Function]}
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": undefined,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                focusable={false}
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
                                 style={
                                   {
+                                    "alignItems": "center",
                                     "flex": 1,
+                                    "flexDirection": "row",
                                     "height": "100%",
-                                    "justifyContent": "center",
-                                    "marginRight": 12,
                                   }
                                 }
                               >
-                                <View
+                                <TextInput
+                                  animatedProps={
+                                    {
+                                      "text": "00:00",
+                                    }
+                                  }
+                                  defaultValue="00:00"
+                                  editable={false}
                                   style={
                                     [
                                       {
-                                        "borderRadius": 2,
-                                        "height": 4,
-                                        "width": "100%",
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 14,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginHorizontal": 12,
+                                        "textAlign": "left",
                                       },
                                       {
-                                        "backgroundColor": "#CBCED1",
+                                        "color": "#2F343D",
                                       },
                                     ]
                                   }
+                                />
+                                <View
+                                  onLayout={[Function]}
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "height": "100%",
+                                      "justifyContent": "center",
+                                      "marginRight": 12,
+                                    }
+                                  }
                                 >
                                   <View
                                     style={
@@ -123846,54 +138711,320 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                                           "width": "100%",
                                         },
                                         {
-                                          "width": 0,
+                                          "backgroundColor": "#CBCED1",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        [
+                                          {
+                                            "borderRadius": 2,
+                                            "height": 4,
+                                            "width": "100%",
+                                          },
+                                          {
+                                            "width": 0,
+                                          },
+                                          {
+                                            "backgroundColor": "#156FF5",
+                                          },
+                                        ]
+                                      }
+                                    />
+                                  </View>
+                                  <View
+                                    collapsable={false}
+                                    enabled={false}
+                                    handlerTag={480}
+                                    handlerType="PanGestureHandler"
+                                    hitSlop={
+                                      {
+                                        "bottom": 12,
+                                        "left": 8,
+                                        "right": 8,
+                                        "top": 12,
+                                      }
+                                    }
+                                    onGestureHandlerEvent={[Function]}
+                                    onGestureHandlerStateChange={[Function]}
+                                    style={
+                                      [
+                                        {
+                                          "borderRadius": 6,
+                                          "height": 12,
+                                          "position": "absolute",
+                                          "width": 12,
+                                        },
+                                        {
+                                          "backgroundColor": "#D1EBFE",
                                         },
                                         {
-                                          "backgroundColor": "#156FF5",
+                                          "transform": [
+                                            {
+                                              "translateX": -6,
+                                            },
+                                            {
+                                              "scale": 1,
+                                            },
+                                          ],
                                         },
                                       ]
                                     }
                                   />
                                 </View>
-                                <View
-                                  collapsable={false}
-                                  enabled={false}
-                                  handlerTag={8}
-                                  handlerType="PanGestureHandler"
-                                  hitSlop={
-                                    {
-                                      "bottom": 12,
-                                      "left": 8,
-                                      "right": 8,
-                                      "top": 12,
-                                    }
+                              </View>
+                            </View>
+                          </View>
+                          <View
+                            style={
+                              {
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": 56,
+                                  },
+                                  {
+                                    "backgroundColor": "#FFFFFF",
+                                    "borderColor": "#EBECEF",
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                accessibilityLabel="To download"
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": false,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={
+                                  {
+                                    "bottom": 8,
+                                    "left": 8,
+                                    "right": 8,
+                                    "top": 8,
                                   }
-                                  onGestureHandlerEvent={[Function]}
-                                  onGestureHandlerStateChange={[Function]}
+                                }
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "backgroundColor": "#156FF5",
+                                    "borderRadius": 4,
+                                    "height": 32,
+                                    "justifyContent": "center",
+                                    "marginLeft": 16,
+                                    "opacity": 1,
+                                    "width": 32,
+                                  }
+                                }
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
                                   style={
                                     [
                                       {
-                                        "borderRadius": 6,
-                                        "height": 12,
-                                        "position": "absolute",
-                                        "width": 12,
+                                        "color": "#FFFFFF",
+                                        "fontSize": 24,
                                       },
+                                      [
+                                        {
+                                          "lineHeight": 24,
+                                        },
+                                        undefined,
+                                      ],
                                       {
-                                        "backgroundColor": "#D1EBFE",
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
                                       },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
+                              <View
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": undefined,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                focusable={false}
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": "100%",
+                                  }
+                                }
+                              >
+                                <TextInput
+                                  animatedProps={
+                                    {
+                                      "text": "00:00",
+                                    }
+                                  }
+                                  defaultValue="00:00"
+                                  editable={false}
+                                  style={
+                                    [
                                       {
-                                        "transform": [
-                                          {
-                                            "translateX": -6,
-                                          },
-                                          {
-                                            "scale": 1,
-                                          },
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 14,
+                                        "fontVariant": [
+                                          "tabular-nums",
                                         ],
+                                        "fontWeight": "400",
+                                        "marginHorizontal": 12,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
                                       },
                                     ]
                                   }
                                 />
+                                <View
+                                  onLayout={[Function]}
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "height": "100%",
+                                      "justifyContent": "center",
+                                      "marginRight": 12,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      [
+                                        {
+                                          "borderRadius": 2,
+                                          "height": 4,
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "backgroundColor": "#CBCED1",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        [
+                                          {
+                                            "borderRadius": 2,
+                                            "height": 4,
+                                            "width": "100%",
+                                          },
+                                          {
+                                            "width": 0,
+                                          },
+                                          {
+                                            "backgroundColor": "#156FF5",
+                                          },
+                                        ]
+                                      }
+                                    />
+                                  </View>
+                                  <View
+                                    collapsable={false}
+                                    enabled={false}
+                                    handlerTag={481}
+                                    handlerType="PanGestureHandler"
+                                    hitSlop={
+                                      {
+                                        "bottom": 12,
+                                        "left": 8,
+                                        "right": 8,
+                                        "top": 12,
+                                      }
+                                    }
+                                    onGestureHandlerEvent={[Function]}
+                                    onGestureHandlerStateChange={[Function]}
+                                    style={
+                                      [
+                                        {
+                                          "borderRadius": 6,
+                                          "height": 12,
+                                          "position": "absolute",
+                                          "width": 12,
+                                        },
+                                        {
+                                          "backgroundColor": "#D1EBFE",
+                                        },
+                                        {
+                                          "transform": [
+                                            {
+                                              "translateX": -6,
+                                            },
+                                            {
+                                              "scale": 1,
+                                            },
+                                          ],
+                                        },
+                                      ]
+                                    }
+                                  />
+                                </View>
                               </View>
                             </View>
                           </View>
@@ -123901,21 +139032,41 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                       </View>
                     </View>
                   </View>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
+                  />
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+    }
+  }
+>
+  <View>
     <A11yOrderView
-      orderKey=":r9g:"
+      orderKey=":r9f:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r9g:"
+        orderKey=":r9f:"
       >
         <View
           accessibilityState={
@@ -123948,116 +139099,356 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  First message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="First message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9g:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9f:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
+                  >
+                    <View
+                      accessible={true}
+                      style={
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
+                      }
+                      testID="avatar"
+                    >
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={482}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
+                        }
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
+                    </View>
+                  </View>
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-First message"
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
+                      >
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={483}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
+                          style={
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
+                          }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
+                        >
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
                           style={
                             {
-                              "gap": 2,
+                              "gap": 4,
                             }
                           }
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 4,
+                              }
                             }
                           >
-                            <Text
+                            <View
                               style={
                                 {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
+                                  "gap": 2,
                                 }
                               }
                             >
                               <Text
-                                accessibilityLabel="First message"
                                 style={
                                   [
                                     {
-                                      "flexShrink": 1,
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
                                       "fontSize": 16,
+                                      "fontWeight": "400",
                                       "lineHeight": 22,
+                                      "textAlign": "left",
                                     },
                                     {
                                       "color": "#2F343D",
@@ -124065,36 +139456,344 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                                   ]
                                 }
                               >
-                                First message
+                                <Text
+                                  style={
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    accessibilityLabel="This is a description "
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    This is a description 
+                                  </Text>
+                                  <View
+                                    style={
+                                      {
+                                        "transform": [
+                                          {
+                                            "translateY": 3,
+                                          },
+                                        ],
+                                      }
+                                    }
+                                  >
+                                    <ViewManagerAdapter_ExpoImage
+                                      containerViewRef={"[React.ref]"}
+                                      contentFit="contain"
+                                      contentPosition={
+                                        {
+                                          "left": "50%",
+                                          "top": "50%",
+                                        }
+                                      }
+                                      height={15}
+                                      nativeViewRef={"[React.ref]"}
+                                      onError={[Function]}
+                                      onLoad={[Function]}
+                                      onLoadStart={[Function]}
+                                      onProgress={[Function]}
+                                      placeholder={[]}
+                                      source={
+                                        [
+                                          {
+                                            "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                          },
+                                        ]
+                                      }
+                                      style={
+                                        {
+                                          "height": 15,
+                                          "width": 15,
+                                        }
+                                      }
+                                      transition={null}
+                                      width={15}
+                                    />
+                                  </View>
+                                </Text>
                               </Text>
-                            </Text>
-                          </Text>
+                            </View>
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": 56,
+                                  },
+                                  {
+                                    "backgroundColor": "#FFFFFF",
+                                    "borderColor": "#EBECEF",
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                accessibilityLabel="To download"
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": false,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={
+                                  {
+                                    "bottom": 8,
+                                    "left": 8,
+                                    "right": 8,
+                                    "top": 8,
+                                  }
+                                }
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "backgroundColor": "#156FF5",
+                                    "borderRadius": 4,
+                                    "height": 32,
+                                    "justifyContent": "center",
+                                    "marginLeft": 16,
+                                    "opacity": 1,
+                                    "width": 32,
+                                  }
+                                }
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#FFFFFF",
+                                        "fontSize": 31.200000000000003,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 31.200000000000003,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
+                              <View
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": undefined,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                focusable={false}
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": "100%",
+                                  }
+                                }
+                              >
+                                <TextInput
+                                  animatedProps={
+                                    {
+                                      "text": "00:00",
+                                    }
+                                  }
+                                  defaultValue="00:00"
+                                  editable={false}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 14,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginHorizontal": 12,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                />
+                                <View
+                                  onLayout={[Function]}
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "height": "100%",
+                                      "justifyContent": "center",
+                                      "marginRight": 12,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      [
+                                        {
+                                          "borderRadius": 2,
+                                          "height": 4,
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "backgroundColor": "#CBCED1",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        [
+                                          {
+                                            "borderRadius": 2,
+                                            "height": 4,
+                                            "width": "100%",
+                                          },
+                                          {
+                                            "width": 0,
+                                          },
+                                          {
+                                            "backgroundColor": "#156FF5",
+                                          },
+                                        ]
+                                      }
+                                    />
+                                  </View>
+                                  <View
+                                    collapsable={false}
+                                    enabled={false}
+                                    handlerTag={484}
+                                    handlerType="PanGestureHandler"
+                                    hitSlop={
+                                      {
+                                        "bottom": 12,
+                                        "left": 8,
+                                        "right": 8,
+                                        "top": 12,
+                                      }
+                                    }
+                                    onGestureHandlerEvent={[Function]}
+                                    onGestureHandlerStateChange={[Function]}
+                                    style={
+                                      [
+                                        {
+                                          "borderRadius": 6,
+                                          "height": 12,
+                                          "position": "absolute",
+                                          "width": 12,
+                                        },
+                                        {
+                                          "backgroundColor": "#D1EBFE",
+                                        },
+                                        {
+                                          "transform": [
+                                            {
+                                              "translateX": -6,
+                                            },
+                                            {
+                                              "scale": 1,
+                                            },
+                                          ],
+                                        },
+                                      ]
+                                    }
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
-                    }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r9h:"
+      orderKey=":r9g:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r9h:"
+        orderKey=":r9g:"
       >
         <View
           accessibilityState={
@@ -124127,67 +139826,73 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9h:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  First message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="First message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9g:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                >
+                  <View
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                  }
-                >
+                  />
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
@@ -124199,11 +139904,7 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                         }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
+                          testID="message-content-First message"
                         >
                           <View
                             style={
@@ -124241,7 +139942,7 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="This is a description"
+                                  accessibilityLabel="First message"
                                   style={
                                     [
                                       {
@@ -124255,280 +139956,37 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                                     ]
                                   }
                                 >
-                                  This is a description
+                                  First message
                                 </Text>
                               </Text>
                             </Text>
                           </View>
-                          <View
-                            style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": 56,
-                                },
-                                {
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#EBECEF",
-                                },
-                              ]
-                            }
-                          >
-                            <View
-                              accessibilityLabel="To download"
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": false,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              hitSlop={
-                                {
-                                  "bottom": 8,
-                                  "left": 8,
-                                  "right": 8,
-                                  "top": 8,
-                                }
-                              }
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "backgroundColor": "#156FF5",
-                                  "borderRadius": 4,
-                                  "height": 32,
-                                  "justifyContent": "center",
-                                  "marginLeft": 16,
-                                  "opacity": 1,
-                                  "width": 32,
-                                }
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
-                                style={
-                                  [
-                                    {
-                                      "color": "#FFFFFF",
-                                      "fontSize": 31.200000000000003,
-                                    },
-                                    [
-                                      {
-                                        "lineHeight": 31.200000000000003,
-                                      },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
-                                }
-                              >
-                                
-                              </Text>
-                            </View>
-                            <View
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": undefined,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              focusable={false}
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": "100%",
-                                }
-                              }
-                            >
-                              <TextInput
-                                animatedProps={
-                                  {
-                                    "text": "00:00",
-                                  }
-                                }
-                                defaultValue="00:00"
-                                editable={false}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 14,
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                      "fontWeight": "400",
-                                      "marginHorizontal": 12,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              />
-                              <View
-                                onLayout={[Function]}
-                                style={
-                                  {
-                                    "flex": 1,
-                                    "height": "100%",
-                                    "justifyContent": "center",
-                                    "marginRight": 12,
-                                  }
-                                }
-                              >
-                                <View
-                                  style={
-                                    [
-                                      {
-                                        "borderRadius": 2,
-                                        "height": 4,
-                                        "width": "100%",
-                                      },
-                                      {
-                                        "backgroundColor": "#CBCED1",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "borderRadius": 2,
-                                          "height": 4,
-                                          "width": "100%",
-                                        },
-                                        {
-                                          "width": 0,
-                                        },
-                                        {
-                                          "backgroundColor": "#156FF5",
-                                        },
-                                      ]
-                                    }
-                                  />
-                                </View>
-                                <View
-                                  collapsable={false}
-                                  enabled={false}
-                                  handlerTag={9}
-                                  handlerType="PanGestureHandler"
-                                  hitSlop={
-                                    {
-                                      "bottom": 12,
-                                      "left": 8,
-                                      "right": 8,
-                                      "top": 12,
-                                    }
-                                  }
-                                  onGestureHandlerEvent={[Function]}
-                                  onGestureHandlerStateChange={[Function]}
-                                  style={
-                                    [
-                                      {
-                                        "borderRadius": 6,
-                                        "height": 12,
-                                        "position": "absolute",
-                                        "width": 12,
-                                      },
-                                      {
-                                        "backgroundColor": "#D1EBFE",
-                                      },
-                                      {
-                                        "transform": [
-                                          {
-                                            "translateX": -6,
-                                          },
-                                          {
-                                            "scale": 1,
-                                          },
-                                        ],
-                                      },
-                                    ]
-                                  }
-                                />
-                              </View>
-                            </View>
-                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r9i:"
+      orderKey=":r9h:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r9i:"
+        orderKey=":r9h:"
       >
         <View
           accessibilityState={
@@ -124561,67 +140019,73 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9i:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9h:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
@@ -124641,244 +140105,307 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                         >
                           <View
                             style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": 56,
-                                },
-                                {
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#EBECEF",
-                                },
-                              ]
+                              {
+                                "gap": 4,
+                              }
                             }
                           >
                             <View
-                              accessibilityLabel="To download"
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": false,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              hitSlop={
-                                {
-                                  "bottom": 8,
-                                  "left": 8,
-                                  "right": 8,
-                                  "top": 8,
-                                }
-                              }
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
                               style={
                                 {
-                                  "alignItems": "center",
-                                  "backgroundColor": "#156FF5",
-                                  "borderRadius": 4,
-                                  "height": 32,
-                                  "justifyContent": "center",
-                                  "marginLeft": 16,
-                                  "opacity": 1,
-                                  "width": 32,
+                                  "gap": 2,
                                 }
                               }
                             >
                               <Text
-                                allowFontScaling={false}
-                                selectable={false}
                                 style={
                                   [
                                     {
-                                      "color": "#FFFFFF",
-                                      "fontSize": 31.200000000000003,
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
                                     },
-                                    [
-                                      {
-                                        "lineHeight": 31.200000000000003,
-                                      },
-                                      undefined,
-                                    ],
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "color": "#2F343D",
                                     },
-                                    {},
                                   ]
                                 }
                               >
-                                
+                                <Text
+                                  style={
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    accessibilityLabel="This is a description"
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    This is a description
+                                  </Text>
+                                </Text>
                               </Text>
                             </View>
                             <View
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": undefined,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              focusable={false}
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
                               style={
-                                {
-                                  "alignItems": "center",
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": "100%",
-                                }
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": 56,
+                                  },
+                                  {
+                                    "backgroundColor": "#FFFFFF",
+                                    "borderColor": "#EBECEF",
+                                  },
+                                ]
                               }
                             >
-                              <TextInput
-                                animatedProps={
+                              <View
+                                accessibilityLabel="To download"
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": false,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={
                                   {
-                                    "text": "00:00",
+                                    "bottom": 8,
+                                    "left": 8,
+                                    "right": 8,
+                                    "top": 8,
                                   }
                                 }
-                                defaultValue="00:00"
-                                editable={false}
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
                                 style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 14,
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                      "fontWeight": "400",
-                                      "marginHorizontal": 12,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "alignItems": "center",
+                                    "backgroundColor": "#156FF5",
+                                    "borderRadius": 4,
+                                    "height": 32,
+                                    "justifyContent": "center",
+                                    "marginLeft": 16,
+                                    "opacity": 1,
+                                    "width": 32,
+                                  }
                                 }
-                              />
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#FFFFFF",
+                                        "fontSize": 31.200000000000003,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 31.200000000000003,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
                               <View
-                                onLayout={[Function]}
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": undefined,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                focusable={false}
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
                                 style={
                                   {
+                                    "alignItems": "center",
                                     "flex": 1,
+                                    "flexDirection": "row",
                                     "height": "100%",
-                                    "justifyContent": "center",
-                                    "marginRight": 12,
                                   }
                                 }
                               >
-                                <View
+                                <TextInput
+                                  animatedProps={
+                                    {
+                                      "text": "00:00",
+                                    }
+                                  }
+                                  defaultValue="00:00"
+                                  editable={false}
                                   style={
                                     [
                                       {
-                                        "borderRadius": 2,
-                                        "height": 4,
-                                        "width": "100%",
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 14,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginHorizontal": 12,
+                                        "textAlign": "left",
                                       },
                                       {
-                                        "backgroundColor": "#CBCED1",
+                                        "color": "#2F343D",
                                       },
                                     ]
                                   }
+                                />
+                                <View
+                                  onLayout={[Function]}
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "height": "100%",
+                                      "justifyContent": "center",
+                                      "marginRight": 12,
+                                    }
+                                  }
                                 >
                                   <View
                                     style={
                                       [
                                         {
-                                          "borderRadius": 2,
-                                          "height": 4,
-                                          "width": "100%",
+                                          "borderRadius": 2,
+                                          "height": 4,
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "backgroundColor": "#CBCED1",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        [
+                                          {
+                                            "borderRadius": 2,
+                                            "height": 4,
+                                            "width": "100%",
+                                          },
+                                          {
+                                            "width": 0,
+                                          },
+                                          {
+                                            "backgroundColor": "#156FF5",
+                                          },
+                                        ]
+                                      }
+                                    />
+                                  </View>
+                                  <View
+                                    collapsable={false}
+                                    enabled={false}
+                                    handlerTag={485}
+                                    handlerType="PanGestureHandler"
+                                    hitSlop={
+                                      {
+                                        "bottom": 12,
+                                        "left": 8,
+                                        "right": 8,
+                                        "top": 12,
+                                      }
+                                    }
+                                    onGestureHandlerEvent={[Function]}
+                                    onGestureHandlerStateChange={[Function]}
+                                    style={
+                                      [
+                                        {
+                                          "borderRadius": 6,
+                                          "height": 12,
+                                          "position": "absolute",
+                                          "width": 12,
                                         },
                                         {
-                                          "width": 0,
+                                          "backgroundColor": "#D1EBFE",
                                         },
                                         {
-                                          "backgroundColor": "#156FF5",
+                                          "transform": [
+                                            {
+                                              "translateX": -6,
+                                            },
+                                            {
+                                              "scale": 1,
+                                            },
+                                          ],
                                         },
                                       ]
                                     }
                                   />
                                 </View>
-                                <View
-                                  collapsable={false}
-                                  enabled={false}
-                                  handlerTag={10}
-                                  handlerType="PanGestureHandler"
-                                  hitSlop={
-                                    {
-                                      "bottom": 12,
-                                      "left": 8,
-                                      "right": 8,
-                                      "top": 12,
-                                    }
-                                  }
-                                  onGestureHandlerEvent={[Function]}
-                                  onGestureHandlerStateChange={[Function]}
-                                  style={
-                                    [
-                                      {
-                                        "borderRadius": 6,
-                                        "height": 12,
-                                        "position": "absolute",
-                                        "width": 12,
-                                      },
-                                      {
-                                        "backgroundColor": "#D1EBFE",
-                                      },
-                                      {
-                                        "transform": [
-                                          {
-                                            "translateX": -6,
-                                          },
-                                          {
-                                            "scale": 1,
-                                          },
-                                        ],
-                                      },
-                                    ]
-                                  }
-                                />
                               </View>
                             </View>
                           </View>
@@ -124886,28 +140413,28 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
     </A11yOrderView>
     <A11yOrderView
-      orderKey=":r9j:"
+      orderKey=":r9i:"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey=":r9j:"
+        orderKey=":r9i:"
       >
         <View
           accessibilityState={
@@ -124940,129 +140467,76 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  multi file.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="multi file"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9j:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9i:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
-                      <View
-                        testID="message-content-multi file"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
-                        >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="multi file"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                multi file
-                              </Text>
-                            </Text>
-                          </Text>
-                        </View>
-                      </View>
                       <View
                         style={
                           {
@@ -125079,186 +140553,179 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                         >
                           <View
                             style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": 56,
-                                },
-                                {
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#EBECEF",
-                                },
-                              ]
+                              {
+                                "gap": 4,
+                              }
                             }
                           >
                             <View
-                              accessibilityLabel="To download"
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": false,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": 56,
+                                  },
+                                  {
+                                    "backgroundColor": "#FFFFFF",
+                                    "borderColor": "#EBECEF",
+                                  },
+                                ]
                               }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
+                            >
+                              <View
+                                accessibilityLabel="To download"
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": false,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
                                 }
-                              }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              hitSlop={
-                                {
-                                  "bottom": 8,
-                                  "left": 8,
-                                  "right": 8,
-                                  "top": 8,
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
                                 }
-                              }
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "backgroundColor": "#156FF5",
-                                  "borderRadius": 4,
-                                  "height": 32,
-                                  "justifyContent": "center",
-                                  "marginLeft": 16,
-                                  "opacity": 1,
-                                  "width": 32,
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={
+                                  {
+                                    "bottom": 8,
+                                    "left": 8,
+                                    "right": 8,
+                                    "top": 8,
+                                  }
                                 }
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
                                 style={
-                                  [
-                                    {
-                                      "color": "#FFFFFF",
-                                      "fontSize": 31.200000000000003,
-                                    },
+                                  {
+                                    "alignItems": "center",
+                                    "backgroundColor": "#156FF5",
+                                    "borderRadius": 4,
+                                    "height": 32,
+                                    "justifyContent": "center",
+                                    "marginLeft": 16,
+                                    "opacity": 1,
+                                    "width": 32,
+                                  }
+                                }
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
                                     [
                                       {
-                                        "lineHeight": 31.200000000000003,
+                                        "color": "#FFFFFF",
+                                        "fontSize": 31.200000000000003,
                                       },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
-                                }
-                              >
-                                
-                              </Text>
-                            </View>
-                            <View
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": undefined,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              focusable={false}
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": "100%",
-                                }
-                              }
-                            >
-                              <TextInput
-                                animatedProps={
+                                      [
+                                        {
+                                          "lineHeight": 31.200000000000003,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
+                              <View
+                                accessibilityState={
                                   {
-                                    "text": "00:00",
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": undefined,
+                                    "expanded": undefined,
+                                    "selected": undefined,
                                   }
                                 }
-                                defaultValue="00:00"
-                                editable={false}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 14,
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                      "fontWeight": "400",
-                                      "marginHorizontal": 12,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
                                 }
-                              />
-                              <View
-                                onLayout={[Function]}
+                                accessible={true}
+                                focusable={false}
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
                                 style={
                                   {
+                                    "alignItems": "center",
                                     "flex": 1,
+                                    "flexDirection": "row",
                                     "height": "100%",
-                                    "justifyContent": "center",
-                                    "marginRight": 12,
                                   }
                                 }
                               >
-                                <View
+                                <TextInput
+                                  animatedProps={
+                                    {
+                                      "text": "00:00",
+                                    }
+                                  }
+                                  defaultValue="00:00"
+                                  editable={false}
                                   style={
                                     [
                                       {
-                                        "borderRadius": 2,
-                                        "height": 4,
-                                        "width": "100%",
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 14,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginHorizontal": 12,
+                                        "textAlign": "left",
                                       },
                                       {
-                                        "backgroundColor": "#CBCED1",
+                                        "color": "#2F343D",
                                       },
                                     ]
                                   }
+                                />
+                                <View
+                                  onLayout={[Function]}
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "height": "100%",
+                                      "justifyContent": "center",
+                                      "marginRight": 12,
+                                    }
+                                  }
                                 >
                                   <View
                                     style={
@@ -125269,64 +140736,209 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                                           "width": "100%",
                                         },
                                         {
-                                          "width": 0,
-                                        },
-                                        {
-                                          "backgroundColor": "#156FF5",
+                                          "backgroundColor": "#CBCED1",
                                         },
                                       ]
                                     }
-                                  />
-                                </View>
-                                <View
-                                  collapsable={false}
-                                  enabled={false}
-                                  handlerTag={11}
-                                  handlerType="PanGestureHandler"
-                                  hitSlop={
-                                    {
-                                      "bottom": 12,
-                                      "left": 8,
-                                      "right": 8,
-                                      "top": 12,
-                                    }
-                                  }
-                                  onGestureHandlerEvent={[Function]}
-                                  onGestureHandlerStateChange={[Function]}
-                                  style={
-                                    [
-                                      {
-                                        "borderRadius": 6,
-                                        "height": 12,
-                                        "position": "absolute",
-                                        "width": 12,
-                                      },
-                                      {
-                                        "backgroundColor": "#D1EBFE",
-                                      },
-                                      {
-                                        "transform": [
+                                  >
+                                    <View
+                                      style={
+                                        [
                                           {
-                                            "translateX": -6,
+                                            "borderRadius": 2,
+                                            "height": 4,
+                                            "width": "100%",
                                           },
                                           {
-                                            "scale": 1,
+                                            "width": 0,
                                           },
-                                        ],
-                                      },
-                                    ]
-                                  }
-                                />
+                                          {
+                                            "backgroundColor": "#156FF5",
+                                          },
+                                        ]
+                                      }
+                                    />
+                                  </View>
+                                  <View
+                                    collapsable={false}
+                                    enabled={false}
+                                    handlerTag={486}
+                                    handlerType="PanGestureHandler"
+                                    hitSlop={
+                                      {
+                                        "bottom": 12,
+                                        "left": 8,
+                                        "right": 8,
+                                        "top": 12,
+                                      }
+                                    }
+                                    onGestureHandlerEvent={[Function]}
+                                    onGestureHandlerStateChange={[Function]}
+                                    style={
+                                      [
+                                        {
+                                          "borderRadius": 6,
+                                          "height": 12,
+                                          "position": "absolute",
+                                          "width": 12,
+                                        },
+                                        {
+                                          "backgroundColor": "#D1EBFE",
+                                        },
+                                        {
+                                          "transform": [
+                                            {
+                                              "translateX": -6,
+                                            },
+                                            {
+                                              "scale": 1,
+                                            },
+                                          ],
+                                        },
+                                      ]
+                                    }
+                                  />
+                                </View>
                               </View>
                             </View>
                           </View>
                         </View>
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
+                      </View>
+                    </View>
+                  </View>
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
+                    }
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
+          </View>
+        </View>
+      </A11yIndexView>
+    </A11yOrderView>
+    <A11yOrderView
+      orderKey=":r9j:"
+    >
+      <A11yIndexView
+        importantForAccessibility="yes"
+        orderFocusType={0}
+        orderIndex={1}
+        orderKey=":r9j:"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  multi file.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
+                }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="multi file"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9j:"
+              >
+                <View
+                  accessible={true}
+                  style={
+                    {
+                      "flexDirection": "row",
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
+                  />
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
+                    <View
+                      onLayout={[Function]}
+                      style={
+                        {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          {
+                            "gap": 4,
                           }
+                        }
+                      >
+                        <View
+                          testID="message-content-multi file"
                         >
                           <View
                             style={
@@ -125364,7 +140976,7 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="This is a description "
+                                  accessibilityLabel="multi file"
                                   style={
                                     [
                                       {
@@ -125378,239 +140990,194 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                                     ]
                                   }
                                 >
-                                  This is a description 
+                                  multi file
                                 </Text>
-                                <View
-                                  style={
-                                    [
-                                      {
-                                        "transform": [
-                                          {
-                                            "translateY": 3,
-                                          },
-                                        ],
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <ViewManagerAdapter_ExpoImage
-                                    containerViewRef={"[React.ref]"}
-                                    contentFit="contain"
-                                    contentPosition={
-                                      {
-                                        "left": "50%",
-                                        "top": "50%",
-                                      }
-                                    }
-                                    height={15}
-                                    nativeViewRef={"[React.ref]"}
-                                    onError={[Function]}
-                                    onLoad={[Function]}
-                                    onLoadStart={[Function]}
-                                    onProgress={[Function]}
-                                    placeholder={[]}
-                                    source={
-                                      [
-                                        {
-                                          "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                        },
-                                      ]
-                                    }
-                                    style={
-                                      {
-                                        "height": 15,
-                                        "width": 15,
-                                      }
-                                    }
-                                    transition={null}
-                                    width={15}
-                                  />
-                                </View>
                               </Text>
                             </Text>
                           </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "gap": 4,
+                            }
+                          }
+                        >
                           <View
                             style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": 56,
-                                },
-                                {
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#EBECEF",
-                                },
-                              ]
+                              {
+                                "gap": 4,
+                              }
                             }
                           >
                             <View
-                              accessibilityLabel="To download"
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": false,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": 56,
+                                  },
+                                  {
+                                    "backgroundColor": "#FFFFFF",
+                                    "borderColor": "#EBECEF",
+                                  },
+                                ]
                               }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
+                            >
+                              <View
+                                accessibilityLabel="To download"
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": false,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
                                 }
-                              }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              hitSlop={
-                                {
-                                  "bottom": 8,
-                                  "left": 8,
-                                  "right": 8,
-                                  "top": 8,
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
                                 }
-                              }
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "backgroundColor": "#156FF5",
-                                  "borderRadius": 4,
-                                  "height": 32,
-                                  "justifyContent": "center",
-                                  "marginLeft": 16,
-                                  "opacity": 1,
-                                  "width": 32,
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={
+                                  {
+                                    "bottom": 8,
+                                    "left": 8,
+                                    "right": 8,
+                                    "top": 8,
+                                  }
                                 }
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
                                 style={
-                                  [
-                                    {
-                                      "color": "#FFFFFF",
-                                      "fontSize": 31.200000000000003,
-                                    },
+                                  {
+                                    "alignItems": "center",
+                                    "backgroundColor": "#156FF5",
+                                    "borderRadius": 4,
+                                    "height": 32,
+                                    "justifyContent": "center",
+                                    "marginLeft": 16,
+                                    "opacity": 1,
+                                    "width": 32,
+                                  }
+                                }
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
                                     [
                                       {
-                                        "lineHeight": 31.200000000000003,
+                                        "color": "#FFFFFF",
+                                        "fontSize": 31.200000000000003,
                                       },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
-                                }
-                              >
-                                
-                              </Text>
-                            </View>
-                            <View
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": undefined,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              focusable={false}
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                              style={
-                                {
-                                  "alignItems": "center",
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": "100%",
-                                }
-                              }
-                            >
-                              <TextInput
-                                animatedProps={
+                                      [
+                                        {
+                                          "lineHeight": 31.200000000000003,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
+                              <View
+                                accessibilityState={
                                   {
-                                    "text": "00:00",
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": undefined,
+                                    "expanded": undefined,
+                                    "selected": undefined,
                                   }
                                 }
-                                defaultValue="00:00"
-                                editable={false}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 14,
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                      "fontWeight": "400",
-                                      "marginHorizontal": 12,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
                                 }
-                              />
-                              <View
-                                onLayout={[Function]}
+                                accessible={true}
+                                focusable={false}
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
                                 style={
                                   {
+                                    "alignItems": "center",
                                     "flex": 1,
+                                    "flexDirection": "row",
                                     "height": "100%",
-                                    "justifyContent": "center",
-                                    "marginRight": 12,
                                   }
                                 }
                               >
-                                <View
+                                <TextInput
+                                  animatedProps={
+                                    {
+                                      "text": "00:00",
+                                    }
+                                  }
+                                  defaultValue="00:00"
+                                  editable={false}
                                   style={
                                     [
                                       {
-                                        "borderRadius": 2,
-                                        "height": 4,
-                                        "width": "100%",
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 14,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginHorizontal": 12,
+                                        "textAlign": "left",
                                       },
                                       {
-                                        "backgroundColor": "#CBCED1",
+                                        "color": "#2F343D",
                                       },
                                     ]
                                   }
+                                />
+                                <View
+                                  onLayout={[Function]}
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "height": "100%",
+                                      "justifyContent": "center",
+                                      "marginRight": 12,
+                                    }
+                                  }
                                 >
                                   <View
                                     style={
@@ -125621,247 +141188,346 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                                           "width": "100%",
                                         },
                                         {
-                                          "width": 0,
-                                        },
-                                        {
-                                          "backgroundColor": "#156FF5",
+                                          "backgroundColor": "#CBCED1",
                                         },
                                       ]
                                     }
-                                  />
-                                </View>
-                                <View
-                                  collapsable={false}
-                                  enabled={false}
-                                  handlerTag={12}
-                                  handlerType="PanGestureHandler"
-                                  hitSlop={
-                                    {
-                                      "bottom": 12,
-                                      "left": 8,
-                                      "right": 8,
-                                      "top": 12,
-                                    }
-                                  }
-                                  onGestureHandlerEvent={[Function]}
-                                  onGestureHandlerStateChange={[Function]}
-                                  style={
-                                    [
-                                      {
-                                        "borderRadius": 6,
-                                        "height": 12,
-                                        "position": "absolute",
-                                        "width": 12,
-                                      },
-                                      {
-                                        "backgroundColor": "#D1EBFE",
-                                      },
-                                      {
-                                        "transform": [
+                                  >
+                                    <View
+                                      style={
+                                        [
                                           {
-                                            "translateX": -6,
+                                            "borderRadius": 2,
+                                            "height": 4,
+                                            "width": "100%",
                                           },
                                           {
-                                            "scale": 1,
+                                            "width": 0,
                                           },
-                                        ],
-                                      },
-                                    ]
-                                  }
-                                />
+                                          {
+                                            "backgroundColor": "#156FF5",
+                                          },
+                                        ]
+                                      }
+                                    />
+                                  </View>
+                                  <View
+                                    collapsable={false}
+                                    enabled={false}
+                                    handlerTag={487}
+                                    handlerType="PanGestureHandler"
+                                    hitSlop={
+                                      {
+                                        "bottom": 12,
+                                        "left": 8,
+                                        "right": 8,
+                                        "top": 12,
+                                      }
+                                    }
+                                    onGestureHandlerEvent={[Function]}
+                                    onGestureHandlerStateChange={[Function]}
+                                    style={
+                                      [
+                                        {
+                                          "borderRadius": 6,
+                                          "height": 12,
+                                          "position": "absolute",
+                                          "width": 12,
+                                        },
+                                        {
+                                          "backgroundColor": "#D1EBFE",
+                                        },
+                                        {
+                                          "transform": [
+                                            {
+                                              "translateX": -6,
+                                            },
+                                            {
+                                              "scale": 1,
+                                            },
+                                          ],
+                                        },
+                                      ]
+                                    }
+                                  />
+                                </View>
                               </View>
                             </View>
                           </View>
-                        </View>
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
-                        >
                           <View
                             style={
-                              [
-                                {
-                                  "alignItems": "center",
-                                  "borderRadius": 4,
-                                  "borderWidth": 1,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": 56,
-                                },
-                                {
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#EBECEF",
-                                },
-                              ]
+                              {
+                                "gap": 4,
+                              }
                             }
                           >
                             <View
-                              accessibilityLabel="To download"
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": false,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              hitSlop={
-                                {
-                                  "bottom": 8,
-                                  "left": 8,
-                                  "right": 8,
-                                  "top": 8,
-                                }
-                              }
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
                               style={
                                 {
-                                  "alignItems": "center",
-                                  "backgroundColor": "#156FF5",
-                                  "borderRadius": 4,
-                                  "height": 32,
-                                  "justifyContent": "center",
-                                  "marginLeft": 16,
-                                  "opacity": 1,
-                                  "width": 32,
+                                  "gap": 2,
                                 }
                               }
                             >
                               <Text
-                                allowFontScaling={false}
-                                selectable={false}
                                 style={
                                   [
                                     {
-                                      "color": "#FFFFFF",
-                                      "fontSize": 31.200000000000003,
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
                                     },
-                                    [
-                                      {
-                                        "lineHeight": 31.200000000000003,
-                                      },
-                                      undefined,
-                                    ],
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "color": "#2F343D",
                                     },
-                                    {},
                                   ]
                                 }
                               >
-                                
+                                <Text
+                                  style={
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    accessibilityLabel="This is a description "
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    This is a description 
+                                  </Text>
+                                  <View
+                                    style={
+                                      {
+                                        "transform": [
+                                          {
+                                            "translateY": 3,
+                                          },
+                                        ],
+                                      }
+                                    }
+                                  >
+                                    <ViewManagerAdapter_ExpoImage
+                                      containerViewRef={"[React.ref]"}
+                                      contentFit="contain"
+                                      contentPosition={
+                                        {
+                                          "left": "50%",
+                                          "top": "50%",
+                                        }
+                                      }
+                                      height={15}
+                                      nativeViewRef={"[React.ref]"}
+                                      onError={[Function]}
+                                      onLoad={[Function]}
+                                      onLoadStart={[Function]}
+                                      onProgress={[Function]}
+                                      placeholder={[]}
+                                      source={
+                                        [
+                                          {
+                                            "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                          },
+                                        ]
+                                      }
+                                      style={
+                                        {
+                                          "height": 15,
+                                          "width": 15,
+                                        }
+                                      }
+                                      transition={null}
+                                      width={15}
+                                    />
+                                  </View>
+                                </Text>
                               </Text>
                             </View>
                             <View
-                              accessibilityState={
-                                {
-                                  "busy": undefined,
-                                  "checked": undefined,
-                                  "disabled": undefined,
-                                  "expanded": undefined,
-                                  "selected": undefined,
-                                }
-                              }
-                              accessibilityValue={
-                                {
-                                  "max": undefined,
-                                  "min": undefined,
-                                  "now": undefined,
-                                  "text": undefined,
-                                }
-                              }
-                              accessible={true}
-                              focusable={false}
-                              onClick={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
                               style={
-                                {
-                                  "alignItems": "center",
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": "100%",
-                                }
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": 56,
+                                  },
+                                  {
+                                    "backgroundColor": "#FFFFFF",
+                                    "borderColor": "#EBECEF",
+                                  },
+                                ]
                               }
                             >
-                              <TextInput
-                                animatedProps={
+                              <View
+                                accessibilityLabel="To download"
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": false,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={
+                                  {
+                                    "bottom": 8,
+                                    "left": 8,
+                                    "right": 8,
+                                    "top": 8,
+                                  }
+                                }
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "backgroundColor": "#156FF5",
+                                    "borderRadius": 4,
+                                    "height": 32,
+                                    "justifyContent": "center",
+                                    "marginLeft": 16,
+                                    "opacity": 1,
+                                    "width": 32,
+                                  }
+                                }
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#FFFFFF",
+                                        "fontSize": 31.200000000000003,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 31.200000000000003,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
+                              <View
+                                accessibilityState={
                                   {
-                                    "text": "00:00",
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": undefined,
+                                    "expanded": undefined,
+                                    "selected": undefined,
                                   }
                                 }
-                                defaultValue="00:00"
-                                editable={false}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 14,
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                      "fontWeight": "400",
-                                      "marginHorizontal": 12,
-                                      "textAlign": "left",
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
                                 }
-                              />
-                              <View
-                                onLayout={[Function]}
+                                accessible={true}
+                                focusable={false}
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
                                 style={
                                   {
+                                    "alignItems": "center",
                                     "flex": 1,
+                                    "flexDirection": "row",
                                     "height": "100%",
-                                    "justifyContent": "center",
-                                    "marginRight": 12,
                                   }
                                 }
                               >
-                                <View
+                                <TextInput
+                                  animatedProps={
+                                    {
+                                      "text": "00:00",
+                                    }
+                                  }
+                                  defaultValue="00:00"
+                                  editable={false}
                                   style={
                                     [
                                       {
-                                        "borderRadius": 2,
-                                        "height": 4,
-                                        "width": "100%",
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 14,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginHorizontal": 12,
+                                        "textAlign": "left",
                                       },
                                       {
-                                        "backgroundColor": "#CBCED1",
+                                        "color": "#2F343D",
                                       },
                                     ]
                                   }
+                                />
+                                <View
+                                  onLayout={[Function]}
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "height": "100%",
+                                      "justifyContent": "center",
+                                      "marginRight": 12,
+                                    }
+                                  }
                                 >
                                   <View
                                     style={
@@ -125872,54 +141538,320 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                                           "width": "100%",
                                         },
                                         {
-                                          "width": 0,
+                                          "backgroundColor": "#CBCED1",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        [
+                                          {
+                                            "borderRadius": 2,
+                                            "height": 4,
+                                            "width": "100%",
+                                          },
+                                          {
+                                            "width": 0,
+                                          },
+                                          {
+                                            "backgroundColor": "#156FF5",
+                                          },
+                                        ]
+                                      }
+                                    />
+                                  </View>
+                                  <View
+                                    collapsable={false}
+                                    enabled={false}
+                                    handlerTag={488}
+                                    handlerType="PanGestureHandler"
+                                    hitSlop={
+                                      {
+                                        "bottom": 12,
+                                        "left": 8,
+                                        "right": 8,
+                                        "top": 12,
+                                      }
+                                    }
+                                    onGestureHandlerEvent={[Function]}
+                                    onGestureHandlerStateChange={[Function]}
+                                    style={
+                                      [
+                                        {
+                                          "borderRadius": 6,
+                                          "height": 12,
+                                          "position": "absolute",
+                                          "width": 12,
+                                        },
+                                        {
+                                          "backgroundColor": "#D1EBFE",
                                         },
                                         {
-                                          "backgroundColor": "#156FF5",
+                                          "transform": [
+                                            {
+                                              "translateX": -6,
+                                            },
+                                            {
+                                              "scale": 1,
+                                            },
+                                          ],
                                         },
                                       ]
                                     }
                                   />
                                 </View>
-                                <View
-                                  collapsable={false}
-                                  enabled={false}
-                                  handlerTag={13}
-                                  handlerType="PanGestureHandler"
-                                  hitSlop={
-                                    {
-                                      "bottom": 12,
-                                      "left": 8,
-                                      "right": 8,
-                                      "top": 12,
-                                    }
+                              </View>
+                            </View>
+                          </View>
+                          <View
+                            style={
+                              {
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "borderRadius": 4,
+                                    "borderWidth": 1,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": 56,
+                                  },
+                                  {
+                                    "backgroundColor": "#FFFFFF",
+                                    "borderColor": "#EBECEF",
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                accessibilityLabel="To download"
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": false,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={
+                                  {
+                                    "bottom": 8,
+                                    "left": 8,
+                                    "right": 8,
+                                    "top": 8,
+                                  }
+                                }
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "backgroundColor": "#156FF5",
+                                    "borderRadius": 4,
+                                    "height": 32,
+                                    "justifyContent": "center",
+                                    "marginLeft": 16,
+                                    "opacity": 1,
+                                    "width": 32,
                                   }
-                                  onGestureHandlerEvent={[Function]}
-                                  onGestureHandlerStateChange={[Function]}
+                                }
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
                                   style={
                                     [
                                       {
-                                        "borderRadius": 6,
-                                        "height": 12,
-                                        "position": "absolute",
-                                        "width": 12,
+                                        "color": "#FFFFFF",
+                                        "fontSize": 31.200000000000003,
                                       },
+                                      [
+                                        {
+                                          "lineHeight": 31.200000000000003,
+                                        },
+                                        undefined,
+                                      ],
                                       {
-                                        "backgroundColor": "#D1EBFE",
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
                                       },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
+                              <View
+                                accessibilityState={
+                                  {
+                                    "busy": undefined,
+                                    "checked": undefined,
+                                    "disabled": undefined,
+                                    "expanded": undefined,
+                                    "selected": undefined,
+                                  }
+                                }
+                                accessibilityValue={
+                                  {
+                                    "max": undefined,
+                                    "min": undefined,
+                                    "now": undefined,
+                                    "text": undefined,
+                                  }
+                                }
+                                accessible={true}
+                                focusable={false}
+                                onClick={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": "100%",
+                                  }
+                                }
+                              >
+                                <TextInput
+                                  animatedProps={
+                                    {
+                                      "text": "00:00",
+                                    }
+                                  }
+                                  defaultValue="00:00"
+                                  editable={false}
+                                  style={
+                                    [
                                       {
-                                        "transform": [
-                                          {
-                                            "translateX": -6,
-                                          },
-                                          {
-                                            "scale": 1,
-                                          },
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 14,
+                                        "fontVariant": [
+                                          "tabular-nums",
                                         ],
+                                        "fontWeight": "400",
+                                        "marginHorizontal": 12,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
                                       },
                                     ]
                                   }
                                 />
+                                <View
+                                  onLayout={[Function]}
+                                  style={
+                                    {
+                                      "flex": 1,
+                                      "height": "100%",
+                                      "justifyContent": "center",
+                                      "marginRight": 12,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      [
+                                        {
+                                          "borderRadius": 2,
+                                          "height": 4,
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "backgroundColor": "#CBCED1",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        [
+                                          {
+                                            "borderRadius": 2,
+                                            "height": 4,
+                                            "width": "100%",
+                                          },
+                                          {
+                                            "width": 0,
+                                          },
+                                          {
+                                            "backgroundColor": "#156FF5",
+                                          },
+                                        ]
+                                      }
+                                    />
+                                  </View>
+                                  <View
+                                    collapsable={false}
+                                    enabled={false}
+                                    handlerTag={489}
+                                    handlerType="PanGestureHandler"
+                                    hitSlop={
+                                      {
+                                        "bottom": 12,
+                                        "left": 8,
+                                        "right": 8,
+                                        "top": 12,
+                                      }
+                                    }
+                                    onGestureHandlerEvent={[Function]}
+                                    onGestureHandlerStateChange={[Function]}
+                                    style={
+                                      [
+                                        {
+                                          "borderRadius": 6,
+                                          "height": 12,
+                                          "position": "absolute",
+                                          "width": 12,
+                                        },
+                                        {
+                                          "backgroundColor": "#D1EBFE",
+                                        },
+                                        {
+                                          "transform": [
+                                            {
+                                              "translateX": -6,
+                                            },
+                                            {
+                                              "scale": 1,
+                                            },
+                                          ],
+                                        },
+                                      ]
+                                    }
+                                  />
+                                </View>
                               </View>
                             </View>
                           </View>
@@ -125927,16 +141859,16 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -125994,512 +141926,581 @@ exports[`Story Snapshots: WithFile should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9k:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9k:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={490}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={491}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        style={
-                          {
-                            "gap": 4,
-                          }
-                        }
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 4,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
+                          />
                           <View
-                            accessibilityState={
+                            style={
                               {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
                               }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "gap": 4,
                             }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
+                          }
+                        >
+                          <View
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-File.pdf"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-File.pdf"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
-                                    }
-                                  }
-                                />
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  />
+                                  <View
+                                    style={
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
-                                        accessibilityLabel="File.pdf"
                                         style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
                                         }
                                       >
-                                        File.pdf
+                                        <Text
+                                          accessibilityLabel="File.pdf"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          File.pdf
+                                        </Text>
                                       </Text>
                                     </Text>
-                                  </Text>
+                                  </View>
                                 </View>
                               </View>
                             </View>
-                          </View>
-                          <View
-                            style={
-                              {
-                                "gap": 2,
-                              }
-                            }
-                          >
-                            <Text
+                            <View
                               style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
+                                {
+                                  "gap": 2,
+                                }
                               }
                             >
                               <Text
                                 style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                  ]
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="This is a description "
                                   style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
                                   }
                                 >
-                                  This is a description 
-                                </Text>
-                                <View
-                                  style={
-                                    [
+                                  <Text
+                                    accessibilityLabel="This is a description "
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    This is a description 
+                                  </Text>
+                                  <View
+                                    style={
                                       {
                                         "transform": [
                                           {
                                             "translateY": 3,
                                           },
                                         ],
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <ViewManagerAdapter_ExpoImage
-                                    containerViewRef={"[React.ref]"}
-                                    contentFit="contain"
-                                    contentPosition={
-                                      {
-                                        "left": "50%",
-                                        "top": "50%",
                                       }
                                     }
-                                    height={15}
-                                    nativeViewRef={"[React.ref]"}
-                                    onError={[Function]}
-                                    onLoad={[Function]}
-                                    onLoadStart={[Function]}
-                                    onProgress={[Function]}
-                                    placeholder={[]}
-                                    source={
-                                      [
+                                  >
+                                    <ViewManagerAdapter_ExpoImage
+                                      containerViewRef={"[React.ref]"}
+                                      contentFit="contain"
+                                      contentPosition={
                                         {
-                                          "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                        },
-                                      ]
-                                    }
-                                    style={
-                                      {
-                                        "height": 15,
-                                        "width": 15,
+                                          "left": "50%",
+                                          "top": "50%",
+                                        }
                                       }
-                                    }
-                                    transition={null}
-                                    width={15}
-                                  />
-                                </View>
+                                      height={15}
+                                      nativeViewRef={"[React.ref]"}
+                                      onError={[Function]}
+                                      onLoad={[Function]}
+                                      onLoadStart={[Function]}
+                                      onProgress={[Function]}
+                                      placeholder={[]}
+                                      source={
+                                        [
+                                          {
+                                            "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                          },
+                                        ]
+                                      }
+                                      style={
+                                        {
+                                          "height": 15,
+                                          "width": 15,
+                                        }
+                                      }
+                                      transition={null}
+                                      width={15}
+                                    />
+                                  </View>
+                                </Text>
                               </Text>
-                            </Text>
+                            </View>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -126544,67 +142545,73 @@ exports[`Story Snapshots: WithFile should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9l:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9l:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
@@ -126623,489 +142630,503 @@ exports[`Story Snapshots: WithFile should match snapshot 1`] = `
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-File.pdf"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-File.pdf"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
-                                    }
-                                  }
-                                />
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  />
+                                  <View
+                                    style={
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
-                                        accessibilityLabel="File.pdf"
                                         style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
                                         }
                                       >
-                                        File.pdf
+                                        <Text
+                                          accessibilityLabel="File.pdf"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          File.pdf
+                                        </Text>
                                       </Text>
                                     </Text>
-                                  </Text>
-                                </View>
-                              </View>
-                            </View>
-                          </View>
-                          <View
-                            style={
-                              {
-                                "gap": 2,
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "gap": 2,
+                                }
                               }
                             >
                               <Text
                                 style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                  ]
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="This is a description "
                                   style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
                                   }
                                 >
-                                  This is a description 
-                                </Text>
-                                <View
-                                  style={
-                                    [
+                                  <Text
+                                    accessibilityLabel="This is a description "
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    This is a description 
+                                  </Text>
+                                  <View
+                                    style={
                                       {
                                         "transform": [
                                           {
                                             "translateY": 3,
                                           },
                                         ],
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <ViewManagerAdapter_ExpoImage
-                                    containerViewRef={"[React.ref]"}
-                                    contentFit="contain"
-                                    contentPosition={
-                                      {
-                                        "left": "50%",
-                                        "top": "50%",
                                       }
                                     }
-                                    height={15}
-                                    nativeViewRef={"[React.ref]"}
-                                    onError={[Function]}
-                                    onLoad={[Function]}
-                                    onLoadStart={[Function]}
-                                    onProgress={[Function]}
-                                    placeholder={[]}
-                                    source={
-                                      [
+                                  >
+                                    <ViewManagerAdapter_ExpoImage
+                                      containerViewRef={"[React.ref]"}
+                                      contentFit="contain"
+                                      contentPosition={
                                         {
-                                          "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                        },
-                                      ]
-                                    }
-                                    style={
-                                      {
-                                        "height": 15,
-                                        "width": 15,
+                                          "left": "50%",
+                                          "top": "50%",
+                                        }
                                       }
-                                    }
-                                    transition={null}
-                                    width={15}
-                                  />
-                                </View>
+                                      height={15}
+                                      nativeViewRef={"[React.ref]"}
+                                      onError={[Function]}
+                                      onLoad={[Function]}
+                                      onLoadStart={[Function]}
+                                      onProgress={[Function]}
+                                      placeholder={[]}
+                                      source={
+                                        [
+                                          {
+                                            "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                          },
+                                        ]
+                                      }
+                                      style={
+                                        {
+                                          "height": 15,
+                                          "width": 15,
+                                        }
+                                      }
+                                      transition={null}
+                                      width={15}
+                                    />
+                                  </View>
+                                </Text>
                               </Text>
-                            </Text>
+                            </View>
                           </View>
-                        </View>
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
-                        >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-File.pdf"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-File.pdf"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
-                                    }
-                                  }
-                                />
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  />
+                                  <View
+                                    style={
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
-                                        accessibilityLabel="File.pdf"
                                         style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
                                         }
                                       >
-                                        File.pdf
+                                        <Text
+                                          accessibilityLabel="File.pdf"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          File.pdf
+                                        </Text>
                                       </Text>
                                     </Text>
-                                  </Text>
+                                  </View>
                                 </View>
                               </View>
                             </View>
-                          </View>
-                          <View
-                            style={
-                              {
-                                "gap": 2,
-                              }
-                            }
-                          >
-                            <Text
+                            <View
                               style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
+                                {
+                                  "gap": 2,
+                                }
                               }
                             >
                               <Text
                                 style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                  ]
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="This is a description "
                                   style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
                                   }
                                 >
-                                  This is a description 
-                                </Text>
-                                <View
-                                  style={
-                                    [
+                                  <Text
+                                    accessibilityLabel="This is a description "
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    This is a description 
+                                  </Text>
+                                  <View
+                                    style={
                                       {
                                         "transform": [
                                           {
                                             "translateY": 3,
                                           },
                                         ],
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <ViewManagerAdapter_ExpoImage
-                                    containerViewRef={"[React.ref]"}
-                                    contentFit="contain"
-                                    contentPosition={
-                                      {
-                                        "left": "50%",
-                                        "top": "50%",
                                       }
                                     }
-                                    height={15}
-                                    nativeViewRef={"[React.ref]"}
-                                    onError={[Function]}
-                                    onLoad={[Function]}
-                                    onLoadStart={[Function]}
-                                    onProgress={[Function]}
-                                    placeholder={[]}
-                                    source={
-                                      [
+                                  >
+                                    <ViewManagerAdapter_ExpoImage
+                                      containerViewRef={"[React.ref]"}
+                                      contentFit="contain"
+                                      contentPosition={
                                         {
-                                          "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                        },
-                                      ]
-                                    }
-                                    style={
-                                      {
-                                        "height": 15,
-                                        "width": 15,
+                                          "left": "50%",
+                                          "top": "50%",
+                                        }
                                       }
-                                    }
-                                    transition={null}
-                                    width={15}
-                                  />
-                                </View>
+                                      height={15}
+                                      nativeViewRef={"[React.ref]"}
+                                      onError={[Function]}
+                                      onLoad={[Function]}
+                                      onLoadStart={[Function]}
+                                      onProgress={[Function]}
+                                      placeholder={[]}
+                                      source={
+                                        [
+                                          {
+                                            "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                          },
+                                        ]
+                                      }
+                                      style={
+                                        {
+                                          "height": 15,
+                                          "width": 15,
+                                        }
+                                      }
+                                      transition={null}
+                                      width={15}
+                                    />
+                                  </View>
+                                </Text>
                               </Text>
-                            </Text>
+                            </View>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -127163,260 +143184,318 @@ exports[`Story Snapshots: WithFileLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9m:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9m:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={492}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={493}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -127432,243 +143511,254 @@ exports[`Story Snapshots: WithFileLargeFont should match snapshot 1`] = `
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-File.pdf"
                           >
                             <View
-                              style={
+                              accessibilityState={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-File.pdf"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
-                                    }
-                                  }
-                                />
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  />
+                                  <View
+                                    style={
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
-                                        accessibilityLabel="File.pdf"
                                         style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
                                         }
                                       >
-                                        File.pdf
+                                        <Text
+                                          accessibilityLabel="File.pdf"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          File.pdf
+                                        </Text>
                                       </Text>
                                     </Text>
-                                  </Text>
+                                  </View>
                                 </View>
                               </View>
                             </View>
-                          </View>
-                          <View
-                            style={
-                              {
-                                "gap": 2,
-                              }
-                            }
-                          >
-                            <Text
+                            <View
                               style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
+                                {
+                                  "gap": 2,
+                                }
                               }
                             >
                               <Text
                                 style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                  ]
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="This is a description "
                                   style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
                                   }
                                 >
-                                  This is a description 
-                                </Text>
-                                <View
-                                  style={
-                                    [
+                                  <Text
+                                    accessibilityLabel="This is a description "
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    This is a description 
+                                  </Text>
+                                  <View
+                                    style={
                                       {
                                         "transform": [
                                           {
                                             "translateY": 3,
                                           },
                                         ],
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <ViewManagerAdapter_ExpoImage
-                                    containerViewRef={"[React.ref]"}
-                                    contentFit="contain"
-                                    contentPosition={
-                                      {
-                                        "left": "50%",
-                                        "top": "50%",
                                       }
                                     }
-                                    height={15}
-                                    nativeViewRef={"[React.ref]"}
-                                    onError={[Function]}
-                                    onLoad={[Function]}
-                                    onLoadStart={[Function]}
-                                    onProgress={[Function]}
-                                    placeholder={[]}
-                                    source={
-                                      [
+                                  >
+                                    <ViewManagerAdapter_ExpoImage
+                                      containerViewRef={"[React.ref]"}
+                                      contentFit="contain"
+                                      contentPosition={
                                         {
-                                          "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                        },
-                                      ]
-                                    }
-                                    style={
-                                      {
-                                        "height": 15,
-                                        "width": 15,
+                                          "left": "50%",
+                                          "top": "50%",
+                                        }
                                       }
-                                    }
-                                    transition={null}
-                                    width={15}
-                                  />
-                                </View>
+                                      height={15}
+                                      nativeViewRef={"[React.ref]"}
+                                      onError={[Function]}
+                                      onLoad={[Function]}
+                                      onLoadStart={[Function]}
+                                      onProgress={[Function]}
+                                      placeholder={[]}
+                                      source={
+                                        [
+                                          {
+                                            "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                          },
+                                        ]
+                                      }
+                                      style={
+                                        {
+                                          "height": 15,
+                                          "width": 15,
+                                        }
+                                      }
+                                      transition={null}
+                                      width={15}
+                                    />
+                                  </View>
+                                </Text>
                               </Text>
-                            </Text>
+                            </View>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -127713,67 +143803,73 @@ exports[`Story Snapshots: WithFileLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9n:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9n:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
@@ -127792,250 +143888,261 @@ exports[`Story Snapshots: WithFileLargeFont should match snapshot 1`] = `
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": false,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "borderColor": "#CBCED1",
-                                "borderLeftWidth": 2,
-                                "flex": 1,
-                                "flexDirection": "row",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
-                            testID="reply-undefined-File.pdf"
                           >
                             <View
-                              style={
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": false,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
                                 {
-                                  "borderRadius": 4,
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "paddingLeft": 8,
-                                  "paddingVertical": 4,
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
                                 }
                               }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "alignSelf": "flex-start",
+                                    "borderLeftWidth": 2,
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                  },
+                                  {
+                                    "borderColor": "#CBCED1",
+                                  },
+                                ]
+                              }
+                              testID="reply-undefined-File.pdf"
                             >
                               <View
                                 style={
                                   {
+                                    "borderRadius": 4,
                                     "flex": 1,
-                                    "flexDirection": "column",
-                                    "gap": 4,
-                                    "width": 200,
+                                    "flexDirection": "row",
+                                    "paddingLeft": 8,
+                                    "paddingVertical": 4,
                                   }
                                 }
                               >
                                 <View
                                   style={
                                     {
-                                      "alignItems": "center",
                                       "flex": 1,
-                                      "flexDirection": "row",
+                                      "flexDirection": "column",
                                       "gap": 4,
-                                    }
-                                  }
-                                />
-                                <View
-                                  style={
-                                    {
-                                      "gap": 2,
+                                      "width": 200,
                                     }
                                   }
                                 >
-                                  <Text
+                                  <View
                                     style={
-                                      [
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "fontFamily": "Inter",
-                                          "fontSize": 16,
-                                          "fontWeight": "400",
-                                          "lineHeight": 22,
-                                          "textAlign": "left",
-                                        },
-                                        {
-                                          "color": "#2F343D",
-                                        },
-                                      ]
+                                      {
+                                        "alignItems": "center",
+                                        "flex": 1,
+                                        "flexDirection": "row",
+                                        "gap": 4,
+                                      }
+                                    }
+                                  />
+                                  <View
+                                    style={
+                                      {
+                                        "gap": 2,
+                                      }
                                     }
                                   >
                                     <Text
                                       style={
-                                        {
-                                          "backgroundColor": "transparent",
-                                          "flexShrink": 1,
-                                          "fontFamily": "Inter",
-                                          "fontWeight": "400",
-                                          "textAlign": "left",
-                                        }
+                                        [
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "fontFamily": "Inter",
+                                            "fontSize": 16,
+                                            "fontWeight": "400",
+                                            "lineHeight": 22,
+                                            "textAlign": "left",
+                                          },
+                                          {
+                                            "color": "#2F343D",
+                                          },
+                                        ]
                                       }
                                     >
                                       <Text
-                                        accessibilityLabel="File.pdf"
                                         style={
-                                          [
-                                            {
-                                              "flexShrink": 1,
-                                              "fontSize": 16,
-                                              "lineHeight": 22,
-                                            },
-                                            {
-                                              "color": "#2F343D",
-                                            },
-                                          ]
+                                          {
+                                            "backgroundColor": "transparent",
+                                            "flexShrink": 1,
+                                            "fontFamily": "Inter",
+                                            "fontWeight": "400",
+                                            "textAlign": "left",
+                                          }
                                         }
                                       >
-                                        File.pdf
+                                        <Text
+                                          accessibilityLabel="File.pdf"
+                                          style={
+                                            [
+                                              {
+                                                "flexShrink": 1,
+                                                "fontSize": 16,
+                                                "lineHeight": 22,
+                                              },
+                                              {
+                                                "color": "#2F343D",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          File.pdf
+                                        </Text>
                                       </Text>
                                     </Text>
-                                  </Text>
+                                  </View>
                                 </View>
                               </View>
                             </View>
-                          </View>
-                          <View
-                            style={
-                              {
-                                "gap": 2,
-                              }
-                            }
-                          >
-                            <Text
+                            <View
                               style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
+                                {
+                                  "gap": 2,
+                                }
                               }
                             >
                               <Text
                                 style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                  ]
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="This is a description "
                                   style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
                                   }
                                 >
-                                  This is a description 
-                                </Text>
-                                <View
-                                  style={
-                                    [
+                                  <Text
+                                    accessibilityLabel="This is a description "
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    This is a description 
+                                  </Text>
+                                  <View
+                                    style={
                                       {
                                         "transform": [
                                           {
                                             "translateY": 3,
                                           },
                                         ],
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <ViewManagerAdapter_ExpoImage
-                                    containerViewRef={"[React.ref]"}
-                                    contentFit="contain"
-                                    contentPosition={
-                                      {
-                                        "left": "50%",
-                                        "top": "50%",
                                       }
                                     }
-                                    height={15}
-                                    nativeViewRef={"[React.ref]"}
-                                    onError={[Function]}
-                                    onLoad={[Function]}
-                                    onLoadStart={[Function]}
-                                    onProgress={[Function]}
-                                    placeholder={[]}
-                                    source={
-                                      [
+                                  >
+                                    <ViewManagerAdapter_ExpoImage
+                                      containerViewRef={"[React.ref]"}
+                                      contentFit="contain"
+                                      contentPosition={
                                         {
-                                          "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                        },
-                                      ]
-                                    }
-                                    style={
-                                      {
-                                        "height": 15,
-                                        "width": 15,
+                                          "left": "50%",
+                                          "top": "50%",
+                                        }
                                       }
-                                    }
-                                    transition={null}
-                                    width={15}
-                                  />
-                                </View>
+                                      height={15}
+                                      nativeViewRef={"[React.ref]"}
+                                      onError={[Function]}
+                                      onLoad={[Function]}
+                                      onLoadStart={[Function]}
+                                      onProgress={[Function]}
+                                      placeholder={[]}
+                                      source={
+                                        [
+                                          {
+                                            "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                          },
+                                        ]
+                                      }
+                                      style={
+                                        {
+                                          "height": 15,
+                                          "width": 15,
+                                        }
+                                      }
+                                      transition={null}
+                                      width={15}
+                                    />
+                                  </View>
+                                </Text>
                               </Text>
-                            </Text>
+                            </View>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -128093,440 +144200,485 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9o:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9o:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={494}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={495}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        style={
-                          {
-                            "gap": 4,
-                          }
-                        }
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 4,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
+                          />
                           <View
                             style={
                               {
-                                "gap": 2,
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
                           >
                             <Text
+                              numberOfLines={1}
                               style={
                                 [
                                   {
                                     "backgroundColor": "transparent",
+                                    "flexShrink": 1,
                                     "fontFamily": "Inter",
                                     "fontSize": 16,
-                                    "fontWeight": "400",
+                                    "fontWeight": "600",
                                     "lineHeight": 22,
                                     "textAlign": "left",
                                   },
                                   {
-                                    "color": "#2F343D",
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
                                   },
                                 ]
                               }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
+                      </View>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "gap": 4,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "gap": 2,
+                                }
+                              }
                             >
                               <Text
                                 style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                  ]
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="This is a description "
                                   style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
                                   }
                                 >
-                                  This is a description 
-                                </Text>
-                                <View
-                                  style={
-                                    [
+                                  <Text
+                                    accessibilityLabel="This is a description "
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    This is a description 
+                                  </Text>
+                                  <View
+                                    style={
                                       {
                                         "transform": [
                                           {
                                             "translateY": 3,
                                           },
                                         ],
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <ViewManagerAdapter_ExpoImage
-                                    containerViewRef={"[React.ref]"}
-                                    contentFit="contain"
-                                    contentPosition={
-                                      {
-                                        "left": "50%",
-                                        "top": "50%",
                                       }
                                     }
-                                    height={15}
-                                    nativeViewRef={"[React.ref]"}
-                                    onError={[Function]}
-                                    onLoad={[Function]}
-                                    onLoadStart={[Function]}
-                                    onProgress={[Function]}
-                                    placeholder={[]}
-                                    source={
-                                      [
+                                  >
+                                    <ViewManagerAdapter_ExpoImage
+                                      containerViewRef={"[React.ref]"}
+                                      contentFit="contain"
+                                      contentPosition={
                                         {
-                                          "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                        },
-                                      ]
-                                    }
-                                    style={
-                                      {
-                                        "height": 15,
-                                        "width": 15,
+                                          "left": "50%",
+                                          "top": "50%",
+                                        }
                                       }
-                                    }
-                                    transition={null}
-                                    width={15}
-                                  />
-                                </View>
+                                      height={15}
+                                      nativeViewRef={"[React.ref]"}
+                                      onError={[Function]}
+                                      onLoad={[Function]}
+                                      onLoadStart={[Function]}
+                                      onProgress={[Function]}
+                                      placeholder={[]}
+                                      source={
+                                        [
+                                          {
+                                            "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                          },
+                                        ]
+                                      }
+                                      style={
+                                        {
+                                          "height": 15,
+                                          "width": 15,
+                                        }
+                                      }
+                                      transition={null}
+                                      width={15}
+                                    />
+                                  </View>
+                                </Text>
                               </Text>
-                            </Text>
-                          </View>
-                          <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": undefined,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
+                            </View>
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": undefined,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
                               }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "borderRadius": 4,
-                                "flexDirection": "column",
-                                "opacity": 1,
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
                               }
-                            }
-                          >
-                            <View
-                              onLayout={[Function]}
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
                               style={
                                 {
-                                  "flex": 1,
+                                  "borderRadius": 4,
+                                  "flexDirection": "column",
                                 }
                               }
                             >
                               <View
+                                onLayout={[Function]}
                                 style={
-                                  [
-                                    {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
-                                    },
-                                    {
-                                      "borderColor": "#CBCED1",
-                                      "borderRadius": 4,
-                                      "borderWidth": 1,
-                                      "overflow": "hidden",
-                                    },
-                                  ]
+                                  {
+                                    "flex": 1,
+                                  }
                                 }
-                              />
-                              <View
-                                style={
-                                  [
+                              >
+                                <View
+                                  style={
                                     [
                                       {
                                         "borderRadius": 4,
@@ -128540,84 +144692,104 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                                         "borderWidth": 1,
                                         "overflow": "hidden",
                                       },
-                                    ],
-                                    {
-                                      "borderWidth": 0,
-                                      "bottom": 0,
-                                      "left": 0,
-                                      "position": "absolute",
-                                      "right": 0,
-                                      "top": 0,
-                                    },
-                                    {
-                                      "backgroundColor": "#E4E7EA",
-                                    },
-                                  ]
-                                }
-                              />
-                              <View
-                                style={
-                                  [
+                                    ]
+                                  }
+                                />
+                                <View
+                                  style={
                                     [
+                                      [
+                                        {
+                                          "borderRadius": 4,
+                                          "minHeight": 200,
+                                          "overflow": "hidden",
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "borderColor": "#CBCED1",
+                                          "borderRadius": 4,
+                                          "borderWidth": 1,
+                                          "overflow": "hidden",
+                                        },
+                                      ],
                                       {
-                                        "borderRadius": 4,
-                                        "minHeight": 200,
-                                        "overflow": "hidden",
-                                        "width": "100%",
+                                        "borderWidth": 0,
+                                        "bottom": 0,
+                                        "left": 0,
+                                        "position": "absolute",
+                                        "right": 0,
+                                        "top": 0,
                                       },
                                       {
-                                        "borderColor": "#CBCED1",
-                                        "borderRadius": 4,
-                                        "borderWidth": 1,
-                                        "overflow": "hidden",
+                                        "backgroundColor": "#E4E7EA",
                                       },
-                                    ],
-                                    {
-                                      "alignItems": "center",
-                                      "justifyContent": "center",
-                                      "position": "absolute",
-                                    },
-                                  ]
-                                }
-                              >
-                                <Text
-                                  allowFontScaling={false}
-                                  selectable={false}
+                                    ]
+                                  }
+                                />
+                                <View
                                   style={
                                     [
-                                      {
-                                        "color": "#2F343D",
-                                        "fontSize": 54,
-                                      },
                                       [
                                         {
-                                          "lineHeight": 54,
+                                          "borderRadius": 4,
+                                          "minHeight": 200,
+                                          "overflow": "hidden",
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "borderColor": "#CBCED1",
+                                          "borderRadius": 4,
+                                          "borderWidth": 1,
+                                          "overflow": "hidden",
                                         },
-                                        undefined,
                                       ],
                                       {
-                                        "fontFamily": "custom",
-                                        "fontStyle": "normal",
-                                        "fontWeight": "normal",
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "position": "absolute",
                                       },
-                                      {},
                                     ]
                                   }
                                 >
-                                  
-                                </Text>
-                              </View>
-                              <View
-                                style={
-                                  {
-                                    "bottom": 8,
-                                    "flexDirection": "row",
-                                    "gap": 8,
-                                    "position": "absolute",
-                                    "right": 8,
+                                  <Text
+                                    allowFontScaling={false}
+                                    selectable={false}
+                                    style={
+                                      [
+                                        {
+                                          "color": "#2F343D",
+                                          "fontSize": 54,
+                                        },
+                                        [
+                                          {
+                                            "lineHeight": 54,
+                                          },
+                                          undefined,
+                                        ],
+                                        {
+                                          "fontFamily": "custom",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "normal",
+                                        },
+                                        {},
+                                      ]
+                                    }
+                                  >
+                                    
+                                  </Text>
+                                </View>
+                                <View
+                                  style={
+                                    {
+                                      "bottom": 8,
+                                      "flexDirection": "row",
+                                      "gap": 8,
+                                      "position": "absolute",
+                                      "right": 8,
+                                    }
                                   }
-                                }
-                              />
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -128625,8 +144797,8 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -128671,318 +144843,317 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message, not description.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message, not description"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9p:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message, not description.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message, not description"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9p:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
-                      }
-                    >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
-                          [
-                            {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
-                            },
-                          ]
-                        }
-                        style={
+                        [
                           {
                             "borderRadius": 4,
                             "height": 36,
                             "width": 36,
-                          }
-                        }
-                        transition={null}
-                        width={36}
-                      />
-                    </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
-                  <View
-                    onLayout={[Function]}
-                    style={
-                      {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        {
-                          "alignItems": "center",
-                          "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
-                        }
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
                         collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={496}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
                         style={
-                          {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
-                          }
+                          [
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
+                            },
+                          ]
                         }
-                        testID="username-header-diego.mello"
+                        underlayColor="#E4E7EA"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <View
+                          collapsable={false}
                           style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#1F2329",
-                              },
-                            ]
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
+                  </View>
+                  <View
+                    style={
+                      {
+                        "flex": 1,
+                        "marginLeft": 10,
+                      }
+                    }
+                  >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-Message, not description"
+                        style={
+                          {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                          }
+                        }
                       >
-                        <View
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={497}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
-                            {
-                              "gap": 2,
-                            }
+                            [
+                              {
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
+                              },
+                              {
+                                "cursor": undefined,
+                              },
+                            ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          <Text
+                          <View
+                            collapsable={false}
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
                           >
                             <Text
+                              numberOfLines={1}
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
                               }
                             >
-                              <Text
-                                accessibilityLabel="Message, not description"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Message, not description
-                              </Text>
+                              diego.mello
                             </Text>
-                          </Text>
-                        </View>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
                       <View
                         style={
@@ -128992,11 +145163,7 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                         }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
+                          testID="message-content-Message, not description"
                         >
                           <View
                             style={
@@ -129034,7 +145201,7 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="This is a description "
+                                  accessibilityLabel="Message, not description"
                                   style={
                                     [
                                       {
@@ -129048,122 +145215,172 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                                     ]
                                   }
                                 >
-                                  This is a description 
+                                  Message, not description
                                 </Text>
-                                <View
-                                  style={
-                                    [
-                                      {
-                                        "transform": [
-                                          {
-                                            "translateY": 3,
-                                          },
-                                        ],
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <ViewManagerAdapter_ExpoImage
-                                    containerViewRef={"[React.ref]"}
-                                    contentFit="contain"
-                                    contentPosition={
-                                      {
-                                        "left": "50%",
-                                        "top": "50%",
-                                      }
-                                    }
-                                    height={15}
-                                    nativeViewRef={"[React.ref]"}
-                                    onError={[Function]}
-                                    onLoad={[Function]}
-                                    onLoadStart={[Function]}
-                                    onProgress={[Function]}
-                                    placeholder={[]}
-                                    source={
-                                      [
-                                        {
-                                          "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                        },
-                                      ]
-                                    }
-                                    style={
-                                      {
-                                        "height": 15,
-                                        "width": 15,
-                                      }
-                                    }
-                                    transition={null}
-                                    width={15}
-                                  />
-                                </View>
                               </Text>
                             </Text>
                           </View>
-                          <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": undefined,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
+                        </View>
+                        <View
+                          style={
+                            {
+                              "gap": 4,
                             }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
+                          }
+                        >
+                          <View
                             style={
                               {
-                                "borderRadius": 4,
-                                "flexDirection": "column",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
                           >
                             <View
-                              onLayout={[Function]}
                               style={
                                 {
-                                  "flex": 1,
+                                  "gap": 2,
                                 }
                               }
                             >
-                              <View
+                              <Text
                                 style={
                                   [
                                     {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
                                     },
                                     {
-                                      "borderColor": "#CBCED1",
-                                      "borderRadius": 4,
-                                      "borderWidth": 1,
-                                      "overflow": "hidden",
+                                      "color": "#2F343D",
                                     },
                                   ]
                                 }
-                              />
+                              >
+                                <Text
+                                  style={
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    accessibilityLabel="This is a description "
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    This is a description 
+                                  </Text>
+                                  <View
+                                    style={
+                                      {
+                                        "transform": [
+                                          {
+                                            "translateY": 3,
+                                          },
+                                        ],
+                                      }
+                                    }
+                                  >
+                                    <ViewManagerAdapter_ExpoImage
+                                      containerViewRef={"[React.ref]"}
+                                      contentFit="contain"
+                                      contentPosition={
+                                        {
+                                          "left": "50%",
+                                          "top": "50%",
+                                        }
+                                      }
+                                      height={15}
+                                      nativeViewRef={"[React.ref]"}
+                                      onError={[Function]}
+                                      onLoad={[Function]}
+                                      onLoadStart={[Function]}
+                                      onProgress={[Function]}
+                                      placeholder={[]}
+                                      source={
+                                        [
+                                          {
+                                            "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                          },
+                                        ]
+                                      }
+                                      style={
+                                        {
+                                          "height": 15,
+                                          "width": 15,
+                                        }
+                                      }
+                                      transition={null}
+                                      width={15}
+                                    />
+                                  </View>
+                                </Text>
+                              </Text>
+                            </View>
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": undefined,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "flexDirection": "column",
+                                }
+                              }
+                            >
                               <View
+                                onLayout={[Function]}
                                 style={
-                                  [
+                                  {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
                                     [
                                       {
                                         "borderRadius": 4,
@@ -129177,194 +145394,371 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                                         "borderWidth": 1,
                                         "overflow": "hidden",
                                       },
-                                    ],
-                                    {
-                                      "borderWidth": 0,
-                                      "bottom": 0,
-                                      "left": 0,
-                                      "position": "absolute",
-                                      "right": 0,
-                                      "top": 0,
-                                    },
-                                    {
-                                      "backgroundColor": "#E4E7EA",
-                                    },
-                                  ]
-                                }
-                              />
-                              <View
-                                style={
-                                  [
+                                    ]
+                                  }
+                                />
+                                <View
+                                  style={
                                     [
+                                      [
+                                        {
+                                          "borderRadius": 4,
+                                          "minHeight": 200,
+                                          "overflow": "hidden",
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "borderColor": "#CBCED1",
+                                          "borderRadius": 4,
+                                          "borderWidth": 1,
+                                          "overflow": "hidden",
+                                        },
+                                      ],
                                       {
-                                        "borderRadius": 4,
-                                        "minHeight": 200,
-                                        "overflow": "hidden",
-                                        "width": "100%",
+                                        "borderWidth": 0,
+                                        "bottom": 0,
+                                        "left": 0,
+                                        "position": "absolute",
+                                        "right": 0,
+                                        "top": 0,
                                       },
                                       {
-                                        "borderColor": "#CBCED1",
-                                        "borderRadius": 4,
-                                        "borderWidth": 1,
-                                        "overflow": "hidden",
+                                        "backgroundColor": "#E4E7EA",
                                       },
-                                    ],
-                                    {
-                                      "alignItems": "center",
-                                      "justifyContent": "center",
-                                      "position": "absolute",
-                                    },
-                                  ]
-                                }
-                              >
-                                <Text
-                                  allowFontScaling={false}
-                                  selectable={false}
+                                    ]
+                                  }
+                                />
+                                <View
                                   style={
                                     [
-                                      {
-                                        "color": "#2F343D",
-                                        "fontSize": 54,
-                                      },
                                       [
                                         {
-                                          "lineHeight": 54,
+                                          "borderRadius": 4,
+                                          "minHeight": 200,
+                                          "overflow": "hidden",
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "borderColor": "#CBCED1",
+                                          "borderRadius": 4,
+                                          "borderWidth": 1,
+                                          "overflow": "hidden",
                                         },
-                                        undefined,
                                       ],
                                       {
-                                        "fontFamily": "custom",
-                                        "fontStyle": "normal",
-                                        "fontWeight": "normal",
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "position": "absolute",
                                       },
-                                      {},
                                     ]
                                   }
                                 >
-                                  
-                                </Text>
+                                  <Text
+                                    allowFontScaling={false}
+                                    selectable={false}
+                                    style={
+                                      [
+                                        {
+                                          "color": "#2F343D",
+                                          "fontSize": 54,
+                                        },
+                                        [
+                                          {
+                                            "lineHeight": 54,
+                                          },
+                                          undefined,
+                                        ],
+                                        {
+                                          "fontFamily": "custom",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "normal",
+                                        },
+                                        {},
+                                      ]
+                                    }
+                                  >
+                                    
+                                  </Text>
+                                </View>
+                                <View
+                                  style={
+                                    {
+                                      "bottom": 8,
+                                      "flexDirection": "row",
+                                      "gap": 8,
+                                      "position": "absolute",
+                                      "right": 8,
+                                    }
+                                  }
+                                />
                               </View>
-                              <View
+                            </View>
+                          </View>
+                          <View
+                            style={
+                              {
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "gap": 2,
+                                }
+                              }
+                            >
+                              <Text
                                 style={
-                                  {
-                                    "bottom": 8,
-                                    "flexDirection": "row",
-                                    "gap": 8,
-                                    "position": "absolute",
-                                    "right": 8,
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  style={
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
                                   }
+                                >
+                                  <Text
+                                    accessibilityLabel="This is a description "
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    This is a description 
+                                  </Text>
+                                  <View
+                                    style={
+                                      {
+                                        "transform": [
+                                          {
+                                            "translateY": 3,
+                                          },
+                                        ],
+                                      }
+                                    }
+                                  >
+                                    <ViewManagerAdapter_ExpoImage
+                                      containerViewRef={"[React.ref]"}
+                                      contentFit="contain"
+                                      contentPosition={
+                                        {
+                                          "left": "50%",
+                                          "top": "50%",
+                                        }
+                                      }
+                                      height={15}
+                                      nativeViewRef={"[React.ref]"}
+                                      onError={[Function]}
+                                      onLoad={[Function]}
+                                      onLoadStart={[Function]}
+                                      onProgress={[Function]}
+                                      placeholder={[]}
+                                      source={
+                                        [
+                                          {
+                                            "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                          },
+                                        ]
+                                      }
+                                      style={
+                                        {
+                                          "height": 15,
+                                          "width": 15,
+                                        }
+                                      }
+                                      transition={null}
+                                      width={15}
+                                    />
+                                  </View>
+                                </Text>
+                              </Text>
+                            </View>
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": undefined,
+                                  "expanded": undefined,
+                                  "selected": undefined,
                                 }
-                              />
-                            </View>
-                          </View>
-                        </View>
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
-                        >
-                          <View
-                            style={
-                              {
-                                "gap": 2,
                               }
-                            }
-                          >
-                            <Text
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
                               style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
+                                {
+                                  "borderRadius": 4,
+                                  "flexDirection": "column",
+                                }
                               }
                             >
-                              <Text
+                              <View
+                                onLayout={[Function]}
                                 style={
                                   {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
+                                    "flex": 1,
                                   }
                                 }
                               >
-                                <Text
-                                  accessibilityLabel="This is a description "
+                                <View
                                   style={
                                     [
                                       {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
                                       },
                                       {
-                                        "color": "#2F343D",
+                                        "borderColor": "#CBCED1",
+                                        "borderRadius": 4,
+                                        "borderWidth": 1,
+                                        "overflow": "hidden",
                                       },
                                     ]
                                   }
-                                >
-                                  This is a description 
-                                </Text>
+                                />
                                 <View
                                   style={
                                     [
+                                      [
+                                        {
+                                          "borderRadius": 4,
+                                          "minHeight": 200,
+                                          "overflow": "hidden",
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "borderColor": "#CBCED1",
+                                          "borderRadius": 4,
+                                          "borderWidth": 1,
+                                          "overflow": "hidden",
+                                        },
+                                      ],
                                       {
-                                        "transform": [
-                                          {
-                                            "translateY": 3,
-                                          },
-                                        ],
+                                        "borderWidth": 0,
+                                        "bottom": 0,
+                                        "left": 0,
+                                        "position": "absolute",
+                                        "right": 0,
+                                        "top": 0,
+                                      },
+                                      {
+                                        "backgroundColor": "#E4E7EA",
                                       },
                                     ]
                                   }
-                                >
-                                  <ViewManagerAdapter_ExpoImage
-                                    containerViewRef={"[React.ref]"}
-                                    contentFit="contain"
-                                    contentPosition={
+                                />
+                                <View
+                                  style={
+                                    [
+                                      [
+                                        {
+                                          "borderRadius": 4,
+                                          "minHeight": 200,
+                                          "overflow": "hidden",
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "borderColor": "#CBCED1",
+                                          "borderRadius": 4,
+                                          "borderWidth": 1,
+                                          "overflow": "hidden",
+                                        },
+                                      ],
                                       {
-                                        "left": "50%",
-                                        "top": "50%",
-                                      }
-                                    }
-                                    height={15}
-                                    nativeViewRef={"[React.ref]"}
-                                    onError={[Function]}
-                                    onLoad={[Function]}
-                                    onLoadStart={[Function]}
-                                    onProgress={[Function]}
-                                    placeholder={[]}
-                                    source={
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "position": "absolute",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <Text
+                                    allowFontScaling={false}
+                                    selectable={false}
+                                    style={
                                       [
                                         {
-                                          "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                          "color": "#2F343D",
+                                          "fontSize": 54,
+                                        },
+                                        [
+                                          {
+                                            "lineHeight": 54,
+                                          },
+                                          undefined,
+                                        ],
+                                        {
+                                          "fontFamily": "custom",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "normal",
                                         },
+                                        {},
                                       ]
                                     }
-                                    style={
-                                      {
-                                        "height": 15,
-                                        "width": 15,
-                                      }
-                                    }
-                                    transition={null}
-                                    width={15}
-                                  />
+                                  >
+                                    
+                                  </Text>
                                 </View>
-                              </Text>
-                            </Text>
+                                <View
+                                  style={
+                                    {
+                                      "bottom": 8,
+                                      "flexDirection": "row",
+                                      "gap": 8,
+                                      "position": "absolute",
+                                      "right": 8,
+                                    }
+                                  }
+                                />
+                              </View>
+                            </View>
                           </View>
                           <View
                             accessibilityState={
@@ -129387,7 +145781,9 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                             accessible={true}
                             collapsable={false}
                             focusable={true}
+                            onBlur={[Function]}
                             onClick={[Function]}
+                            onFocus={[Function]}
                             onResponderGrant={[Function]}
                             onResponderMove={[Function]}
                             onResponderRelease={[Function]}
@@ -129398,7 +145794,6 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                               {
                                 "borderRadius": 4,
                                 "flexDirection": "column",
-                                "opacity": 1,
                               }
                             }
                           >
@@ -129525,170 +145920,12 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                             </View>
                           </View>
                         </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "flexDirection": "column",
-                              "opacity": 1,
-                            }
-                          }
-                        >
-                          <View
-                            onLayout={[Function]}
-                            style={
-                              {
-                                "flex": 1,
-                              }
-                            }
-                          >
-                            <View
-                              style={
-                                [
-                                  {
-                                    "borderRadius": 4,
-                                    "minHeight": 200,
-                                    "overflow": "hidden",
-                                    "width": "100%",
-                                  },
-                                  {
-                                    "borderColor": "#CBCED1",
-                                    "borderRadius": 4,
-                                    "borderWidth": 1,
-                                    "overflow": "hidden",
-                                  },
-                                ]
-                              }
-                            />
-                            <View
-                              style={
-                                [
-                                  [
-                                    {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
-                                    },
-                                    {
-                                      "borderColor": "#CBCED1",
-                                      "borderRadius": 4,
-                                      "borderWidth": 1,
-                                      "overflow": "hidden",
-                                    },
-                                  ],
-                                  {
-                                    "borderWidth": 0,
-                                    "bottom": 0,
-                                    "left": 0,
-                                    "position": "absolute",
-                                    "right": 0,
-                                    "top": 0,
-                                  },
-                                  {
-                                    "backgroundColor": "#E4E7EA",
-                                  },
-                                ]
-                              }
-                            />
-                            <View
-                              style={
-                                [
-                                  [
-                                    {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
-                                    },
-                                    {
-                                      "borderColor": "#CBCED1",
-                                      "borderRadius": 4,
-                                      "borderWidth": 1,
-                                      "overflow": "hidden",
-                                    },
-                                  ],
-                                  {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                    "position": "absolute",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
-                                style={
-                                  [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 54,
-                                    },
-                                    [
-                                      {
-                                        "lineHeight": 54,
-                                      },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
-                                }
-                              >
-                                
-                              </Text>
-                            </View>
-                            <View
-                              style={
-                                {
-                                  "bottom": 8,
-                                  "flexDirection": "row",
-                                  "gap": 8,
-                                  "position": "absolute",
-                                  "right": 8,
-                                }
-                              }
-                            />
-                          </View>
-                        </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -129733,391 +145970,438 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  multi file.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="multi file"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9q:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  multi file.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="multi file"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9q:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={498}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={499}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-multi file"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-multi file"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="multi file"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                multi file
+                                <Text
+                                  accessibilityLabel="multi file"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  multi file
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "gap": 4,
-                          }
-                        }
-                      >
                         <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
                           style={
                             {
-                              "borderRadius": 4,
-                              "flexDirection": "column",
-                              "opacity": 1,
+                              "gap": 4,
                             }
                           }
                         >
                           <View
-                            onLayout={[Function]}
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "flex": 1,
+                                "borderRadius": 4,
+                                "flexDirection": "column",
                               }
                             }
                           >
                             <View
+                              onLayout={[Function]}
                               style={
-                                [
-                                  {
-                                    "borderRadius": 4,
-                                    "minHeight": 200,
-                                    "overflow": "hidden",
-                                    "width": "100%",
-                                  },
-                                  {
-                                    "borderColor": "#CBCED1",
-                                    "borderRadius": 4,
-                                    "borderWidth": 1,
-                                    "overflow": "hidden",
-                                  },
-                                ]
+                                {
+                                  "flex": 1,
+                                }
                               }
-                            />
-                            <View
-                              style={
-                                [
+                            >
+                              <View
+                                style={
                                   [
                                     {
                                       "borderRadius": 4,
@@ -130131,151 +146415,152 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                                       "borderWidth": 1,
                                       "overflow": "hidden",
                                     },
-                                  ],
-                                  {
-                                    "borderWidth": 0,
-                                    "bottom": 0,
-                                    "left": 0,
-                                    "position": "absolute",
-                                    "right": 0,
-                                    "top": 0,
-                                  },
-                                  {
-                                    "backgroundColor": "#E4E7EA",
-                                  },
-                                ]
-                              }
-                            />
-                            <View
-                              style={
-                                [
+                                  ]
+                                }
+                              />
+                              <View
+                                style={
                                   [
+                                    [
+                                      {
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderRadius": 4,
+                                        "borderWidth": 1,
+                                        "overflow": "hidden",
+                                      },
+                                    ],
                                     {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
+                                      "borderWidth": 0,
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "position": "absolute",
+                                      "right": 0,
+                                      "top": 0,
                                     },
                                     {
-                                      "borderColor": "#CBCED1",
-                                      "borderRadius": 4,
-                                      "borderWidth": 1,
-                                      "overflow": "hidden",
+                                      "backgroundColor": "#E4E7EA",
                                     },
-                                  ],
-                                  {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                    "position": "absolute",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                                  ]
+                                }
+                              />
+                              <View
                                 style={
                                   [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 54,
-                                    },
                                     [
                                       {
-                                        "lineHeight": 54,
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderRadius": 4,
+                                        "borderWidth": 1,
+                                        "overflow": "hidden",
                                       },
-                                      undefined,
                                     ],
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                      "position": "absolute",
                                     },
-                                    {},
                                   ]
                                 }
                               >
-                                
-                              </Text>
-                            </View>
-                            <View
-                              style={
-                                {
-                                  "bottom": 8,
-                                  "flexDirection": "row",
-                                  "gap": 8,
-                                  "position": "absolute",
-                                  "right": 8,
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 54,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 54,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
+                              <View
+                                style={
+                                  {
+                                    "bottom": 8,
+                                    "flexDirection": "row",
+                                    "gap": 8,
+                                    "position": "absolute",
+                                    "right": 8,
+                                  }
                                 }
-                              }
-                            />
+                              />
+                            </View>
                           </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
                             }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "flexDirection": "column",
-                              "opacity": 1,
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
                             }
-                          }
-                        >
-                          <View
-                            onLayout={[Function]}
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "flex": 1,
+                                "borderRadius": 4,
+                                "flexDirection": "column",
                               }
                             }
                           >
                             <View
+                              onLayout={[Function]}
                               style={
-                                [
-                                  {
-                                    "borderRadius": 4,
-                                    "minHeight": 200,
-                                    "overflow": "hidden",
-                                    "width": "100%",
-                                  },
-                                  {
-                                    "borderColor": "#CBCED1",
-                                    "borderRadius": 4,
-                                    "borderWidth": 1,
-                                    "overflow": "hidden",
-                                  },
-                                ]
+                                {
+                                  "flex": 1,
+                                }
                               }
-                            />
-                            <View
-                              style={
-                                [
+                            >
+                              <View
+                                style={
                                   [
                                     {
                                       "borderRadius": 4,
@@ -130289,92 +146574,112 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                                       "borderWidth": 1,
                                       "overflow": "hidden",
                                     },
-                                  ],
-                                  {
-                                    "borderWidth": 0,
-                                    "bottom": 0,
-                                    "left": 0,
-                                    "position": "absolute",
-                                    "right": 0,
-                                    "top": 0,
-                                  },
-                                  {
-                                    "backgroundColor": "#E4E7EA",
-                                  },
-                                ]
-                              }
-                            />
-                            <View
-                              style={
-                                [
+                                  ]
+                                }
+                              />
+                              <View
+                                style={
                                   [
+                                    [
+                                      {
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderRadius": 4,
+                                        "borderWidth": 1,
+                                        "overflow": "hidden",
+                                      },
+                                    ],
                                     {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
+                                      "borderWidth": 0,
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "position": "absolute",
+                                      "right": 0,
+                                      "top": 0,
                                     },
                                     {
-                                      "borderColor": "#CBCED1",
-                                      "borderRadius": 4,
-                                      "borderWidth": 1,
-                                      "overflow": "hidden",
+                                      "backgroundColor": "#E4E7EA",
                                     },
-                                  ],
-                                  {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                    "position": "absolute",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                                  ]
+                                }
+                              />
+                              <View
                                 style={
                                   [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 54,
-                                    },
                                     [
                                       {
-                                        "lineHeight": 54,
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderRadius": 4,
+                                        "borderWidth": 1,
+                                        "overflow": "hidden",
                                       },
-                                      undefined,
                                     ],
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                      "position": "absolute",
                                     },
-                                    {},
                                   ]
                                 }
-                              >
-                                
-                              </Text>
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 54,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 54,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
+                              <View
+                                style={
+                                  {
+                                    "bottom": 8,
+                                    "flexDirection": "row",
+                                    "gap": 8,
+                                    "position": "absolute",
+                                    "right": 8,
+                                  }
+                                }
+                              />
                             </View>
-                            <View
-                              style={
-                                {
-                                  "bottom": 8,
-                                  "flexDirection": "row",
-                                  "gap": 8,
-                                  "position": "absolute",
-                                  "right": 8,
-                                }
-                              }
-                            />
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -130419,260 +146724,318 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9r:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9r:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={500}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={501}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
                       <View
                         style={
                           {
@@ -130690,169 +147053,156 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                           <View
                             style={
                               {
-                                "gap": 2,
+                                "gap": 4,
                               }
                             }
                           >
-                            <Text
+                            <View
                               style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
+                                {
+                                  "gap": 2,
+                                }
                               }
                             >
                               <Text
                                 style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                  ]
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="This is a description for Base64 Attachment "
                                   style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
                                   }
                                 >
-                                  This is a description for Base64 Attachment 
-                                </Text>
-                                <View
-                                  style={
-                                    [
+                                  <Text
+                                    accessibilityLabel="This is a description for Base64 Attachment "
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    This is a description for Base64 Attachment 
+                                  </Text>
+                                  <View
+                                    style={
                                       {
                                         "transform": [
                                           {
                                             "translateY": 3,
                                           },
                                         ],
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <ViewManagerAdapter_ExpoImage
-                                    containerViewRef={"[React.ref]"}
-                                    contentFit="contain"
-                                    contentPosition={
-                                      {
-                                        "left": "50%",
-                                        "top": "50%",
                                       }
                                     }
-                                    height={15}
-                                    nativeViewRef={"[React.ref]"}
-                                    onError={[Function]}
-                                    onLoad={[Function]}
-                                    onLoadStart={[Function]}
-                                    onProgress={[Function]}
-                                    placeholder={[]}
-                                    source={
-                                      [
+                                  >
+                                    <ViewManagerAdapter_ExpoImage
+                                      containerViewRef={"[React.ref]"}
+                                      contentFit="contain"
+                                      contentPosition={
                                         {
-                                          "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                        },
-                                      ]
-                                    }
-                                    style={
-                                      {
-                                        "height": 15,
-                                        "width": 15,
+                                          "left": "50%",
+                                          "top": "50%",
+                                        }
                                       }
-                                    }
-                                    transition={null}
-                                    width={15}
-                                  />
-                                </View>
+                                      height={15}
+                                      nativeViewRef={"[React.ref]"}
+                                      onError={[Function]}
+                                      onLoad={[Function]}
+                                      onLoadStart={[Function]}
+                                      onProgress={[Function]}
+                                      placeholder={[]}
+                                      source={
+                                        [
+                                          {
+                                            "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                          },
+                                        ]
+                                      }
+                                      style={
+                                        {
+                                          "height": 15,
+                                          "width": 15,
+                                        }
+                                      }
+                                      transition={null}
+                                      width={15}
+                                    />
+                                  </View>
+                                </Text>
                               </Text>
-                            </Text>
-                          </View>
-                          <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": undefined,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
+                            </View>
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": undefined,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
                               }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "borderRadius": 4,
-                                "flexDirection": "column",
-                                "opacity": 1,
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
                               }
-                            }
-                          >
-                            <View
-                              onLayout={[Function]}
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
                               style={
                                 {
-                                  "flex": 1,
+                                  "borderRadius": 4,
+                                  "flexDirection": "column",
                                 }
                               }
                             >
                               <View
+                                onLayout={[Function]}
                                 style={
-                                  [
-                                    {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
-                                    },
-                                    {
-                                      "borderColor": "#CBCED1",
-                                      "borderRadius": 4,
-                                      "borderWidth": 1,
-                                      "overflow": "hidden",
-                                    },
-                                  ]
+                                  {
+                                    "flex": 1,
+                                  }
                                 }
-                              />
-                              <View
-                                style={
-                                  [
+                              >
+                                <View
+                                  style={
                                     [
                                       {
                                         "borderRadius": 4,
@@ -130866,71 +147216,91 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                                         "borderWidth": 1,
                                         "overflow": "hidden",
                                       },
-                                    ],
-                                    {
-                                      "borderWidth": 0,
-                                      "bottom": 0,
-                                      "left": 0,
-                                      "position": "absolute",
-                                      "right": 0,
-                                      "top": 0,
-                                    },
-                                    {
-                                      "backgroundColor": "#E4E7EA",
-                                    },
-                                  ]
-                                }
-                              />
-                              <View
-                                style={
-                                  [
+                                    ]
+                                  }
+                                />
+                                <View
+                                  style={
                                     [
+                                      [
+                                        {
+                                          "borderRadius": 4,
+                                          "minHeight": 200,
+                                          "overflow": "hidden",
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "borderColor": "#CBCED1",
+                                          "borderRadius": 4,
+                                          "borderWidth": 1,
+                                          "overflow": "hidden",
+                                        },
+                                      ],
                                       {
-                                        "borderRadius": 4,
-                                        "minHeight": 200,
-                                        "overflow": "hidden",
-                                        "width": "100%",
+                                        "borderWidth": 0,
+                                        "bottom": 0,
+                                        "left": 0,
+                                        "position": "absolute",
+                                        "right": 0,
+                                        "top": 0,
                                       },
                                       {
-                                        "borderColor": "#CBCED1",
-                                        "borderRadius": 4,
-                                        "borderWidth": 1,
-                                        "overflow": "hidden",
+                                        "backgroundColor": "#E4E7EA",
                                       },
-                                    ],
-                                    {
-                                      "alignItems": "center",
-                                      "justifyContent": "center",
-                                      "position": "absolute",
-                                    },
-                                  ]
-                                }
-                              >
-                                <ActivityIndicator
-                                  color="#6C727A"
-                                  size={54}
+                                    ]
+                                  }
+                                />
+                                <View
                                   style={
                                     [
+                                      [
+                                        {
+                                          "borderRadius": 4,
+                                          "minHeight": 200,
+                                          "overflow": "hidden",
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "borderColor": "#CBCED1",
+                                          "borderRadius": 4,
+                                          "borderWidth": 1,
+                                          "overflow": "hidden",
+                                        },
+                                      ],
                                       {
-                                        "flex": 1,
-                                        "padding": 16,
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "position": "absolute",
                                       },
-                                      undefined,
                                     ]
                                   }
+                                >
+                                  <ActivityIndicator
+                                    color="#6C727A"
+                                    size={54}
+                                    style={
+                                      [
+                                        {
+                                          "flex": 1,
+                                          "padding": 16,
+                                        },
+                                        undefined,
+                                      ]
+                                    }
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    {
+                                      "bottom": 8,
+                                      "flexDirection": "row",
+                                      "gap": 8,
+                                      "position": "absolute",
+                                      "right": 8,
+                                    }
+                                  }
                                 />
                               </View>
-                              <View
-                                style={
-                                  {
-                                    "bottom": 8,
-                                    "flexDirection": "row",
-                                    "gap": 8,
-                                    "position": "absolute",
-                                    "right": 8,
-                                  }
-                                }
-                              />
                             </View>
                           </View>
                         </View>
@@ -130938,8 +147308,8 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -130997,425 +147367,441 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9s:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9s:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={502}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={503}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        style={
-                          {
-                            "gap": 4,
-                          }
-                        }
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 4,
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
+                          />
                           <View
                             style={
                               {
-                                "gap": 2,
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
                               }
                             }
                           >
                             <Text
+                              numberOfLines={1}
                               style={
                                 [
                                   {
                                     "backgroundColor": "transparent",
+                                    "flexShrink": 1,
                                     "fontFamily": "Inter",
                                     "fontSize": 16,
-                                    "fontWeight": "400",
+                                    "fontWeight": "600",
                                     "lineHeight": 22,
                                     "textAlign": "left",
                                   },
                                   {
-                                    "color": "#2F343D",
+                                    "color": "#1F2329",
                                   },
                                 ]
                               }
                             >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityLabel="This is a description"
-                                  style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  This is a description
-                                </Text>
-                              </Text>
+                              diego.mello
                             </Text>
                           </View>
-                          <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": undefined,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
                             }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
+                          }
+                        />
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
+                      <View
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "gap": 4,
                             }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
+                          }
+                        >
+                          <View
                             style={
                               {
-                                "borderRadius": 4,
-                                "flexDirection": "column",
-                                "opacity": 1,
+                                "gap": 4,
                               }
                             }
                           >
                             <View
-                              onLayout={[Function]}
                               style={
                                 {
-                                  "flex": 1,
+                                  "gap": 2,
                                 }
                               }
                             >
-                              <View
+                              <Text
                                 style={
                                   [
                                     {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
                                     },
                                     {
-                                      "borderColor": "#CBCED1",
-                                      "borderRadius": 4,
-                                      "borderWidth": 1,
-                                      "overflow": "hidden",
+                                      "color": "#2F343D",
                                     },
                                   ]
                                 }
-                              />
-                              <View
-                                style={
-                                  [
-                                    [
-                                      {
-                                        "borderRadius": 4,
-                                        "minHeight": 200,
-                                        "overflow": "hidden",
-                                        "width": "100%",
-                                      },
-                                      {
-                                        "borderColor": "#CBCED1",
-                                        "borderRadius": 4,
-                                        "borderWidth": 1,
-                                        "overflow": "hidden",
-                                      },
-                                    ],
-                                    {
-                                      "borderWidth": 0,
-                                      "bottom": 0,
-                                      "left": 0,
-                                      "position": "absolute",
-                                      "right": 0,
-                                      "top": 0,
-                                    },
+                              >
+                                <Text
+                                  style={
                                     {
-                                      "backgroundColor": "#E4E7EA",
-                                    },
-                                  ]
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    accessibilityLabel="This is a description"
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    This is a description
+                                  </Text>
+                                </Text>
+                              </Text>
+                            </View>
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": undefined,
+                                  "expanded": undefined,
+                                  "selected": undefined,
                                 }
-                              />
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "flexDirection": "column",
+                                }
+                              }
+                            >
                               <View
+                                onLayout={[Function]}
                                 style={
-                                  [
+                                  {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
                                     [
                                       {
                                         "borderRadius": 4,
@@ -131429,53 +147815,104 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                                         "borderWidth": 1,
                                         "overflow": "hidden",
                                       },
-                                    ],
-                                    {
-                                      "alignItems": "center",
-                                      "justifyContent": "center",
-                                      "position": "absolute",
-                                    },
-                                  ]
-                                }
-                              >
-                                <Text
-                                  allowFontScaling={false}
-                                  selectable={false}
+                                    ]
+                                  }
+                                />
+                                <View
                                   style={
                                     [
+                                      [
+                                        {
+                                          "borderRadius": 4,
+                                          "minHeight": 200,
+                                          "overflow": "hidden",
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "borderColor": "#CBCED1",
+                                          "borderRadius": 4,
+                                          "borderWidth": 1,
+                                          "overflow": "hidden",
+                                        },
+                                      ],
                                       {
-                                        "color": "#2F343D",
-                                        "fontSize": 70.2,
+                                        "borderWidth": 0,
+                                        "bottom": 0,
+                                        "left": 0,
+                                        "position": "absolute",
+                                        "right": 0,
+                                        "top": 0,
+                                      },
+                                      {
+                                        "backgroundColor": "#E4E7EA",
                                       },
+                                    ]
+                                  }
+                                />
+                                <View
+                                  style={
+                                    [
                                       [
                                         {
-                                          "lineHeight": 70.2,
+                                          "borderRadius": 4,
+                                          "minHeight": 200,
+                                          "overflow": "hidden",
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "borderColor": "#CBCED1",
+                                          "borderRadius": 4,
+                                          "borderWidth": 1,
+                                          "overflow": "hidden",
                                         },
-                                        undefined,
                                       ],
                                       {
-                                        "fontFamily": "custom",
-                                        "fontStyle": "normal",
-                                        "fontWeight": "normal",
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "position": "absolute",
                                       },
-                                      {},
                                     ]
                                   }
                                 >
-                                  
-                                </Text>
-                              </View>
-                              <View
-                                style={
-                                  {
-                                    "bottom": 8,
-                                    "flexDirection": "row",
-                                    "gap": 8,
-                                    "position": "absolute",
-                                    "right": 8,
+                                  <Text
+                                    allowFontScaling={false}
+                                    selectable={false}
+                                    style={
+                                      [
+                                        {
+                                          "color": "#2F343D",
+                                          "fontSize": 70.2,
+                                        },
+                                        [
+                                          {
+                                            "lineHeight": 70.2,
+                                          },
+                                          undefined,
+                                        ],
+                                        {
+                                          "fontFamily": "custom",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "normal",
+                                        },
+                                        {},
+                                      ]
+                                    }
+                                  >
+                                    
+                                  </Text>
+                                </View>
+                                <View
+                                  style={
+                                    {
+                                      "bottom": 8,
+                                      "flexDirection": "row",
+                                      "gap": 8,
+                                      "position": "absolute",
+                                      "right": 8,
+                                    }
                                   }
-                                }
-                              />
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -131483,8 +147920,8 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -131529,67 +147966,73 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9t:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9t:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
@@ -131610,123 +148053,112 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                           <View
                             style={
                               {
-                                "gap": 2,
+                                "gap": 4,
                               }
                             }
                           >
-                            <Text
+                            <View
                               style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
+                                {
+                                  "gap": 2,
+                                }
                               }
                             >
                               <Text
                                 style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                  ]
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="Header false"
                                   style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
                                   }
                                 >
-                                  Header false
+                                  <Text
+                                    accessibilityLabel="Header false"
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Header false
+                                  </Text>
                                 </Text>
                               </Text>
-                            </Text>
-                          </View>
-                          <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": undefined,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
+                            </View>
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": undefined,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
                               }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "borderRadius": 4,
-                                "flexDirection": "column",
-                                "opacity": 1,
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
                               }
-                            }
-                          >
-                            <View
-                              onLayout={[Function]}
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
                               style={
                                 {
-                                  "flex": 1,
+                                  "borderRadius": 4,
+                                  "flexDirection": "column",
                                 }
                               }
                             >
                               <View
+                                onLayout={[Function]}
                                 style={
-                                  [
-                                    {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
-                                    },
-                                    {
-                                      "borderColor": "#CBCED1",
-                                      "borderRadius": 4,
-                                      "borderWidth": 1,
-                                      "overflow": "hidden",
-                                    },
-                                  ]
+                                  {
+                                    "flex": 1,
+                                  }
                                 }
-                              />
-                              <View
-                                style={
-                                  [
+                              >
+                                <View
+                                  style={
                                     [
                                       {
                                         "borderRadius": 4,
@@ -131740,100 +148172,120 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                                         "borderWidth": 1,
                                         "overflow": "hidden",
                                       },
-                                    ],
-                                    {
-                                      "borderWidth": 0,
-                                      "bottom": 0,
-                                      "left": 0,
-                                      "position": "absolute",
-                                      "right": 0,
-                                      "top": 0,
-                                    },
-                                    {
-                                      "backgroundColor": "#E4E7EA",
-                                    },
-                                  ]
-                                }
-                              />
-                              <View
-                                style={
-                                  [
+                                    ]
+                                  }
+                                />
+                                <View
+                                  style={
                                     [
+                                      [
+                                        {
+                                          "borderRadius": 4,
+                                          "minHeight": 200,
+                                          "overflow": "hidden",
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "borderColor": "#CBCED1",
+                                          "borderRadius": 4,
+                                          "borderWidth": 1,
+                                          "overflow": "hidden",
+                                        },
+                                      ],
                                       {
-                                        "borderRadius": 4,
-                                        "minHeight": 200,
-                                        "overflow": "hidden",
-                                        "width": "100%",
+                                        "borderWidth": 0,
+                                        "bottom": 0,
+                                        "left": 0,
+                                        "position": "absolute",
+                                        "right": 0,
+                                        "top": 0,
                                       },
                                       {
-                                        "borderColor": "#CBCED1",
-                                        "borderRadius": 4,
-                                        "borderWidth": 1,
-                                        "overflow": "hidden",
+                                        "backgroundColor": "#E4E7EA",
                                       },
-                                    ],
-                                    {
-                                      "alignItems": "center",
-                                      "justifyContent": "center",
-                                      "position": "absolute",
-                                    },
-                                  ]
-                                }
-                              >
-                                <Text
-                                  allowFontScaling={false}
-                                  selectable={false}
+                                    ]
+                                  }
+                                />
+                                <View
                                   style={
                                     [
-                                      {
-                                        "color": "#2F343D",
-                                        "fontSize": 70.2,
-                                      },
                                       [
                                         {
-                                          "lineHeight": 70.2,
+                                          "borderRadius": 4,
+                                          "minHeight": 200,
+                                          "overflow": "hidden",
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "borderColor": "#CBCED1",
+                                          "borderRadius": 4,
+                                          "borderWidth": 1,
+                                          "overflow": "hidden",
                                         },
-                                        undefined,
                                       ],
                                       {
-                                        "fontFamily": "custom",
-                                        "fontStyle": "normal",
-                                        "fontWeight": "normal",
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "position": "absolute",
                                       },
-                                      {},
                                     ]
                                   }
                                 >
-                                  
-                                </Text>
-                              </View>
-                              <View
-                                style={
-                                  {
-                                    "bottom": 8,
-                                    "flexDirection": "row",
-                                    "gap": 8,
-                                    "position": "absolute",
-                                    "right": 8,
+                                  <Text
+                                    allowFontScaling={false}
+                                    selectable={false}
+                                    style={
+                                      [
+                                        {
+                                          "color": "#2F343D",
+                                          "fontSize": 70.2,
+                                        },
+                                        [
+                                          {
+                                            "lineHeight": 70.2,
+                                          },
+                                          undefined,
+                                        ],
+                                        {
+                                          "fontFamily": "custom",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "normal",
+                                        },
+                                        {},
+                                      ]
+                                    }
+                                  >
+                                    
+                                  </Text>
+                                </View>
+                                <View
+                                  style={
+                                    {
+                                      "bottom": 8,
+                                      "flexDirection": "row",
+                                      "gap": 8,
+                                      "position": "absolute",
+                                      "right": 8,
+                                    }
                                   }
-                                }
-                              />
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -131878,391 +148330,438 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  multi file.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="multi file"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9u:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  multi file.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="multi file"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9u:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={504}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={505}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-multi file"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-multi file"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="multi file"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                multi file
+                                <Text
+                                  accessibilityLabel="multi file"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  multi file
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "gap": 4,
-                          }
-                        }
-                      >
                         <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
-                            }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
                           style={
                             {
-                              "borderRadius": 4,
-                              "flexDirection": "column",
-                              "opacity": 1,
+                              "gap": 4,
                             }
                           }
                         >
                           <View
-                            onLayout={[Function]}
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
+                            }
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "flex": 1,
+                                "borderRadius": 4,
+                                "flexDirection": "column",
                               }
                             }
                           >
                             <View
+                              onLayout={[Function]}
                               style={
-                                [
-                                  {
-                                    "borderRadius": 4,
-                                    "minHeight": 200,
-                                    "overflow": "hidden",
-                                    "width": "100%",
-                                  },
-                                  {
-                                    "borderColor": "#CBCED1",
-                                    "borderRadius": 4,
-                                    "borderWidth": 1,
-                                    "overflow": "hidden",
-                                  },
-                                ]
+                                {
+                                  "flex": 1,
+                                }
                               }
-                            />
-                            <View
-                              style={
-                                [
+                            >
+                              <View
+                                style={
                                   [
                                     {
                                       "borderRadius": 4,
@@ -132276,182 +148775,152 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                                       "borderWidth": 1,
                                       "overflow": "hidden",
                                     },
-                                  ],
-                                  {
-                                    "borderWidth": 0,
-                                    "bottom": 0,
-                                    "left": 0,
-                                    "position": "absolute",
-                                    "right": 0,
-                                    "top": 0,
-                                  },
-                                  {
-                                    "backgroundColor": "#E4E7EA",
-                                  },
-                                ]
-                              }
-                            />
-                            <View
-                              style={
-                                [
+                                  ]
+                                }
+                              />
+                              <View
+                                style={
                                   [
+                                    [
+                                      {
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderRadius": 4,
+                                        "borderWidth": 1,
+                                        "overflow": "hidden",
+                                      },
+                                    ],
                                     {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
+                                      "borderWidth": 0,
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "position": "absolute",
+                                      "right": 0,
+                                      "top": 0,
                                     },
                                     {
-                                      "borderColor": "#CBCED1",
-                                      "borderRadius": 4,
-                                      "borderWidth": 1,
-                                      "overflow": "hidden",
+                                      "backgroundColor": "#E4E7EA",
                                     },
-                                  ],
-                                  {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                    "position": "absolute",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                                  ]
+                                }
+                              />
+                              <View
                                 style={
                                   [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 54,
-                                    },
                                     [
                                       {
-                                        "lineHeight": 54,
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderRadius": 4,
+                                        "borderWidth": 1,
+                                        "overflow": "hidden",
                                       },
-                                      undefined,
                                     ],
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                      "position": "absolute",
                                     },
-                                    {},
                                   ]
                                 }
                               >
-                                
-                              </Text>
-                            </View>
-                            <View
-                              style={
-                                {
-                                  "bottom": 8,
-                                  "flexDirection": "row",
-                                  "gap": 8,
-                                  "position": "absolute",
-                                  "right": 8,
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 54,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 54,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
+                              <View
+                                style={
+                                  {
+                                    "bottom": 8,
+                                    "flexDirection": "row",
+                                    "gap": 8,
+                                    "position": "absolute",
+                                    "right": 8,
+                                  }
                                 }
-                              }
-                            />
+                              />
+                            </View>
                           </View>
-                        </View>
-                        <View
-                          accessibilityState={
-                            {
-                              "busy": undefined,
-                              "checked": undefined,
-                              "disabled": undefined,
-                              "expanded": undefined,
-                              "selected": undefined,
-                            }
-                          }
-                          accessibilityValue={
-                            {
-                              "max": undefined,
-                              "min": undefined,
-                              "now": undefined,
-                              "text": undefined,
+                          <View
+                            accessibilityState={
+                              {
+                                "busy": undefined,
+                                "checked": undefined,
+                                "disabled": undefined,
+                                "expanded": undefined,
+                                "selected": undefined,
+                              }
                             }
-                          }
-                          accessible={true}
-                          collapsable={false}
-                          focusable={true}
-                          onClick={[Function]}
-                          onResponderGrant={[Function]}
-                          onResponderMove={[Function]}
-                          onResponderRelease={[Function]}
-                          onResponderTerminate={[Function]}
-                          onResponderTerminationRequest={[Function]}
-                          onStartShouldSetResponder={[Function]}
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "flexDirection": "column",
-                              "opacity": 1,
+                            accessibilityValue={
+                              {
+                                "max": undefined,
+                                "min": undefined,
+                                "now": undefined,
+                                "text": undefined,
+                              }
                             }
-                          }
-                        >
-                          <View
-                            onLayout={[Function]}
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "flex": 1,
+                                "borderRadius": 4,
+                                "flexDirection": "column",
                               }
                             }
                           >
                             <View
+                              onLayout={[Function]}
                               style={
-                                [
-                                  {
-                                    "borderRadius": 4,
-                                    "minHeight": 200,
-                                    "overflow": "hidden",
-                                    "width": "100%",
-                                  },
-                                  {
-                                    "borderColor": "#CBCED1",
-                                    "borderRadius": 4,
-                                    "borderWidth": 1,
-                                    "overflow": "hidden",
-                                  },
-                                ]
-                              }
-                            />
-                            <View
-                              style={
-                                [
-                                  [
-                                    {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
-                                    },
-                                    {
-                                      "borderColor": "#CBCED1",
-                                      "borderRadius": 4,
-                                      "borderWidth": 1,
-                                      "overflow": "hidden",
-                                    },
-                                  ],
-                                  {
-                                    "borderWidth": 0,
-                                    "bottom": 0,
-                                    "left": 0,
-                                    "position": "absolute",
-                                    "right": 0,
-                                    "top": 0,
-                                  },
-                                  {
-                                    "backgroundColor": "#E4E7EA",
-                                  },
-                                ]
+                                {
+                                  "flex": 1,
+                                }
                               }
-                            />
-                            <View
-                              style={
-                                [
+                            >
+                              <View
+                                style={
                                   [
                                     {
                                       "borderRadius": 4,
@@ -132465,61 +148934,112 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                                       "borderWidth": 1,
                                       "overflow": "hidden",
                                     },
-                                  ],
-                                  {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                    "position": "absolute",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                                  ]
+                                }
+                              />
+                              <View
                                 style={
                                   [
+                                    [
+                                      {
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderRadius": 4,
+                                        "borderWidth": 1,
+                                        "overflow": "hidden",
+                                      },
+                                    ],
                                     {
-                                      "color": "#2F343D",
-                                      "fontSize": 54,
+                                      "borderWidth": 0,
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "position": "absolute",
+                                      "right": 0,
+                                      "top": 0,
+                                    },
+                                    {
+                                      "backgroundColor": "#E4E7EA",
                                     },
+                                  ]
+                                }
+                              />
+                              <View
+                                style={
+                                  [
                                     [
                                       {
-                                        "lineHeight": 54,
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderRadius": 4,
+                                        "borderWidth": 1,
+                                        "overflow": "hidden",
                                       },
-                                      undefined,
                                     ],
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                      "position": "absolute",
                                     },
-                                    {},
                                   ]
                                 }
                               >
-                                
-                              </Text>
-                            </View>
-                            <View
-                              style={
-                                {
-                                  "bottom": 8,
-                                  "flexDirection": "row",
-                                  "gap": 8,
-                                  "position": "absolute",
-                                  "right": 8,
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 54,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 54,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
+                              <View
+                                style={
+                                  {
+                                    "bottom": 8,
+                                    "flexDirection": "row",
+                                    "gap": 8,
+                                    "position": "absolute",
+                                    "right": 8,
+                                  }
                                 }
-                              }
-                            />
+                              />
+                            </View>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -132564,260 +149084,318 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9v:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9v:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={506}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={507}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -132835,169 +149413,156 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                           <View
                             style={
                               {
-                                "gap": 2,
+                                "gap": 4,
                               }
                             }
                           >
-                            <Text
+                            <View
                               style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
+                                {
+                                  "gap": 2,
+                                }
                               }
                             >
                               <Text
                                 style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                  ]
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="This is a description for Base64 Attachment "
                                   style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
                                   }
                                 >
-                                  This is a description for Base64 Attachment 
-                                </Text>
-                                <View
-                                  style={
-                                    [
+                                  <Text
+                                    accessibilityLabel="This is a description for Base64 Attachment "
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    This is a description for Base64 Attachment 
+                                  </Text>
+                                  <View
+                                    style={
                                       {
                                         "transform": [
                                           {
                                             "translateY": 3,
                                           },
                                         ],
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <ViewManagerAdapter_ExpoImage
-                                    containerViewRef={"[React.ref]"}
-                                    contentFit="contain"
-                                    contentPosition={
-                                      {
-                                        "left": "50%",
-                                        "top": "50%",
                                       }
                                     }
-                                    height={15}
-                                    nativeViewRef={"[React.ref]"}
-                                    onError={[Function]}
-                                    onLoad={[Function]}
-                                    onLoadStart={[Function]}
-                                    onProgress={[Function]}
-                                    placeholder={[]}
-                                    source={
-                                      [
+                                  >
+                                    <ViewManagerAdapter_ExpoImage
+                                      containerViewRef={"[React.ref]"}
+                                      contentFit="contain"
+                                      contentPosition={
                                         {
-                                          "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                        },
-                                      ]
-                                    }
-                                    style={
-                                      {
-                                        "height": 15,
-                                        "width": 15,
+                                          "left": "50%",
+                                          "top": "50%",
+                                        }
                                       }
-                                    }
-                                    transition={null}
-                                    width={15}
-                                  />
-                                </View>
+                                      height={15}
+                                      nativeViewRef={"[React.ref]"}
+                                      onError={[Function]}
+                                      onLoad={[Function]}
+                                      onLoadStart={[Function]}
+                                      onProgress={[Function]}
+                                      placeholder={[]}
+                                      source={
+                                        [
+                                          {
+                                            "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                          },
+                                        ]
+                                      }
+                                      style={
+                                        {
+                                          "height": 15,
+                                          "width": 15,
+                                        }
+                                      }
+                                      transition={null}
+                                      width={15}
+                                    />
+                                  </View>
+                                </Text>
                               </Text>
-                            </Text>
-                          </View>
-                          <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": undefined,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "borderRadius": 4,
-                                "flexDirection": "column",
-                                "opacity": 1,
+                            </View>
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": undefined,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
                               }
-                            }
-                          >
-                            <View
-                              onLayout={[Function]}
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
                               style={
                                 {
-                                  "flex": 1,
+                                  "borderRadius": 4,
+                                  "flexDirection": "column",
                                 }
                               }
                             >
                               <View
+                                onLayout={[Function]}
                                 style={
-                                  [
-                                    {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
-                                    },
-                                    {
-                                      "borderColor": "#CBCED1",
-                                      "borderRadius": 4,
-                                      "borderWidth": 1,
-                                      "overflow": "hidden",
-                                    },
-                                  ]
+                                  {
+                                    "flex": 1,
+                                  }
                                 }
-                              />
-                              <View
-                                style={
-                                  [
+                              >
+                                <View
+                                  style={
                                     [
                                       {
                                         "borderRadius": 4,
@@ -133011,71 +149576,91 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                                         "borderWidth": 1,
                                         "overflow": "hidden",
                                       },
-                                    ],
-                                    {
-                                      "borderWidth": 0,
-                                      "bottom": 0,
-                                      "left": 0,
-                                      "position": "absolute",
-                                      "right": 0,
-                                      "top": 0,
-                                    },
-                                    {
-                                      "backgroundColor": "#E4E7EA",
-                                    },
-                                  ]
-                                }
-                              />
-                              <View
-                                style={
-                                  [
+                                    ]
+                                  }
+                                />
+                                <View
+                                  style={
                                     [
+                                      [
+                                        {
+                                          "borderRadius": 4,
+                                          "minHeight": 200,
+                                          "overflow": "hidden",
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "borderColor": "#CBCED1",
+                                          "borderRadius": 4,
+                                          "borderWidth": 1,
+                                          "overflow": "hidden",
+                                        },
+                                      ],
                                       {
-                                        "borderRadius": 4,
-                                        "minHeight": 200,
-                                        "overflow": "hidden",
-                                        "width": "100%",
+                                        "borderWidth": 0,
+                                        "bottom": 0,
+                                        "left": 0,
+                                        "position": "absolute",
+                                        "right": 0,
+                                        "top": 0,
                                       },
                                       {
-                                        "borderColor": "#CBCED1",
-                                        "borderRadius": 4,
-                                        "borderWidth": 1,
-                                        "overflow": "hidden",
+                                        "backgroundColor": "#E4E7EA",
                                       },
-                                    ],
-                                    {
-                                      "alignItems": "center",
-                                      "justifyContent": "center",
-                                      "position": "absolute",
-                                    },
-                                  ]
-                                }
-                              >
-                                <ActivityIndicator
-                                  color="#6C727A"
-                                  size={54}
+                                    ]
+                                  }
+                                />
+                                <View
                                   style={
                                     [
+                                      [
+                                        {
+                                          "borderRadius": 4,
+                                          "minHeight": 200,
+                                          "overflow": "hidden",
+                                          "width": "100%",
+                                        },
+                                        {
+                                          "borderColor": "#CBCED1",
+                                          "borderRadius": 4,
+                                          "borderWidth": 1,
+                                          "overflow": "hidden",
+                                        },
+                                      ],
                                       {
-                                        "flex": 1,
-                                        "padding": 16,
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "position": "absolute",
                                       },
-                                      undefined,
                                     ]
                                   }
+                                >
+                                  <ActivityIndicator
+                                    color="#6C727A"
+                                    size={54}
+                                    style={
+                                      [
+                                        {
+                                          "flex": 1,
+                                          "padding": 16,
+                                        },
+                                        undefined,
+                                      ]
+                                    }
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    {
+                                      "bottom": 8,
+                                      "flexDirection": "row",
+                                      "gap": 8,
+                                      "position": "absolute",
+                                      "right": 8,
+                                    }
+                                  }
                                 />
                               </View>
-                              <View
-                                style={
-                                  {
-                                    "bottom": 8,
-                                    "flexDirection": "row",
-                                    "gap": 8,
-                                    "position": "absolute",
-                                    "right": 8,
-                                  }
-                                }
-                              />
                             </View>
                           </View>
                         </View>
@@ -133083,8 +149668,8 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -133142,260 +149727,318 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":ra0:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":ra0:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={508}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={509}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
                       <View
                         style={
                           {
@@ -133413,220 +150056,227 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
                           <View
                             style={
                               {
-                                "gap": 2,
+                                "gap": 4,
                               }
                             }
                           >
-                            <Text
+                            <View
                               style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
+                                {
+                                  "gap": 2,
+                                }
                               }
                             >
                               <Text
                                 style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                  ]
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="This is a description "
                                   style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
                                   }
                                 >
-                                  This is a description 
-                                </Text>
-                                <View
-                                  style={
-                                    [
+                                  <Text
+                                    accessibilityLabel="This is a description "
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    This is a description 
+                                  </Text>
+                                  <View
+                                    style={
                                       {
                                         "transform": [
                                           {
                                             "translateY": 3,
                                           },
                                         ],
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <ViewManagerAdapter_ExpoImage
-                                    containerViewRef={"[React.ref]"}
-                                    contentFit="contain"
-                                    contentPosition={
-                                      {
-                                        "left": "50%",
-                                        "top": "50%",
                                       }
                                     }
-                                    height={15}
-                                    nativeViewRef={"[React.ref]"}
-                                    onError={[Function]}
-                                    onLoad={[Function]}
-                                    onLoadStart={[Function]}
-                                    onProgress={[Function]}
-                                    placeholder={[]}
-                                    source={
-                                      [
+                                  >
+                                    <ViewManagerAdapter_ExpoImage
+                                      containerViewRef={"[React.ref]"}
+                                      contentFit="contain"
+                                      contentPosition={
                                         {
-                                          "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                        },
-                                      ]
-                                    }
-                                    style={
-                                      {
-                                        "height": 15,
-                                        "width": 15,
+                                          "left": "50%",
+                                          "top": "50%",
+                                        }
                                       }
-                                    }
-                                    transition={null}
-                                    width={15}
-                                  />
-                                </View>
-                              </Text>
-                            </Text>
-                          </View>
-                          <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": undefined,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
+                                      height={15}
+                                      nativeViewRef={"[React.ref]"}
+                                      onError={[Function]}
+                                      onLoad={[Function]}
+                                      onLoadStart={[Function]}
+                                      onProgress={[Function]}
+                                      placeholder={[]}
+                                      source={
+                                        [
+                                          {
+                                            "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                          },
+                                        ]
+                                      }
+                                      style={
+                                        {
+                                          "height": 15,
+                                          "width": 15,
+                                        }
+                                      }
+                                      transition={null}
+                                      width={15}
+                                    />
+                                  </View>
+                                </Text>
+                              </Text>
+                            </View>
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": undefined,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
                               }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "borderRadius": 4,
-                                "minHeight": 200,
-                                "opacity": 1,
-                                "overflow": "hidden",
-                                "width": "100%",
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
                               }
-                            }
-                          >
-                            <View
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
                               style={
-                                [
-                                  [
-                                    {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
-                                    },
-                                    {
-                                      "borderColor": "#CBCED1",
-                                      "borderWidth": 1,
-                                    },
-                                  ],
-                                  {
-                                    "borderWidth": 0,
-                                    "bottom": 0,
-                                    "left": 0,
-                                    "position": "absolute",
-                                    "right": 0,
-                                    "top": 0,
-                                  },
-                                  {
-                                    "backgroundColor": "#E4E7EA",
-                                  },
-                                ]
+                                {
+                                  "borderRadius": 4,
+                                  "minHeight": 200,
+                                  "overflow": "hidden",
+                                  "width": "100%",
+                                }
                               }
-                            />
-                            <View
-                              style={
-                                [
+                            >
+                              <View
+                                style={
                                   [
+                                    [
+                                      {
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderWidth": 1,
+                                      },
+                                    ],
                                     {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
+                                      "borderWidth": 0,
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "position": "absolute",
+                                      "right": 0,
+                                      "top": 0,
                                     },
                                     {
-                                      "borderColor": "#CBCED1",
-                                      "borderWidth": 1,
+                                      "backgroundColor": "#E4E7EA",
                                     },
-                                  ],
-                                  {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                    "position": "absolute",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                                  ]
+                                }
+                              />
+                              <View
                                 style={
                                   [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 54,
-                                    },
                                     [
                                       {
-                                        "lineHeight": 54,
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderWidth": 1,
                                       },
-                                      undefined,
                                     ],
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                      "position": "absolute",
                                     },
-                                    {},
                                   ]
                                 }
                               >
-                                
-                              </Text>
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 54,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 54,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -133634,8 +150284,8 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -133680,67 +150330,73 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":ra1:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":ra1:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
@@ -133761,190 +150417,199 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
                           <View
                             style={
                               {
-                                "gap": 2,
+                                "gap": 4,
                               }
                             }
                           >
-                            <Text
+                            <View
                               style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
+                                {
+                                  "gap": 2,
+                                }
                               }
                             >
                               <Text
                                 style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                  ]
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="Header false"
                                   style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
                                   }
                                 >
-                                  Header false
+                                  <Text
+                                    accessibilityLabel="Header false"
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Header false
+                                  </Text>
                                 </Text>
                               </Text>
-                            </Text>
-                          </View>
-                          <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": undefined,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
+                            </View>
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": undefined,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
                               }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "borderRadius": 4,
-                                "minHeight": 200,
-                                "opacity": 1,
-                                "overflow": "hidden",
-                                "width": "100%",
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
                               }
-                            }
-                          >
-                            <View
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
                               style={
-                                [
-                                  [
-                                    {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
-                                    },
-                                    {
-                                      "borderColor": "#CBCED1",
-                                      "borderWidth": 1,
-                                    },
-                                  ],
-                                  {
-                                    "borderWidth": 0,
-                                    "bottom": 0,
-                                    "left": 0,
-                                    "position": "absolute",
-                                    "right": 0,
-                                    "top": 0,
-                                  },
-                                  {
-                                    "backgroundColor": "#E4E7EA",
-                                  },
-                                ]
+                                {
+                                  "borderRadius": 4,
+                                  "minHeight": 200,
+                                  "overflow": "hidden",
+                                  "width": "100%",
+                                }
                               }
-                            />
-                            <View
-                              style={
-                                [
+                            >
+                              <View
+                                style={
                                   [
+                                    [
+                                      {
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderWidth": 1,
+                                      },
+                                    ],
                                     {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
+                                      "borderWidth": 0,
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "position": "absolute",
+                                      "right": 0,
+                                      "top": 0,
                                     },
                                     {
-                                      "borderColor": "#CBCED1",
-                                      "borderWidth": 1,
+                                      "backgroundColor": "#E4E7EA",
                                     },
-                                  ],
-                                  {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                    "position": "absolute",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                                  ]
+                                }
+                              />
+                              <View
                                 style={
                                   [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 54,
-                                    },
                                     [
                                       {
-                                        "lineHeight": 54,
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderWidth": 1,
                                       },
-                                      undefined,
                                     ],
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                      "position": "absolute",
                                     },
-                                    {},
                                   ]
                                 }
                               >
-                                
-                              </Text>
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 54,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 54,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
                             </View>
                           </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -133989,318 +150654,317 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  multi file.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="multi file"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":ra2:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  multi file.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="multi file"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":ra2:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={510}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={511}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
-                          }
-                        >
-                          10:00 AM
-                        </Text>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-multi file"
-                      >
-                        <View
-                          style={
-                            {
-                              "gap": 2,
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
                             }
-                          }
-                        >
-                          <Text
+                          />
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
                             }
                           >
                             <Text
+                              numberOfLines={1}
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
                               }
                             >
-                              <Text
-                                accessibilityLabel="multi file"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                multi file
-                              </Text>
+                              diego.mello
                             </Text>
-                          </Text>
-                        </View>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
                       <View
                         style={
@@ -134310,129 +150974,62 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
                         }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
+                          testID="message-content-multi file"
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": undefined,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "borderRadius": 4,
-                                "minHeight": 200,
-                                "opacity": 1,
-                                "overflow": "hidden",
-                                "width": "100%",
+                                "gap": 2,
                               }
                             }
                           >
-                            <View
+                            <Text
                               style={
                                 [
-                                  [
-                                    {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
-                                    },
-                                    {
-                                      "borderColor": "#CBCED1",
-                                      "borderWidth": 1,
-                                    },
-                                  ],
-                                  {
-                                    "borderWidth": 0,
-                                    "bottom": 0,
-                                    "left": 0,
-                                    "position": "absolute",
-                                    "right": 0,
-                                    "top": 0,
-                                  },
                                   {
-                                    "backgroundColor": "#E4E7EA",
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
                                   },
-                                ]
-                              }
-                            />
-                            <View
-                              style={
-                                [
-                                  [
-                                    {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
-                                    },
-                                    {
-                                      "borderColor": "#CBCED1",
-                                      "borderWidth": 1,
-                                    },
-                                  ],
                                   {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                    "position": "absolute",
+                                    "color": "#2F343D",
                                   },
                                 ]
                               }
                             >
                               <Text
-                                allowFontScaling={false}
-                                selectable={false}
                                 style={
-                                  [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 54,
-                                    },
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="multi file"
+                                  style={
                                     [
                                       {
-                                        "lineHeight": 54,
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
                                       },
-                                      undefined,
-                                    ],
-                                    {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
-                                    },
-                                    {},
-                                  ]
-                                }
-                              >
-                                
+                                    ]
+                                  }
+                                >
+                                  multi file
+                                </Text>
                               </Text>
-                            </View>
+                            </Text>
                           </View>
                         </View>
                         <View
@@ -134443,121 +151040,257 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": undefined,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "borderRadius": 4,
-                                "minHeight": 200,
-                                "opacity": 1,
-                                "overflow": "hidden",
-                                "width": "100%",
+                                "gap": 4,
                               }
                             }
                           >
                             <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": undefined,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
                               style={
-                                [
+                                {
+                                  "borderRadius": 4,
+                                  "minHeight": 200,
+                                  "overflow": "hidden",
+                                  "width": "100%",
+                                }
+                              }
+                            >
+                              <View
+                                style={
                                   [
+                                    [
+                                      {
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderWidth": 1,
+                                      },
+                                    ],
                                     {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
+                                      "borderWidth": 0,
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "position": "absolute",
+                                      "right": 0,
+                                      "top": 0,
                                     },
                                     {
-                                      "borderColor": "#CBCED1",
-                                      "borderWidth": 1,
+                                      "backgroundColor": "#E4E7EA",
                                     },
-                                  ],
-                                  {
-                                    "borderWidth": 0,
-                                    "bottom": 0,
-                                    "left": 0,
-                                    "position": "absolute",
-                                    "right": 0,
-                                    "top": 0,
-                                  },
-                                  {
-                                    "backgroundColor": "#E4E7EA",
-                                  },
-                                ]
+                                  ]
+                                }
+                              />
+                              <View
+                                style={
+                                  [
+                                    [
+                                      {
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderWidth": 1,
+                                      },
+                                    ],
+                                    {
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                      "position": "absolute",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 54,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 54,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                          <View
+                            style={
+                              {
+                                "gap": 4,
                               }
-                            />
+                            }
+                          >
                             <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": undefined,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
                               style={
-                                [
+                                {
+                                  "borderRadius": 4,
+                                  "minHeight": 200,
+                                  "overflow": "hidden",
+                                  "width": "100%",
+                                }
+                              }
+                            >
+                              <View
+                                style={
                                   [
+                                    [
+                                      {
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderWidth": 1,
+                                      },
+                                    ],
                                     {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
+                                      "borderWidth": 0,
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "position": "absolute",
+                                      "right": 0,
+                                      "top": 0,
                                     },
                                     {
-                                      "borderColor": "#CBCED1",
-                                      "borderWidth": 1,
+                                      "backgroundColor": "#E4E7EA",
                                     },
-                                  ],
-                                  {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                    "position": "absolute",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                                  ]
+                                }
+                              />
+                              <View
                                 style={
                                   [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 54,
-                                    },
                                     [
                                       {
-                                        "lineHeight": 54,
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderWidth": 1,
                                       },
-                                      undefined,
                                     ],
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                      "position": "absolute",
                                     },
-                                    {},
                                   ]
                                 }
                               >
-                                
-                              </Text>
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 54,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 54,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -134565,8 +151298,8 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -134624,260 +151357,318 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":ra3:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":ra3:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={512}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={513}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -134895,220 +151686,227 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                           <View
                             style={
                               {
-                                "gap": 2,
+                                "gap": 4,
                               }
                             }
                           >
-                            <Text
+                            <View
                               style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
+                                {
+                                  "gap": 2,
+                                }
                               }
                             >
                               <Text
                                 style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                  ]
                                 }
                               >
                                 <Text
-                                  accessibilityLabel="This is a description "
                                   style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flexShrink": 1,
+                                      "fontFamily": "Inter",
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    }
                                   }
                                 >
-                                  This is a description 
-                                </Text>
-                                <View
-                                  style={
-                                    [
+                                  <Text
+                                    accessibilityLabel="This is a description "
+                                    style={
+                                      [
+                                        {
+                                          "flexShrink": 1,
+                                          "fontSize": 16,
+                                          "lineHeight": 22,
+                                        },
+                                        {
+                                          "color": "#2F343D",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    This is a description 
+                                  </Text>
+                                  <View
+                                    style={
                                       {
                                         "transform": [
                                           {
                                             "translateY": 3,
                                           },
                                         ],
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <ViewManagerAdapter_ExpoImage
-                                    containerViewRef={"[React.ref]"}
-                                    contentFit="contain"
-                                    contentPosition={
-                                      {
-                                        "left": "50%",
-                                        "top": "50%",
                                       }
                                     }
-                                    height={15}
-                                    nativeViewRef={"[React.ref]"}
-                                    onError={[Function]}
-                                    onLoad={[Function]}
-                                    onLoadStart={[Function]}
-                                    onProgress={[Function]}
-                                    placeholder={[]}
-                                    source={
-                                      [
+                                  >
+                                    <ViewManagerAdapter_ExpoImage
+                                      containerViewRef={"[React.ref]"}
+                                      contentFit="contain"
+                                      contentPosition={
                                         {
-                                          "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
-                                        },
-                                      ]
-                                    }
-                                    style={
-                                      {
-                                        "height": 15,
-                                        "width": 15,
+                                          "left": "50%",
+                                          "top": "50%",
+                                        }
                                       }
-                                    }
-                                    transition={null}
-                                    width={15}
-                                  />
-                                </View>
-                              </Text>
-                            </Text>
-                          </View>
-                          <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": undefined,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
+                                      height={15}
+                                      nativeViewRef={"[React.ref]"}
+                                      onError={[Function]}
+                                      onLoad={[Function]}
+                                      onLoadStart={[Function]}
+                                      onProgress={[Function]}
+                                      placeholder={[]}
+                                      source={
+                                        [
+                                          {
+                                            "uri": "https://open.rocket.chat/emoji-custom/nyan_rocket.png",
+                                          },
+                                        ]
+                                      }
+                                      style={
+                                        {
+                                          "height": 15,
+                                          "width": 15,
+                                        }
+                                      }
+                                      transition={null}
+                                      width={15}
+                                    />
+                                  </View>
+                                </Text>
+                              </Text>
+                            </View>
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": undefined,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
                               }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              {
-                                "borderRadius": 4,
-                                "minHeight": 200,
-                                "opacity": 1,
-                                "overflow": "hidden",
-                                "width": "100%",
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
                               }
-                            }
-                          >
-                            <View
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
                               style={
-                                [
-                                  [
-                                    {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
-                                    },
-                                    {
-                                      "borderColor": "#CBCED1",
-                                      "borderWidth": 1,
-                                    },
-                                  ],
-                                  {
-                                    "borderWidth": 0,
-                                    "bottom": 0,
-                                    "left": 0,
-                                    "position": "absolute",
-                                    "right": 0,
-                                    "top": 0,
-                                  },
-                                  {
-                                    "backgroundColor": "#E4E7EA",
-                                  },
-                                ]
+                                {
+                                  "borderRadius": 4,
+                                  "minHeight": 200,
+                                  "overflow": "hidden",
+                                  "width": "100%",
+                                }
                               }
-                            />
-                            <View
-                              style={
-                                [
+                            >
+                              <View
+                                style={
                                   [
+                                    [
+                                      {
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderWidth": 1,
+                                      },
+                                    ],
                                     {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
+                                      "borderWidth": 0,
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "position": "absolute",
+                                      "right": 0,
+                                      "top": 0,
                                     },
                                     {
-                                      "borderColor": "#CBCED1",
-                                      "borderWidth": 1,
+                                      "backgroundColor": "#E4E7EA",
                                     },
-                                  ],
-                                  {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                    "position": "absolute",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                                  ]
+                                }
+                              />
+                              <View
                                 style={
                                   [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 70.2,
-                                    },
                                     [
                                       {
-                                        "lineHeight": 70.2,
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderWidth": 1,
                                       },
-                                      undefined,
                                     ],
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                      "position": "absolute",
                                     },
-                                    {},
                                   ]
                                 }
                               >
-                                
-                              </Text>
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 70.2,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 70.2,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -135116,8 +151914,8 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -135162,260 +151960,318 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel=""
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":ra4:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  undefined.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel=""
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":ra4:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={514}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={515}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
-                      <View
+                      <Text
                         style={
-                          {
-                            "flexDirection": "row",
-                          }
-                        }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
                         }
-                      }
-                    >
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
@@ -135431,121 +152287,130 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": undefined,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "borderRadius": 4,
-                                "minHeight": 200,
-                                "opacity": 1,
-                                "overflow": "hidden",
-                                "width": "100%",
+                                "gap": 4,
                               }
                             }
                           >
                             <View
-                              style={
-                                [
-                                  [
-                                    {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
-                                    },
-                                    {
-                                      "borderColor": "#CBCED1",
-                                      "borderWidth": 1,
-                                    },
-                                  ],
-                                  {
-                                    "borderWidth": 0,
-                                    "bottom": 0,
-                                    "left": 0,
-                                    "position": "absolute",
-                                    "right": 0,
-                                    "top": 0,
-                                  },
-                                  {
-                                    "backgroundColor": "#E4E7EA",
-                                  },
-                                ]
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": undefined,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
                               }
-                            />
-                            <View
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
                               style={
-                                [
-                                  [
-                                    {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
-                                    },
-                                    {
-                                      "borderColor": "#CBCED1",
-                                      "borderWidth": 1,
-                                    },
-                                  ],
-                                  {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                    "position": "absolute",
-                                  },
-                                ]
+                                {
+                                  "borderRadius": 4,
+                                  "minHeight": 200,
+                                  "overflow": "hidden",
+                                  "width": "100%",
+                                }
                               }
                             >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                              <View
                                 style={
                                   [
+                                    [
+                                      {
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderWidth": 1,
+                                      },
+                                    ],
                                     {
-                                      "color": "#2F343D",
-                                      "fontSize": 70.2,
+                                      "borderWidth": 0,
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "position": "absolute",
+                                      "right": 0,
+                                      "top": 0,
                                     },
+                                    {
+                                      "backgroundColor": "#E4E7EA",
+                                    },
+                                  ]
+                                }
+                              />
+                              <View
+                                style={
+                                  [
                                     [
                                       {
-                                        "lineHeight": 70.2,
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderWidth": 1,
                                       },
-                                      undefined,
                                     ],
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                      "position": "absolute",
                                     },
-                                    {},
                                   ]
                                 }
                               >
-                                
-                              </Text>
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 70.2,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 70.2,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -135553,8 +152418,8 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -135599,326 +152464,384 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  multi file.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="multi file"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":ra5:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  multi file.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="multi file"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":ra5:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 46.800000000000004,
-                          "width": 46.800000000000004,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 46.800000000000004,
+                            "width": 46.800000000000004,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={46.800000000000004}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={516}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 46.800000000000004,
-                            "width": 46.800000000000004,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={46.800000000000004}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={46.800000000000004}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 46.800000000000004,
+                                "width": 46.800000000000004,
+                              }
+                            }
+                            transition={null}
+                            width={46.800000000000004}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={517}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
+                          <View
+                            collapsable={false}
+                            style={
+                              {
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
+                          }
+                        />
                       </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "Inter",
+                              "fontSize": 13,
+                              "fontWeight": "400",
+                              "lineHeight": 18,
+                              "textAlign": "left",
+                            },
+                            {
+                              "color": "#6C727A",
+                            },
+                          ]
+                        }
+                      >
+                        10:00 AM
+                      </Text>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontWeight": "400",
-                            "lineHeight": 18,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      10:00 AM
-                    </Text>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-multi file"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-multi file"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="multi file"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                multi file
+                                <Text
+                                  accessibilityLabel="multi file"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  multi file
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
-                      </View>
-                      <View
-                        style={
-                          {
-                            "gap": 4,
-                          }
-                        }
-                      >
                         <View
                           style={
                             {
@@ -135927,247 +152850,257 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                           }
                         >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": undefined,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "borderRadius": 4,
-                                "minHeight": 200,
-                                "opacity": 1,
-                                "overflow": "hidden",
-                                "width": "100%",
+                                "gap": 4,
                               }
                             }
                           >
                             <View
-                              style={
-                                [
-                                  [
-                                    {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
-                                    },
-                                    {
-                                      "borderColor": "#CBCED1",
-                                      "borderWidth": 1,
-                                    },
-                                  ],
-                                  {
-                                    "borderWidth": 0,
-                                    "bottom": 0,
-                                    "left": 0,
-                                    "position": "absolute",
-                                    "right": 0,
-                                    "top": 0,
-                                  },
-                                  {
-                                    "backgroundColor": "#E4E7EA",
-                                  },
-                                ]
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": undefined,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
                               }
-                            />
-                            <View
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
                               style={
-                                [
+                                {
+                                  "borderRadius": 4,
+                                  "minHeight": 200,
+                                  "overflow": "hidden",
+                                  "width": "100%",
+                                }
+                              }
+                            >
+                              <View
+                                style={
                                   [
+                                    [
+                                      {
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderWidth": 1,
+                                      },
+                                    ],
                                     {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
+                                      "borderWidth": 0,
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "position": "absolute",
+                                      "right": 0,
+                                      "top": 0,
                                     },
                                     {
-                                      "borderColor": "#CBCED1",
-                                      "borderWidth": 1,
+                                      "backgroundColor": "#E4E7EA",
                                     },
-                                  ],
-                                  {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                    "position": "absolute",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                                  ]
+                                }
+                              />
+                              <View
                                 style={
                                   [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 70.2,
-                                    },
                                     [
                                       {
-                                        "lineHeight": 70.2,
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderWidth": 1,
                                       },
-                                      undefined,
                                     ],
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                      "position": "absolute",
                                     },
-                                    {},
                                   ]
                                 }
                               >
-                                
-                              </Text>
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 70.2,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 70.2,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
                             </View>
                           </View>
-                        </View>
-                        <View
-                          style={
-                            {
-                              "gap": 4,
-                            }
-                          }
-                        >
                           <View
-                            accessibilityState={
-                              {
-                                "busy": undefined,
-                                "checked": undefined,
-                                "disabled": undefined,
-                                "expanded": undefined,
-                                "selected": undefined,
-                              }
-                            }
-                            accessibilityValue={
-                              {
-                                "max": undefined,
-                                "min": undefined,
-                                "now": undefined,
-                                "text": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               {
-                                "borderRadius": 4,
-                                "minHeight": 200,
-                                "opacity": 1,
-                                "overflow": "hidden",
-                                "width": "100%",
+                                "gap": 4,
                               }
                             }
                           >
                             <View
-                              style={
-                                [
-                                  [
-                                    {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
-                                    },
-                                    {
-                                      "borderColor": "#CBCED1",
-                                      "borderWidth": 1,
-                                    },
-                                  ],
-                                  {
-                                    "borderWidth": 0,
-                                    "bottom": 0,
-                                    "left": 0,
-                                    "position": "absolute",
-                                    "right": 0,
-                                    "top": 0,
-                                  },
-                                  {
-                                    "backgroundColor": "#E4E7EA",
-                                  },
-                                ]
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": undefined,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
                               }
-                            />
-                            <View
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
                               style={
-                                [
+                                {
+                                  "borderRadius": 4,
+                                  "minHeight": 200,
+                                  "overflow": "hidden",
+                                  "width": "100%",
+                                }
+                              }
+                            >
+                              <View
+                                style={
                                   [
+                                    [
+                                      {
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderWidth": 1,
+                                      },
+                                    ],
                                     {
-                                      "borderRadius": 4,
-                                      "minHeight": 200,
-                                      "overflow": "hidden",
-                                      "width": "100%",
+                                      "borderWidth": 0,
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "position": "absolute",
+                                      "right": 0,
+                                      "top": 0,
                                     },
                                     {
-                                      "borderColor": "#CBCED1",
-                                      "borderWidth": 1,
+                                      "backgroundColor": "#E4E7EA",
                                     },
-                                  ],
-                                  {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                    "position": "absolute",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                selectable={false}
+                                  ]
+                                }
+                              />
+                              <View
                                 style={
                                   [
-                                    {
-                                      "color": "#2F343D",
-                                      "fontSize": 70.2,
-                                    },
                                     [
                                       {
-                                        "lineHeight": 70.2,
+                                        "borderRadius": 4,
+                                        "minHeight": 200,
+                                        "overflow": "hidden",
+                                        "width": "100%",
+                                      },
+                                      {
+                                        "borderColor": "#CBCED1",
+                                        "borderWidth": 1,
                                       },
-                                      undefined,
                                     ],
                                     {
-                                      "fontFamily": "custom",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "normal",
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                      "position": "absolute",
                                     },
-                                    {},
                                   ]
                                 }
                               >
-                                
-                              </Text>
+                                <Text
+                                  allowFontScaling={false}
+                                  selectable={false}
+                                  style={
+                                    [
+                                      {
+                                        "color": "#2F343D",
+                                        "fontSize": 70.2,
+                                      },
+                                      [
+                                        {
+                                          "lineHeight": 70.2,
+                                        },
+                                        undefined,
+                                      ],
+                                      {
+                                        "fontFamily": "custom",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "normal",
+                                      },
+                                      {},
+                                    ]
+                                  }
+                                >
+                                  
+                                </Text>
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -136175,8 +153108,8 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -136234,141 +153167,155 @@ exports[`Story Snapshots: WithoutHeader should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":ra6:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":ra6:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-Message"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -136426,141 +153373,155 @@ exports[`Story Snapshots: WithoutHeaderLargeFont should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":ra7:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":ra7:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 46.800000000000004,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 46.800000000000004,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-Message"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Message
+                                <Text
+                                  accessibilityLabel="Message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
diff --git a/app/definitions/rest/v1/omnichannel.ts b/app/definitions/rest/v1/omnichannel.ts
index 0f3162d195e..1f6915f2c39 100644
--- a/app/definitions/rest/v1/omnichannel.ts
+++ b/app/definitions/rest/v1/omnichannel.ts
@@ -136,11 +136,16 @@ export type OmnichannelEndpoints = {
 	};
 
 	'livechat/inquiries.take': {
-		POST: (params: { inquiryId: string }) => void;
+		POST: (params: { inquiryId: string; userId?: string }) => {
+			success: boolean;
+		};
 	};
 
 	'livechat/inquiries.returnAsInquiry': {
-		POST: (params: { roomId: string; departmentId?: string }) => boolean;
+		POST: (params: { roomId: string; departmentId?: string }) => {
+			result: boolean;
+			success: boolean;
+		};
 	};
 
 	'livechat/rooms': {
@@ -251,4 +256,38 @@ export type OmnichannelEndpoints = {
 			};
 		}) => void;
 	};
+	'livechat/agent.status': {
+		POST: (params: { agentId?: string }) => {
+			status: string;
+			success: boolean;
+		};
+	};
+	'livechat/room.closeByUser': {
+		POST: (params: {
+			rid: string;
+			comment?: string;
+			forceClose?: boolean;
+			tags?: string[];
+			generateTranscriptPdf?: boolean;
+			transcriptEmail?: { sendToVisitor: boolean; requestData?: { email?: string; subject?: string } };
+		}) => {
+			success: boolean;
+		};
+	};
+	'livechat/room.forward': {
+		POST: (params: { roomId: string; userId?: string; departmentId?: string }) => {
+			success: boolean;
+		};
+	};
+	'livechat/tags': {
+		GET: () => {
+			tags: ILivechatTag[];
+			success: boolean;
+		};
+	};
+	'livechat/room.resumeOnHold': {
+		POST: (params: { roomId: string }) => {
+			success: boolean;
+		};
+	};
 };
diff --git a/app/definitions/rest/v1/users.ts b/app/definitions/rest/v1/users.ts
index 751cfbf83fb..23ab993504a 100644
--- a/app/definitions/rest/v1/users.ts
+++ b/app/definitions/rest/v1/users.ts
@@ -69,4 +69,7 @@ export type UsersEndpoints = {
 	'users.deleteOwnAccount': {
 		POST: (params: { password: string; confirmRelinquish: boolean }) => { success: boolean };
 	};
+	'users.sendConfirmationEmail': {
+		POST: (params: { email: string }) => { success: boolean };
+	};
 };
diff --git a/app/ee/omnichannel/lib/index.ts b/app/ee/omnichannel/lib/index.ts
index 3b81d091be4..60308b3cb43 100644
--- a/app/ee/omnichannel/lib/index.ts
+++ b/app/ee/omnichannel/lib/index.ts
@@ -1,12 +1,20 @@
 import sdk from '../../../lib/services/sdk';
 import { compareServerVersion } from '../../../lib/methods/helpers';
 import EventEmitter from '../../../lib/methods/helpers/events';
+import { store as reduxStore } from '../../../lib/store/auxStore';
 import subscribeInquiry from './subscriptions/inquiry';
 
 export const isOmnichannelStatusAvailable = (statusLivechat: string | undefined): boolean => statusLivechat === 'available';
 
 // RC 0.26.0
-export const changeLivechatStatus = () => sdk.methodCallWrapper('livechat:changeLivechatStatus');
+export const changeLivechatStatus = () => {
+	const serverVersion = reduxStore.getState().server.version;
+	if (compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '8.0.0')) {
+		return sdk.post('livechat/agent.status');
+	}
+	// Method removed in 8.0.0
+	return sdk.methodCallWrapper('livechat:changeLivechatStatus');
+};
 
 // RC 2.4.0
 // @ts-ignore
@@ -29,7 +37,14 @@ export const takeInquiry = (inquiryId: string, serverVersion: string) => {
 };
 
 // RC 4.26
-export const takeResume = (roomId: string) => sdk.methodCallWrapper('livechat:resumeOnHold', roomId);
+export const takeResume = (roomId: string) => {
+	const serverVersion = reduxStore.getState().server.version;
+	if (compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '8.0.0')) {
+		return sdk.post('livechat/room.resumeOnHold', { roomId });
+	}
+	// Method removed in 8.0.0
+	return sdk.methodCallWrapper('livechat:resumeOnHold', roomId);
+};
 
 class Omnichannel {
 	private inquirySub: { stop: () => void } | null;
@@ -53,5 +68,4 @@ class Omnichannel {
 	};
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const omnichannel = new Omnichannel();
+new Omnichannel();
diff --git a/app/ee/omnichannel/views/QueueListView.tsx b/app/ee/omnichannel/views/QueueListView.tsx
index ba2ed6aeb08..4da97ed00b8 100644
--- a/app/ee/omnichannel/views/QueueListView.tsx
+++ b/app/ee/omnichannel/views/QueueListView.tsx
@@ -67,7 +67,7 @@ const QueueListView = React.memo(() => {
 		navigation.setOptions(options);
 	}, [isMasterDetail, navigation]);
 
-	const getItemLayout = (data: ArrayLike<IOmnichannelRoom> | null | undefined, index: number) => {
+	const getItemLayout = (_data: ArrayLike<IOmnichannelRoom> | null | undefined, index: number) => {
 		const rowHeight = 75 * fontScale;
 		return {
 			length: rowHeight,
diff --git a/app/i18n/locales/ar.json b/app/i18n/locales/ar.json
index 21e8858388d..4c7d4e981f5 100644
--- a/app/i18n/locales/ar.json
+++ b/app/i18n/locales/ar.json
@@ -73,7 +73,11 @@
   "Browser": "المتصفح",
   "Busy": "مشغول",
   "Call_already_ended": "تم انهاء المكالمة بالفعل !",
+  "Call_ended_bold": "*تم إنهاء مكالمة الصوت*",
+  "Call_failed_bold": "*فشلت مكالمة الصوت*",
+  "Call_not_answered_bold": "*لم يتم الرد على مكالمة الصوت*",
   "Call_room_name": "اتصل بـ {{roomName}}",
+  "Call_transferred_bold": "*تم تحويل مكالمة الصوت*",
   "Call_was_canceled_before_being_answered": "تم إلغاء المكالمة قبل الرد عليها",
   "Cancel": "إلغاء",
   "Cancel_and_delete_recording": "إلغاء وحذف التسجيل",
diff --git a/app/i18n/locales/bn-IN.json b/app/i18n/locales/bn-IN.json
index 410bf5ee2a7..adbabf44f03 100644
--- a/app/i18n/locales/bn-IN.json
+++ b/app/i18n/locales/bn-IN.json
@@ -101,11 +101,15 @@
   "Call_already_ended": "কল ইতিমধ্যে শেষ হয়েছে!",
   "Call_back": "কল ফিরে দিন",
   "Call_ended": "কল সমাপ্ত",
+  "Call_ended_bold": "*ভয়েস কল শেষ হয়েছে*",
+  "Call_failed_bold": "*ভয়েস কল ব্যর্থ হয়েছে*",
   "Call_issue": "কল সমস্যা",
+  "Call_not_answered_bold": "*ভয়েস কলের উত্তর দেওয়া হয়নি*",
   "Call_ongoing": "কল চলছে",
   "Call_rejected": "কল প্রত্যাখ্যান করা হয়েছে",
   "Call_room_name": "{{roomName}}-এ কল করুন",
   "Call_started": "কল শুরু হয়েছে",
+  "Call_transferred_bold": "*ভয়েস কল স্থানান্তরিত হয়েছে*",
   "Call_was_canceled_before_being_answered": "কলটি উত্তর দেওয়ার আগে বাতিল করা হয়েছে",
   "Call_was_not_answered": "কলটি উত্তর দেওয়া হয়নি",
   "Calling": "কল করছি",
diff --git a/app/i18n/locales/cs.json b/app/i18n/locales/cs.json
index 6718cc41ef5..c72606b7b7c 100644
--- a/app/i18n/locales/cs.json
+++ b/app/i18n/locales/cs.json
@@ -107,11 +107,15 @@
   "Call_already_ended": "Volání již ukončeno!",
   "Call_back": "Zavolat zpět",
   "Call_ended": "Hovor byl ukončen",
+  "Call_ended_bold": "*Hlasové volání ukončeno*",
+  "Call_failed_bold": "*Hlasové volání selhalo*",
   "Call_issue": "Problém s voláním",
+  "Call_not_answered_bold": "*Hlasové volání nebylo zodpovězeno*",
   "Call_ongoing": "Hovor probíhá",
   "Call_rejected": "Hovor odmítnut",
   "Call_room_name": "Zavolejte {{roomName}}",
   "Call_started": "Hovor zahájen",
+  "Call_transferred_bold": "*Hlasové volání převedeno*",
   "Call_was_canceled_before_being_answered": "Hovor byl zrušen před přijetím",
   "Call_was_not_answered": "Volání nebylo přijato",
   "Calling": "Povolání",
diff --git a/app/i18n/locales/de.json b/app/i18n/locales/de.json
index 4c2ba85c2ef..e0d6cccb2c7 100644
--- a/app/i18n/locales/de.json
+++ b/app/i18n/locales/de.json
@@ -98,9 +98,13 @@
   "Call": "Anruf",
   "Call_already_ended": "Anruf bereits beendet!",
   "Call_ended": "Anruf beendet",
+  "Call_ended_bold": "*Sprachanruf beendet*",
+  "Call_failed_bold": "*Sprachanruf fehlgeschlagen*",
+  "Call_not_answered_bold": "*Sprachanruf nicht beantwortet*",
   "Call_rejected": "Anruf abgelehnt",
   "Call_room_name": "{{roomName}} anrufen",
   "Call_started": "Anruf gestartet",
+  "Call_transferred_bold": "*Sprachanruf übertragen*",
   "Call_was_canceled_before_being_answered": "Anruf wurde vor der Annahme abgebrochen.",
   "Call_was_not_answered": "Anruf wurde nicht beantwortet",
   "Calling": "Rufe …",
diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json
index 20adc12eb90..039513dbe47 100644
--- a/app/i18n/locales/en.json
+++ b/app/i18n/locales/en.json
@@ -107,11 +107,15 @@
   "Call_already_ended": "Call already ended!",
   "Call_back": "Call back",
   "Call_ended": "Call ended",
+  "Call_ended_bold": "*Voice call ended*",
+  "Call_failed_bold": "*Voice call failed*",
   "Call_issue": "Call issue",
+  "Call_not_answered_bold": "*Voice call not answered*",
   "Call_ongoing": "Call ongoing",
   "Call_rejected": "Call rejected",
   "Call_room_name": "Call {{roomName}}",
   "Call_started": "Call started",
+  "Call_transferred_bold": "*Voice call transferred*",
   "Call_was_canceled_before_being_answered": "Call was canceled before being answered",
   "Call_was_not_answered": "Call was not answered",
   "Calling": "Calling",
@@ -157,6 +161,7 @@
   "Clear": "Clear",
   "Clear_cache": "Clear local workspace cache",
   "Clear_cache_loading": "Clearing cache.",
+  "Clear_input": "Clear input",
   "Click_to_join": "Click to join!",
   "Close": "Close",
   "Close_Chat": "Close chat",
diff --git a/app/i18n/locales/es.json b/app/i18n/locales/es.json
index 72e0d6b62ff..412ec836ec0 100644
--- a/app/i18n/locales/es.json
+++ b/app/i18n/locales/es.json
@@ -68,7 +68,11 @@
   "Broadcast_hint": "Sólo los usuarios autorizados pueden escribir nuevos mensajes, el resto podrán responder sobre los mismos.",
   "Busy": "Ocupado",
   "Call_already_ended": "¡!La llamada ya ha finalizado!",
+  "Call_ended_bold": "*Llamada de voz finalizada*",
+  "Call_failed_bold": "*Llamada de voz fallida*",
+  "Call_not_answered_bold": "*Llamada de voz no contestada*",
   "Call_room_name": "Llamar a {{roomName}}",
+  "Call_transferred_bold": "*Llamada de voz transferida*",
   "Call_was_canceled_before_being_answered": "La llamada fue cancelada antes de ser contestada.",
   "Cancel": "Cancelar",
   "Cancel_and_delete_recording": "Cancelar y eliminar grabación",
diff --git a/app/i18n/locales/fi.json b/app/i18n/locales/fi.json
index 377f38d5c34..e9364eea46f 100644
--- a/app/i18n/locales/fi.json
+++ b/app/i18n/locales/fi.json
@@ -90,7 +90,11 @@
   "Call": "Soita",
   "Call_already_ended": "Puhelu on jo päättynyt!",
   "Call_ended": "Puhelu päättyi",
+  "Call_ended_bold": "*Puhelu päättyi*",
+  "Call_failed_bold": "*Puhelu epäonnistui*",
+  "Call_not_answered_bold": "*Puheluun ei vastattu*",
   "Call_room_name": "Kutsu {{roomName}}",
+  "Call_transferred_bold": "*Puhelu siirretty*",
   "Call_was_canceled_before_being_answered": "Puhelu peruttiin ennen kuin siihen vastattiin",
   "Call_was_not_answered": "Puheluun ei vastattu",
   "Calling": "Soitetaan",
diff --git a/app/i18n/locales/fr.json b/app/i18n/locales/fr.json
index eb65e6e5ab8..7baca0dd463 100644
--- a/app/i18n/locales/fr.json
+++ b/app/i18n/locales/fr.json
@@ -78,7 +78,11 @@
   "Browser": "Navigateur",
   "Busy": "Occupé",
   "Call_already_ended": "Appel déjà terminé !",
+  "Call_ended_bold": "*Appel vocal terminé*",
+  "Call_failed_bold": "*Appel vocal échoué*",
+  "Call_not_answered_bold": "*Appel vocal sans réponse*",
   "Call_room_name": "Appeler {{roomName}}",
+  "Call_transferred_bold": "*Appel vocal transféré*",
   "Call_was_canceled_before_being_answered": "L'appel a été annulé avant d'être répondu.",
   "Cancel": "Annuler",
   "Cancel_and_delete_recording": "Annuler et supprimer l'enregistrement",
diff --git a/app/i18n/locales/hi-IN.json b/app/i18n/locales/hi-IN.json
index 051eaa09f5a..4cb02297c70 100644
--- a/app/i18n/locales/hi-IN.json
+++ b/app/i18n/locales/hi-IN.json
@@ -101,11 +101,15 @@
   "Call_already_ended": "कॉल पहले ही समाप्त हो गई है!",
   "Call_back": "कॉल वापस",
   "Call_ended": "कॉल समाप्त हुई",
+  "Call_ended_bold": "*वॉइस कॉल समाप्त हुई*",
+  "Call_failed_bold": "*वॉइस कॉल विफल हो गई*",
   "Call_issue": "कॉल समस्या",
+  "Call_not_answered_bold": "*वॉइस कॉल का जवाब नहीं दिया गया*",
   "Call_ongoing": "कॉल जारी है",
   "Call_rejected": "कॉल अस्वीकृत",
   "Call_room_name": "{{roomName}} को कॉल करें",
   "Call_started": "कॉल शुरू हुई",
+  "Call_transferred_bold": "*वॉइस कॉल स्थानांतरित हो गई*",
   "Call_was_canceled_before_being_answered": "उत्तर देने से पहले कॉल रद्द कर दी गई थी।",
   "Call_was_not_answered": "कॉल का जवाब नहीं दिया गया था",
   "Calling": "कॉलिंग",
diff --git a/app/i18n/locales/hu.json b/app/i18n/locales/hu.json
index 6839e2c30ba..06cca380dbe 100644
--- a/app/i18n/locales/hu.json
+++ b/app/i18n/locales/hu.json
@@ -101,11 +101,15 @@
   "Call_already_ended": "A hívásnak már vége!",
   "Call_back": "Visszahívás",
   "Call_ended": "Hívás befejezve",
+  "Call_ended_bold": "*Hanghívás befejezve*",
+  "Call_failed_bold": "*Hanghívás sikertelen*",
   "Call_issue": "Hívás kiadás",
+  "Call_not_answered_bold": "*Hanghívásra nem válaszoltak*",
   "Call_ongoing": "Hívás folyamatban",
   "Call_rejected": "Hívás elutasítva",
   "Call_room_name": "Hívd a(z) {{roomName}}-t!",
   "Call_started": "Hívás elindítva",
+  "Call_transferred_bold": "*Hanghívás átirányítva*",
   "Call_was_canceled_before_being_answered": "A hívást megszakították, mielőtt fogadták volna.",
   "Call_was_not_answered": "A hívás nem lett fogadva",
   "Calling": "Hívás",
diff --git a/app/i18n/locales/it.json b/app/i18n/locales/it.json
index 4344347fc2f..c3d380f8390 100644
--- a/app/i18n/locales/it.json
+++ b/app/i18n/locales/it.json
@@ -78,7 +78,11 @@
   "Browser": "Browser",
   "Busy": "Occupato",
   "Call_already_ended": "Chiamata già terminata!",
+  "Call_ended_bold": "*Chiamata vocale terminata*",
+  "Call_failed_bold": "*Chiamata vocale fallita*",
+  "Call_not_answered_bold": "*Chiamata vocale senza risposta*",
   "Call_room_name": "Chiama {{roomName}}",
+  "Call_transferred_bold": "*Chiamata vocale trasferita*",
   "Call_was_canceled_before_being_answered": "La chiamata è stata annullata prima di essere risposta.",
   "Cancel": "Annulla",
   "Cancel_and_delete_recording": "Annulla ed elimina la registrazione",
diff --git a/app/i18n/locales/ja.json b/app/i18n/locales/ja.json
index dda45aad4d9..c8566ebc041 100644
--- a/app/i18n/locales/ja.json
+++ b/app/i18n/locales/ja.json
@@ -72,7 +72,11 @@
   "Browser": "ブラウザ",
   "Busy": "取り込み中",
   "Call_already_ended": "通話は終了しています。",
+  "Call_ended_bold": "*通話が終了しました*",
+  "Call_failed_bold": "*通話が失敗しました*",
+  "Call_not_answered_bold": "*通話が応答されませんでした*",
   "Call_room_name": "{{roomName}}を呼び出す",
+  "Call_transferred_bold": "*通話が転送されました*",
   "Call_was_canceled_before_being_answered": "応答される前に通話がキャンセルされました。",
   "Cancel": "キャンセル",
   "Cancel_and_delete_recording": "録音をキャンセルして削除",
diff --git a/app/i18n/locales/nl.json b/app/i18n/locales/nl.json
index 522d23cc72d..be0c1769e00 100644
--- a/app/i18n/locales/nl.json
+++ b/app/i18n/locales/nl.json
@@ -78,7 +78,11 @@
   "Browser": "Browser",
   "Busy": "Bezig",
   "Call_already_ended": "Gesprek al beeïndigd!",
+  "Call_ended_bold": "*Spraakgesprek beëindigd*",
+  "Call_failed_bold": "*Spraakgesprek mislukt*",
+  "Call_not_answered_bold": "*Spraakgesprek niet beantwoord*",
   "Call_room_name": "Bel {{roomName}}",
+  "Call_transferred_bold": "*Spraakgesprek overgedragen*",
   "Call_was_canceled_before_being_answered": "Oproep werd geannuleerd voordat deze werd beantwoord",
   "Cancel": "Annuleren",
   "Cancel_and_delete_recording": "Annuleer en verwijder opname",
diff --git a/app/i18n/locales/nn.json b/app/i18n/locales/nn.json
index d171c7c1707..0b8858a79a8 100644
--- a/app/i18n/locales/nn.json
+++ b/app/i18n/locales/nn.json
@@ -53,8 +53,12 @@
   "Call_again": "Ring igjen",
   "Call_back": "Ring tilbake",
   "Call_ended": "Anrop avsluttet",
+  "Call_ended_bold": "*Stemmesamtale avsluttet*",
+  "Call_failed_bold": "*Stemmesamtale mislyktes*",
+  "Call_not_answered_bold": "*Stemmesamtale ikkje svara*",
   "Call_ongoing": "Samtale pågår",
   "Call_started": "Samtale startet",
+  "Call_transferred_bold": "*Stemmesamtale overført*",
   "Call_was_canceled_before_being_answered": "Samtalen blei avlyst før ho blei svart",
   "Call_was_not_answered": "Anropet ble ikke besvart",
   "Calling": "Ringer",
diff --git a/app/i18n/locales/no.json b/app/i18n/locales/no.json
index 2d5c014ce43..abbc7f10c06 100644
--- a/app/i18n/locales/no.json
+++ b/app/i18n/locales/no.json
@@ -102,10 +102,15 @@
   "Call_already_ended": "Samtalen er allerede avsluttet!",
   "Call_back": "Ring tilbake",
   "Call_ended": "Samtale avsluttet",
+  "Call_ended_bold": "*Stemmesamtale avsluttet*",
+  "Call_failed_bold": "*Stemmesamtale mislyktes*",
   "Call_issue": "Problem med anrop",
+  "Call_not_answered_bold": "*Stemmesamtale ikke besvart*",
   "Call_ongoing": "Samtale pågår",
   "Call_rejected": "Anrop avvist",
+  "Call_room_name": "Ring {{roomName}}",
   "Call_started": "Samtalen startet",
+  "Call_transferred_bold": "*Stemmesamtale overført*",
   "Call_was_canceled_before_being_answered": "Samtalen ble avbrutt før den ble besvart",
   "Call_was_not_answered": "Anropet ble ikke besvart",
   "Calling": "Ringer",
diff --git a/app/i18n/locales/pt-BR.json b/app/i18n/locales/pt-BR.json
index cbd4dfb4eae..9fa76800393 100644
--- a/app/i18n/locales/pt-BR.json
+++ b/app/i18n/locales/pt-BR.json
@@ -105,11 +105,15 @@
   "Call_already_ended": "A chamada já terminou!",
   "Call_back": "Ligue de volta",
   "Call_ended": "Chamada finalizada",
+  "Call_ended_bold": "*Chamada de voz finalizada*",
+  "Call_failed_bold": "*Chamada de voz falhou*",
   "Call_issue": "Chamada com problemas",
+  "Call_not_answered_bold": "*Chamada de voz não atendida*",
   "Call_ongoing": "Chamada em andamento",
   "Call_rejected": "Chamada rejeitada",
   "Call_room_name": "Chamar {{roomName}}",
   "Call_started": "Chamada Iniciada",
+  "Call_transferred_bold": "*Chamada de voz transferida*",
   "Call_was_canceled_before_being_answered": "A chamada foi cancelada antes de ser atendida.",
   "Call_was_not_answered": "A chamada não foi atendida",
   "Calling": "Chamando",
@@ -155,6 +159,7 @@
   "Clear": "Limpar",
   "Clear_cache": "Limpar cache da workspace",
   "Clear_cache_loading": "Limpando cache.",
+  "Clear_input": "Limpar entrada",
   "Click_to_join": "Clique para participar!",
   "Close": "Fechar",
   "Close_Chat": "Fechar conversa",
diff --git a/app/i18n/locales/pt-PT.json b/app/i18n/locales/pt-PT.json
index 4f71d5315db..883d679b1b5 100644
--- a/app/i18n/locales/pt-PT.json
+++ b/app/i18n/locales/pt-PT.json
@@ -71,7 +71,11 @@
   "Browser": "Navegador",
   "Busy": "Ocupado",
   "Call_already_ended": "Chamada já terminada!",
+  "Call_ended_bold": "*Chamada de voz terminada*",
+  "Call_failed_bold": "*Chamada de voz falhou*",
+  "Call_not_answered_bold": "*Chamada de voz não atendida*",
   "Call_room_name": "Ligar para {{roomName}}",
+  "Call_transferred_bold": "*Chamada de voz transferida*",
   "Call_was_canceled_before_being_answered": "A chamada foi cancelada antes de ser atendida.",
   "Cancel": "Cancelar",
   "Cancel_and_delete_recording": "Cancelar e eliminar gravação",
diff --git a/app/i18n/locales/ru.json b/app/i18n/locales/ru.json
index faded076a86..94f904bcd0c 100644
--- a/app/i18n/locales/ru.json
+++ b/app/i18n/locales/ru.json
@@ -88,7 +88,11 @@
   "Call": "Звонок",
   "Call_already_ended": "Вызов уже завершен!",
   "Call_ended": "Звонок завершен",
+  "Call_ended_bold": "*Голосовой звонок завершен*",
+  "Call_failed_bold": "*Голосовой звонок не удался*",
+  "Call_not_answered_bold": "*На голосовой звонок не ответили*",
   "Call_room_name": "Вызвать {{roomName}}",
+  "Call_transferred_bold": "*Голосовой звонок переведен*",
   "Call_was_canceled_before_being_answered": "Звонок был отменен до ответа.",
   "Call_was_not_answered": "Звонок не был отвечен",
   "Calling": "Идет вызов",
diff --git a/app/i18n/locales/sl-SI.json b/app/i18n/locales/sl-SI.json
index 68e8aa5caf7..c1cab9db8ac 100644
--- a/app/i18n/locales/sl-SI.json
+++ b/app/i18n/locales/sl-SI.json
@@ -82,7 +82,11 @@
   "Browser": "Brskalnik",
   "Busy": "Zaseden",
   "Call_already_ended": "Klic je že končan!",
+  "Call_ended_bold": "*Glasovni klic končan*",
+  "Call_failed_bold": "*Glasovni klic ni uspel*",
+  "Call_not_answered_bold": "*Glasovni klic ni bil odgovorjen*",
   "Call_room_name": "Pokliči {{roomName}}",
+  "Call_transferred_bold": "*Glasovni klic prenesen*",
   "Call_was_canceled_before_being_answered": "Klic je bil preklican, preden je bil sprejet.",
   "Cancel": "Prekliči",
   "Cancel_and_delete_recording": "Prekliči in izbriši posnetek",
diff --git a/app/i18n/locales/sv.json b/app/i18n/locales/sv.json
index f22df03c7be..bc8a1477b60 100644
--- a/app/i18n/locales/sv.json
+++ b/app/i18n/locales/sv.json
@@ -90,7 +90,11 @@
   "Call": "Ring",
   "Call_already_ended": "Samtalet är redan avslutat.",
   "Call_ended": "Samtal avslutat",
+  "Call_ended_bold": "*Röstsamtal avslutat*",
+  "Call_failed_bold": "*Röstsamtal misslyckades*",
+  "Call_not_answered_bold": "*Röstsamtal besvarades inte*",
   "Call_room_name": "Ring {{roomName}}",
+  "Call_transferred_bold": "*Röstsamtal överfört*",
   "Call_was_canceled_before_being_answered": "Samtalet avbröts innan det besvarades",
   "Call_was_not_answered": "Samtalet besvarades inte",
   "Calling": "Ringer upp",
diff --git a/app/i18n/locales/ta-IN.json b/app/i18n/locales/ta-IN.json
index ba2776181b8..2905ddd5b06 100644
--- a/app/i18n/locales/ta-IN.json
+++ b/app/i18n/locales/ta-IN.json
@@ -101,11 +101,15 @@
   "Call_already_ended": "மொபைலைப் போன் அழிந்துவிட்டது!",
   "Call_back": "பின்னிருக்க",
   "Call_ended": "அழிந்தது",
+  "Call_ended_bold": "*குரல் அழைப்பு முடிந்தது*",
+  "Call_failed_bold": "*குரல் அழைப்பு தோல்வியடைந்தது*",
   "Call_issue": "கால் கொள்ளை",
+  "Call_not_answered_bold": "*குரல் அழைப்பிற்கு பதில் அளிக்கப்படவில்லை*",
   "Call_ongoing": "கால் நடக்கின்றது",
   "Call_rejected": "குறைந்தது",
   "Call_room_name": "{{roomName}} அழைக்கவும்",
   "Call_started": "கால் ஆரம்பம்",
+  "Call_transferred_bold": "*குரல் அழைப்பு மாற்றப்பட்டது*",
   "Call_was_canceled_before_being_answered": "அழைப்பு பதிலளிக்கப்படுவதற்கு முன்பு ரத்து செய்யப்பட்டது",
   "Call_was_not_answered": "அழிந்தது",
   "Calling": "அழைப்பதில்",
diff --git a/app/i18n/locales/te-IN.json b/app/i18n/locales/te-IN.json
index c6ba8f752b7..1de4179998e 100644
--- a/app/i18n/locales/te-IN.json
+++ b/app/i18n/locales/te-IN.json
@@ -101,11 +101,15 @@
   "Call_already_ended": "కాల్ ఇప్పటివరకు ముగింపుగా ఉంది!",
   "Call_back": "కాల్ బ్యాక్",
   "Call_ended": "కాల్ ముగియింది",
+  "Call_ended_bold": "*వాయిస్ కాల్ ముగిసింది*",
+  "Call_failed_bold": "*వాయిస్ కాల్ విఫలమైంది*",
   "Call_issue": "కాల్ సమస్య",
+  "Call_not_answered_bold": "*వాయిస్ కాల్ జవాబు ఇవ్వబడలేదు*",
   "Call_ongoing": "కాల్ ప్రవర్తిస్తోంది",
   "Call_rejected": "కాల్ తిరస్కరించబడింది",
   "Call_room_name": "{{roomName}} కు కాల్ చేయండి",
   "Call_started": "కాల్ ప్రారంభించబడింది",
+  "Call_transferred_bold": "*వాయిస్ కాల్ బదిలీ చేయబడింది*",
   "Call_was_canceled_before_being_answered": "కాల్ సమాధానం ఇవ్వబడకముందే రద్దు చేయబడింది",
   "Call_was_not_answered": "కాల్ సమాధానించబడలేదు",
   "Calling": "కాల్ చేస్తోంది",
diff --git a/app/i18n/locales/tr.json b/app/i18n/locales/tr.json
index 051fc752a8c..e9bc1da6318 100644
--- a/app/i18n/locales/tr.json
+++ b/app/i18n/locales/tr.json
@@ -72,7 +72,11 @@
   "Browser": "Tarayıcı",
   "Busy": "Meşgul",
   "Call_already_ended": "Çağrı sona erdi!",
+  "Call_ended_bold": "*Sesli arama sona erdi*",
+  "Call_failed_bold": "*Sesli arama başarısız*",
+  "Call_not_answered_bold": "*Sesli arama cevaplanmadı*",
   "Call_room_name": "{{roomName}} araması yap",
+  "Call_transferred_bold": "*Sesli arama aktarıldı*",
   "Call_was_canceled_before_being_answered": "Çağrı, cevaplanmadan önce iptal edildi",
   "Cancel": "İptal et",
   "Cancel_and_delete_recording": "Kaydı iptal et ve sil",
diff --git a/app/i18n/locales/zh-CN.json b/app/i18n/locales/zh-CN.json
index 95d7ee7684c..9b12af2c1fd 100644
--- a/app/i18n/locales/zh-CN.json
+++ b/app/i18n/locales/zh-CN.json
@@ -72,7 +72,11 @@
   "Browser": "浏览器",
   "Busy": "忙碌",
   "Call_already_ended": "通话已经结束！",
+  "Call_ended_bold": "*语音通话已结束*",
+  "Call_failed_bold": "*语音通话失败*",
+  "Call_not_answered_bold": "*语音通话未接听*",
   "Call_room_name": "呼叫{{roomName}}",
+  "Call_transferred_bold": "*语音通话已转接*",
   "Call_was_canceled_before_being_answered": "通话在接听前被取消。",
   "Cancel": "取消",
   "Cancel_and_delete_recording": "取消并删除录音",
diff --git a/app/i18n/locales/zh-TW.json b/app/i18n/locales/zh-TW.json
index b66d5dee1c8..8b19135f6fe 100644
--- a/app/i18n/locales/zh-TW.json
+++ b/app/i18n/locales/zh-TW.json
@@ -72,7 +72,11 @@
   "Browser": "瀏覽器",
   "Busy": "忙碌",
   "Call_already_ended": "通話已經結束！",
+  "Call_ended_bold": "*語音通話已結束*",
+  "Call_failed_bold": "*語音通話失敗*",
+  "Call_not_answered_bold": "*語音通話未接聽*",
   "Call_room_name": "呼叫{{roomName}}",
+  "Call_transferred_bold": "*語音通話已轉接*",
   "Call_was_canceled_before_being_answered": "通話在接聽前被取消",
   "Cancel": "取消",
   "Cancel_and_delete_recording": "取消並刪除錄音",
diff --git a/app/lib/database/utils.test.ts b/app/lib/database/utils.test.ts
index 3c914112c13..93f215c77ef 100644
--- a/app/lib/database/utils.test.ts
+++ b/app/lib/database/utils.test.ts
@@ -3,8 +3,6 @@ import * as utils from './utils';
 describe('sanitizeLikeStringTester', () => {
 	// example chars that shouldn't return
 	const disallowedChars = ',./;[]!@#$%^&*()_-=+~';
-	const sanitizeLikeStringTester = (str: string) =>
-		expect(utils.sanitizeLikeString(`${str}${disallowedChars}`)).toBe(`${str}${'_'.repeat(disallowedChars.length)}`);
 
 	test('render empty', () => {
 		expect(utils.sanitizeLikeString('')).toBe('');
@@ -12,24 +10,14 @@ describe('sanitizeLikeStringTester', () => {
 	});
 
 	// Testing a couple of different alphabets
-	test('render test (latin)', () => {
-		sanitizeLikeStringTester('test123');
-	});
-
-	test('render test (arabic)', () => {
-		sanitizeLikeStringTester('اختبار123');
-	});
-
-	test('render test (russian)', () => {
-		sanitizeLikeStringTester('тест123');
-	});
-
-	test('render test (chinese trad)', () => {
-		sanitizeLikeStringTester('測試123');
-	});
-
-	test('render test (japanese)', () => {
-		sanitizeLikeStringTester('テスト123');
+	test.each([
+		['latin', 'test123'],
+		['arabic', 'اختبار123'],
+		['russian', 'тест123'],
+		['chineseTrad', '測試123'],
+		['japanese', 'テスト123']
+	])('render test (%s)', (_, str) => {
+		expect(utils.sanitizeLikeString(`${str}${disallowedChars}`)).toBe(`${str}${'_'.repeat(disallowedChars.length)}`);
 	});
 });
 
diff --git a/app/lib/encryption/encryption.ts b/app/lib/encryption/encryption.ts
index 8a1e50c5762..eb09d56b68e 100644
--- a/app/lib/encryption/encryption.ts
+++ b/app/lib/encryption/encryption.ts
@@ -596,7 +596,7 @@ class Encryption {
 		return roomE2E.encryptFile(rid, file);
 	};
 
-	decryptFile: TDecryptFile = async (messageId, path, encryption, originalChecksum) => {
+	decryptFile: TDecryptFile = async (_messageId, path, encryption, originalChecksum) => {
 		const decryptedFile = await decryptAESCTR(path, encryption.key.k, encryption.iv);
 		if (decryptedFile) {
 			const checksum = await calculateFileChecksum(decryptedFile);
diff --git a/app/lib/encryption/helpers/base64-js/index.ts b/app/lib/encryption/helpers/base64-js/index.ts
index 7a77af0f268..343a8161150 100644
--- a/app/lib/encryption/helpers/base64-js/index.ts
+++ b/app/lib/encryption/helpers/base64-js/index.ts
@@ -44,7 +44,7 @@ export const byteLength = (b64: string): number => {
 	return ((validLen + placeHoldersLen) * 3) / 4 - placeHoldersLen;
 };
 
-const _byteLength = (b64: string, validLen: number, placeHoldersLen: number) =>
+const _byteLength = (_b64: string, validLen: number, placeHoldersLen: number) =>
 	((validLen + placeHoldersLen) * 3) / 4 - placeHoldersLen;
 
 export const toByteArray = (b64: string): any[] | Uint8Array => {
diff --git a/app/lib/encryption/room.ts b/app/lib/encryption/room.ts
index 685ddb214eb..04058659758 100644
--- a/app/lib/encryption/room.ts
+++ b/app/lib/encryption/room.ts
@@ -500,7 +500,7 @@ export default class EncryptionRoom {
 		return message;
 	};
 
-	encryptFile = async (rid: string, file: TSendFileMessageFileInfo): TEncryptFileResult => {
+	encryptFile = async (_rid: string, file: TSendFileMessageFileInfo): TEncryptFileResult => {
 		const { path } = file;
 		const vectorBuffer = b64ToBuffer(await randomBytes(16));
 		const keyBuffer = b64ToBuffer(await generateAESCTRKey());
diff --git a/app/lib/helpers/formatText.ts b/app/lib/helpers/formatText.ts
index 2273134c85d..d1410002ab0 100644
--- a/app/lib/helpers/formatText.ts
+++ b/app/lib/helpers/formatText.ts
@@ -2,5 +2,5 @@
 export const formatText = (text: string): string =>
 	text.replace(
 		new RegExp('(?:<|<)((?:https|http):\\/\\/[^\\|]+)\\|(.+?)(?=>|>)(?:>|>)', 'gm'),
-		(match, url, title) => `[${title}](${url})`
+		(_match, url, title) => `[${title}](${url})`
 	);
diff --git a/app/lib/hooks/useShortnameToUnicode/index.tsx b/app/lib/hooks/useShortnameToUnicode/index.tsx
index ebad540176d..c6118456c89 100644
--- a/app/lib/hooks/useShortnameToUnicode/index.tsx
+++ b/app/lib/hooks/useShortnameToUnicode/index.tsx
@@ -33,7 +33,7 @@ const useShortnameToUnicode = (isEmojiPicker?: boolean) => {
 	const convertAsciiEmoji = useAppSelector(state => getUserSelector(state)?.settings?.preferences?.convertAsciiEmoji);
 	const formatShortnameToUnicode = (str: string) => {
 		str = str.replace(shortnamePattern, replaceShortNameWithUnicode);
-		str = str.replace(regAscii, (entire, m1, m2, m3) => {
+		str = str.replace(regAscii, (entire, _m1, m2, m3) => {
 			if (!m3 || !(unescapeHTML(m3) in ascii)) {
 				// if the ascii doesnt exist just return the entire match
 				return entire;
diff --git a/app/lib/hooks/useVideoConf/StartACallActionSheet.tsx b/app/lib/hooks/useVideoConf/StartACallActionSheet.tsx
index 24181810a1f..94e25374439 100644
--- a/app/lib/hooks/useVideoConf/StartACallActionSheet.tsx
+++ b/app/lib/hooks/useVideoConf/StartACallActionSheet.tsx
@@ -1,6 +1,6 @@
 import { CameraView } from 'expo-camera';
 import React, { useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useDispatch } from 'react-redux';
 
@@ -28,13 +28,15 @@ export default function StartACallActionSheet({
 	const [cam, setCam] = useState(false);
 	const [containerWidth, setContainerWidth] = useState(0);
 	const { bottom } = useSafeAreaInsets();
+	const { height, width } = useWindowDimensions();
 
 	const username = useAppSelector(state => getUserSelector(state).username);
 	const calling = useAppSelector(state => state.videoConf.calling);
 	const dispatch = useDispatch();
 
 	const user = useUserData(rid);
-
+	const isPortrait = height > width;
+	const actionSheetContainerHeight = isPortrait ? '90%' : '75%';
 	React.useEffect(
 		() => () => {
 			if (calling) {
@@ -46,7 +48,7 @@ export default function StartACallActionSheet({
 
 	return (
 		<View
-			style={[style.actionSheetContainer, { paddingBottom: bottom }]}
+			style={[style.actionSheetContainer, { paddingBottom: bottom, height: actionSheetContainerHeight }]}
 			onLayout={e => setContainerWidth(e.nativeEvent.layout.width / 2)}>
 			{calling && roomType === SubscriptionType.DIRECT ? <Ringer ringer={ERingerSounds.DIALTONE} /> : null}
 			<CallHeader
@@ -89,8 +91,7 @@ export default function StartACallActionSheet({
 
 const style = StyleSheet.create({
 	actionSheetContainer: {
-		paddingHorizontal: 24,
-		flex: 1
+		paddingHorizontal: 24
 	},
 	actionSheetPhotoContainer: {
 		justifyContent: 'center',
diff --git a/app/lib/hooks/useVideoConf/index.tsx b/app/lib/hooks/useVideoConf/index.tsx
index 0c87ee73f39..d70f0650d04 100644
--- a/app/lib/hooks/useVideoConf/index.tsx
+++ b/app/lib/hooks/useVideoConf/index.tsx
@@ -31,7 +31,6 @@ export const useVideoConf = (
 ): { showInitCallActionSheet: () => Promise<void>; callEnabled: boolean; disabledTooltip?: boolean } => {
 	const user = useAppSelector(state => getUserSelector(state));
 	const serverVersion = useAppSelector(state => state.server.version);
-
 	const { callEnabled, disabledTooltip, roomType } = useVideoConfCall(rid);
 
 	const [permission, requestPermission] = useCameraPermissions();
@@ -61,7 +60,10 @@ export const useVideoConf = (
 			if (canInit) {
 				showActionSheet({
 					children: <StartACallActionSheet rid={rid} roomType={roomType} />,
-					snaps: [480]
+					portraitSnaps: ['60%'],
+					landscapeSnaps: ['90%'],
+					enableContentPanningGesture: false,
+					fullContainer: true
 				});
 
 				if (!permission?.granted) {
diff --git a/app/lib/methods/actions.test.ts b/app/lib/methods/actions.test.ts
new file mode 100644
index 00000000000..6bf08853022
--- /dev/null
+++ b/app/lib/methods/actions.test.ts
@@ -0,0 +1,253 @@
+import { ActionTypes, ModalActions } from '../../containers/UIKit/interfaces';
+import { generateTriggerId, handlePayloadUserInteraction, triggerAction } from './actions';
+import EventEmitter from './helpers/events';
+import fetch from './helpers/fetch';
+import Navigation from '../navigation/appNavigation';
+
+jest.mock('./helpers', () => ({
+	random: jest.fn(() => 'trigger-fixed-id')
+}));
+
+jest.mock('./helpers/fetch', () => jest.fn());
+
+jest.mock('./helpers/events', () => ({
+	emit: jest.fn()
+}));
+
+jest.mock('../navigation/appNavigation', () => ({
+	navigate: jest.fn()
+}));
+
+jest.mock('../services/sdk', () => ({
+	__esModule: true,
+	default: {
+		current: {
+			currentLogin: {
+				userId: 'user-id',
+				authToken: 'auth-token'
+			},
+			client: {
+				host: 'https://chat.example.com'
+			}
+		}
+	}
+}));
+
+const mockedFetch = fetch as jest.MockedFunction<typeof fetch>;
+const mockedEmit = EventEmitter.emit as jest.MockedFunction<typeof EventEmitter.emit>;
+const mockedNavigate = Navigation.navigate as jest.MockedFunction<typeof Navigation.navigate>;
+
+describe('actions', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('handlePayloadUserInteraction', () => {
+		it('returns undefined when trigger id is unknown', () => {
+			expect(handlePayloadUserInteraction(ModalActions.OPEN, { triggerId: 'unknown', viewId: 'view-id' })).toBeUndefined();
+		});
+
+		it('navigates for modal.open and returns modal.open', () => {
+			const triggerId = generateTriggerId('app-id');
+
+			const result = handlePayloadUserInteraction(ModalActions.OPEN, {
+				triggerId,
+				view: { id: 'view-id' }
+			});
+
+			expect(result).toBe(ModalActions.OPEN);
+			expect(mockedNavigate).toHaveBeenCalledWith('ModalBlockView', {
+				data: expect.objectContaining({
+					appId: 'app-id',
+					triggerId,
+					viewId: 'view-id'
+				})
+			});
+		});
+	});
+
+	describe('triggerAction', () => {
+		const actionInput = {
+			type: ActionTypes.ACTION,
+			actionId: 'action-id',
+			appId: 'app-id',
+			container: { type: 'message', id: 'container-id' } as const,
+			mid: 'message-id',
+			rid: 'room-id',
+			blockId: 'block-id',
+			value: 'value'
+		};
+
+		it('handles modal.open response', async () => {
+			mockedFetch.mockResolvedValueOnce({
+				ok: true,
+				text: () =>
+					Promise.resolve(
+						JSON.stringify({
+							type: ModalActions.OPEN,
+							triggerId: 'trigger-fixed-id',
+							view: { id: 'view-open-id' }
+						})
+					)
+			} as Response);
+
+			const result = await triggerAction(actionInput);
+
+			expect(result).toBe(ModalActions.OPEN);
+			expect(mockedNavigate).toHaveBeenCalledWith('ModalBlockView', {
+				data: expect.objectContaining({
+					appId: 'app-id',
+					triggerId: 'trigger-fixed-id',
+					viewId: 'view-open-id'
+				})
+			});
+			expect(mockedFetch).toHaveBeenCalledWith(
+				'https://chat.example.com/api/apps/ui.interaction/app-id/',
+				expect.objectContaining({
+					method: 'POST',
+					headers: expect.objectContaining({
+						'X-Auth-Token': 'auth-token',
+						'X-User-Id': 'user-id'
+					})
+				})
+			);
+		});
+
+		it('handles modal.update response', async () => {
+			mockedFetch.mockResolvedValueOnce({
+				ok: true,
+				text: () =>
+					Promise.resolve(
+						JSON.stringify({
+							type: ModalActions.UPDATE,
+							triggerId: 'trigger-fixed-id',
+							viewId: 'view-update-id'
+						})
+					)
+			} as Response);
+
+			const result = await triggerAction(actionInput);
+
+			expect(result).toBe(ModalActions.UPDATE);
+			expect(mockedEmit).toHaveBeenCalledWith(
+				'view-update-id',
+				expect.objectContaining({
+					type: ModalActions.UPDATE,
+					appId: 'app-id',
+					triggerId: 'trigger-fixed-id',
+					viewId: 'view-update-id'
+				})
+			);
+		});
+
+		it('handles errors response', async () => {
+			mockedFetch.mockResolvedValueOnce({
+				ok: true,
+				text: () =>
+					Promise.resolve(
+						JSON.stringify({
+							type: ModalActions.ERRORS,
+							triggerId: 'trigger-fixed-id',
+							viewId: 'view-errors-id'
+						})
+					)
+			} as Response);
+
+			const result = await triggerAction(actionInput);
+
+			expect(result).toBe(ModalActions.ERRORS);
+			expect(mockedEmit).toHaveBeenCalledWith(
+				'view-errors-id',
+				expect.objectContaining({
+					type: ModalActions.ERRORS,
+					appId: 'app-id',
+					triggerId: 'trigger-fixed-id',
+					viewId: 'view-errors-id'
+				})
+			);
+		});
+
+		it('returns modal.close for explicit close response', async () => {
+			mockedFetch.mockResolvedValueOnce({
+				ok: true,
+				text: () =>
+					Promise.resolve(
+						JSON.stringify({
+							type: ModalActions.CLOSE
+						})
+					)
+			} as Response);
+
+			const result = await triggerAction(actionInput);
+
+			expect(result).toBe(ModalActions.CLOSE);
+		});
+
+		it('returns modal.close for empty response body with ok status', async () => {
+			mockedFetch.mockResolvedValueOnce({
+				ok: true,
+				text: () => Promise.resolve('')
+			} as Response);
+
+			const result = await triggerAction(actionInput);
+
+			expect(result).toBe(ModalActions.CLOSE);
+		});
+
+		it('throws when request is not ok', async () => {
+			mockedFetch.mockResolvedValueOnce({
+				ok: false,
+				status: 500
+			} as Response);
+
+			await expect(triggerAction(actionInput)).rejects.toThrow('Failed to trigger action: 500');
+		});
+
+		it('throws when response body is malformed JSON', async () => {
+			mockedFetch.mockResolvedValueOnce({
+				ok: true,
+				text: () => Promise.resolve('{invalid json}')
+			} as Response);
+
+			await expect(triggerAction(actionInput)).rejects.toThrow('Invalid JSON response from server');
+		});
+
+		it('throws when response has unknown modal interaction type', async () => {
+			mockedFetch.mockResolvedValueOnce({
+				ok: true,
+				text: () =>
+					Promise.resolve(
+						JSON.stringify({
+							type: 'unknown.legacy',
+							triggerId: 'trigger-fixed-id'
+						})
+					)
+			} as Response);
+
+			await expect(triggerAction(actionInput)).rejects.toThrow('Unknown modal interaction type: unknown.legacy');
+		});
+
+		it('invalidates trigger id after processing', async () => {
+			mockedFetch.mockResolvedValueOnce({
+				ok: true,
+				text: () =>
+					Promise.resolve(
+						JSON.stringify({
+							type: ModalActions.UPDATE,
+							triggerId: 'trigger-fixed-id',
+							viewId: 'view-id'
+						})
+					)
+			} as Response);
+
+			await triggerAction(actionInput);
+
+			const staleResult = handlePayloadUserInteraction(ModalActions.UPDATE, {
+				triggerId: 'trigger-fixed-id',
+				viewId: 'view-id'
+			});
+
+			expect(staleResult).toBeUndefined();
+		});
+	});
+});
diff --git a/app/lib/methods/actions.ts b/app/lib/methods/actions.ts
index 06f98147847..7945f9ad7a5 100644
--- a/app/lib/methods/actions.ts
+++ b/app/lib/methods/actions.ts
@@ -1,4 +1,7 @@
-import { type ITriggerAction, type IUserInteraction, ModalActions } from '../../containers/UIKit/interfaces';
+import { type ServerInteraction } from '@rocket.chat/ui-kit';
+
+import { type ITriggerAction, ModalActions, type TModalAction } from '../../containers/UIKit/interfaces';
+import { toServerModalInteractionType, toUserInteraction } from '../../containers/UIKit/interactionAdapters';
 import EventEmitter from './helpers/events';
 import fetch from './helpers/fetch';
 import { random } from './helpers';
@@ -20,21 +23,31 @@ export const generateTriggerId = (appId?: string): string => {
 	return triggerId;
 };
 
+type THandledServerInteractionType = Extract<ServerInteraction, { type: 'modal.open' | 'modal.update' | 'errors' }>['type'];
+type THandledServerPayload = {
+	triggerId: string;
+	viewId?: string;
+	view?: { id?: string };
+	appId?: string;
+	[key: string]: unknown;
+};
+
 export const handlePayloadUserInteraction = (
-	type: ModalActions,
-	{ triggerId, ...data }: IUserInteraction
-): ModalActions | undefined => {
+	type: THandledServerInteractionType,
+	{ triggerId, ...data }: THandledServerPayload
+): TModalAction | undefined => {
 	if (!triggersId.has(triggerId)) {
 		return;
 	}
 
-	const appId = invalidateTriggerId(triggerId);
-	if (!appId) {
+	const triggerAppId = invalidateTriggerId(triggerId);
+	const payloadAppId = data.appId ?? triggerAppId;
+	if (!payloadAppId) {
 		return;
 	}
 
 	const { view } = data;
-	let { viewId } = data;
+	let { viewId } = data as { viewId?: string };
 
 	if (view && view.id) {
 		viewId = view.id;
@@ -44,35 +57,35 @@ export const handlePayloadUserInteraction = (
 		return;
 	}
 
-	if ([ModalActions.ERRORS].includes(type)) {
+	if (type === ModalActions.ERRORS) {
 		EventEmitter.emit(viewId, {
+			...data,
+			appId: payloadAppId,
 			type,
 			triggerId,
-			viewId,
-			appId,
-			...data
-		});
+			viewId
+		} as any);
 		return ModalActions.ERRORS;
 	}
 
-	if ([ModalActions.UPDATE].includes(type)) {
+	if (type === ModalActions.UPDATE) {
 		EventEmitter.emit(viewId, {
+			...data,
+			appId: payloadAppId,
 			type,
 			triggerId,
-			viewId,
-			appId,
-			...data
-		});
+			viewId
+		} as any);
 		return ModalActions.UPDATE;
 	}
 
-	if ([ModalActions.OPEN].includes(type) || [ModalActions.MODAL].includes(type)) {
+	if (type === ModalActions.OPEN) {
 		Navigation.navigate('ModalBlockView', {
 			data: {
+				...data,
+				appId: payloadAppId,
 				triggerId,
-				viewId,
-				appId,
-				...data
+				viewId
 			}
 		});
 		return ModalActions.OPEN;
@@ -81,49 +94,79 @@ export const handlePayloadUserInteraction = (
 	return ModalActions.CLOSE;
 };
 
-export function triggerAction({ type, actionId, appId, rid, mid, viewId, container, ...rest }: ITriggerAction) {
-	return new Promise<ModalActions | undefined | void>(async (resolve, reject) => {
-		const triggerId = generateTriggerId(appId);
+export async function triggerAction({
+	type,
+	actionId,
+	appId,
+	rid,
+	mid,
+	viewId,
+	container,
+	...rest
+}: ITriggerAction): Promise<TModalAction | undefined | void> {
+	const triggerId = generateTriggerId(appId);
+	const payload = rest.payload ?? rest.value;
+
+	try {
+		const { userId, authToken } = sdk.current.currentLogin;
+		const { host } = sdk.current.client;
+		const interaction = toUserInteraction({
+			type,
+			actionId,
+			appId,
+			rid,
+			mid,
+			viewId,
+			container,
+			payload,
+			blockId: rest.blockId,
+			value: rest.value,
+			view: rest.view,
+			isCleared: rest.isCleared,
+			triggerId
+		});
+
+		// we need to use fetch because this.sdk.post add /v1 to url
+		const result = await fetch(`${host}/api/apps/ui.interaction/${appId}/`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				'X-Auth-Token': authToken,
+				'X-User-Id': userId
+			},
+			body: JSON.stringify(interaction)
+		});
+
+		if (!result.ok) {
+			throw new Error(`Failed to trigger action: ${result.status}`);
+		}
 
-		const payload = rest.payload || rest;
+		const text = await result.text();
+		if (!text || text.trim() === '') {
+			// modal.close has no body, but returns ok status
+			return ModalActions.CLOSE;
+		}
 
+		let parsed: { type?: string; [key: string]: unknown };
 		try {
-			const { userId, authToken } = sdk.current.currentLogin;
-			const { host } = sdk.current.client;
-
-			// we need to use fetch because this.sdk.post add /v1 to url
-			const result = await fetch(`${host}/api/apps/ui.interaction/${appId}/`, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-					'X-Auth-Token': authToken,
-					'X-User-Id': userId
-				},
-				body: JSON.stringify({
-					type,
-					actionId,
-					payload,
-					container,
-					mid,
-					rid,
-					triggerId,
-					viewId
-				})
-			});
-
-			try {
-				const { type: interactionType, ...data } = await result.json();
-				return resolve(handlePayloadUserInteraction(interactionType, data));
-			} catch (e) {
-				// modal.close has no body, so result.json will fail
-				// but it returns ok status
-				if (result.ok) {
-					return resolve();
-				}
-			}
-		} catch (e) {
-			// do nothing
+			parsed = JSON.parse(text);
+		} catch {
+			throw new Error('Invalid JSON response from server');
+		}
+
+		const { type: interactionType, ...data } = parsed;
+		const modalType = toServerModalInteractionType(interactionType ?? '');
+		if (!modalType) {
+			throw new Error(`Unknown modal interaction type: ${interactionType ?? 'undefined'}`);
 		}
-		return reject();
-	});
+		if (modalType === ModalActions.CLOSE) {
+			return ModalActions.CLOSE;
+		}
+
+		return handlePayloadUserInteraction(modalType, data as THandledServerPayload);
+	} catch (e) {
+		throw e instanceof Error ? e : new Error('Failed to trigger action');
+	} finally {
+		invalidateTriggerId(triggerId);
+	}
 }
diff --git a/app/lib/methods/search.ts b/app/lib/methods/search.ts
index d6f1df26750..0b04e886bab 100644
--- a/app/lib/methods/search.ts
+++ b/app/lib/methods/search.ts
@@ -138,7 +138,7 @@ export const search = async ({ text = '', filterUsers = true, filterRooms = true
 		if (searchText && localSearchData.length < 7) {
 			const { users, rooms } = (await Promise.race([
 				spotlight(searchText, usernames, { users: filterUsers, rooms: filterRooms, mentions: true }, rid),
-				new Promise((resolve, reject) => (debounce = reject))
+				new Promise((_resolve, reject) => (debounce = reject))
 			])) as { users: ISearch[]; rooms: ISearch[] };
 
 			if (filterUsers) {
diff --git a/app/lib/methods/serializeAsciiUrl.test.ts b/app/lib/methods/serializeAsciiUrl.test.ts
index 0f58953c6cf..662a51c93cf 100644
--- a/app/lib/methods/serializeAsciiUrl.test.ts
+++ b/app/lib/methods/serializeAsciiUrl.test.ts
@@ -19,10 +19,10 @@ describe('Serialize ASCII url on ios', () => {
 describe('Serialize ASCII url on android', () => {
 	jest.mock('react-native', () => ({ Platform: { OS: 'android' } }));
 	// By default android converts ASCII addresses
-	// test('ASCII url', () => {
-	// 	const result = serializeAsciiUrl(ASCIIUrl);
-	// 	expect(result).toBe('filename.png');
-	// });
+	test('ASCII url', () => {
+		const result = serializeAsciiUrl(ASCIIUrl);
+		expect(result).toBe(ASCIIUrlSerialized);
+	});
 	test('Non ASCII url', () => {
 		const result = serializeAsciiUrl(NonASCIIUrl);
 		expect(result).toBe(NonASCIIUrl);
diff --git a/app/lib/methods/triggerActions.test.ts b/app/lib/methods/triggerActions.test.ts
new file mode 100644
index 00000000000..b8010df8910
--- /dev/null
+++ b/app/lib/methods/triggerActions.test.ts
@@ -0,0 +1,112 @@
+import { ActionTypes, ModalActions } from '../../containers/UIKit/interfaces';
+import Navigation from '../navigation/appNavigation';
+import { triggerAction } from './actions';
+import { triggerBlockAction, triggerCancel, triggerSubmitView } from './triggerActions';
+
+jest.mock('../navigation/appNavigation', () => ({
+	back: jest.fn()
+}));
+
+jest.mock('./actions', () => ({
+	triggerAction: jest.fn()
+}));
+
+const mockedTriggerAction = triggerAction as jest.MockedFunction<typeof triggerAction>;
+const mockedBack = Navigation.back as jest.MockedFunction<typeof Navigation.back>;
+
+describe('triggerActions wrappers', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('triggerSubmitView', () => {
+		const submitInput = {
+			viewId: 'view-id',
+			appId: 'app-id',
+			payload: {
+				view: {
+					id: 'view-id',
+					state: {}
+				}
+			}
+		};
+
+		it('passes submit payload to triggerAction', async () => {
+			mockedTriggerAction.mockResolvedValueOnce(ModalActions.UPDATE);
+
+			await triggerSubmitView(submitInput as any);
+
+			expect(mockedTriggerAction).toHaveBeenCalledWith({
+				type: ActionTypes.SUBMIT,
+				...submitInput
+			});
+		});
+
+		it('goes back when triggerAction returns undefined', async () => {
+			mockedTriggerAction.mockResolvedValueOnce(undefined);
+
+			await triggerSubmitView(submitInput as any);
+
+			expect(mockedBack).toHaveBeenCalledTimes(1);
+		});
+
+		it('goes back when triggerAction returns modal.close', async () => {
+			mockedTriggerAction.mockResolvedValueOnce(ModalActions.CLOSE);
+
+			await triggerSubmitView(submitInput as any);
+
+			expect(mockedBack).toHaveBeenCalledTimes(1);
+		});
+
+		it('does not go back for modal.update', async () => {
+			mockedTriggerAction.mockResolvedValueOnce(ModalActions.UPDATE);
+
+			await triggerSubmitView(submitInput as any);
+
+			expect(mockedBack).not.toHaveBeenCalled();
+		});
+
+		it('does not go back for modal.open', async () => {
+			mockedTriggerAction.mockResolvedValueOnce(ModalActions.OPEN);
+
+			await triggerSubmitView(submitInput as any);
+
+			expect(mockedBack).not.toHaveBeenCalled();
+		});
+	});
+
+	it('passes cancel payload to triggerAction', () => {
+		const input = {
+			view: { id: 'view-id' },
+			appId: 'app-id',
+			viewId: 'view-id',
+			isCleared: false
+		};
+
+		triggerCancel(input as any);
+
+		expect(mockedTriggerAction).toHaveBeenCalledWith({
+			type: ActionTypes.CLOSED,
+			...input
+		});
+	});
+
+	it('passes block action payload to triggerAction', () => {
+		const input = {
+			actionId: 'action-id',
+			appId: 'app-id',
+			container: { type: 'message', id: 'container-id' },
+			value: 'value',
+			rid: 'room-id',
+			mid: 'message-id',
+			blockId: 'block-id'
+		};
+
+		triggerBlockAction(input as any);
+
+		expect(mockedTriggerAction).toHaveBeenCalledWith({
+			type: ActionTypes.ACTION,
+			...input
+		});
+	});
+});
diff --git a/app/lib/services/restApi.ts b/app/lib/services/restApi.ts
index fae53447715..3b0d50e2a7b 100644
--- a/app/lib/services/restApi.ts
+++ b/app/lib/services/restApi.ts
@@ -106,8 +106,14 @@ export const forgotPassword = (email: string) =>
 	// RC 0.64.0
 	sdk.post('users.forgotPassword', { email });
 
-export const sendConfirmationEmail = (email: string): Promise<{ message: string; success: boolean }> =>
-	sdk.methodCallWrapper('sendConfirmationEmail', email);
+export const sendConfirmationEmail = (email: string): Promise<{ success: boolean }> => {
+	const serverVersion = reduxStore.getState().server.version;
+	if (compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '8.0.0')) {
+		return sdk.post('users.sendConfirmationEmail', { email });
+	}
+
+	return sdk.methodCallWrapper('sendConfirmationEmail', email);
+};
 
 export const spotlight = (
 	search: string,
@@ -411,11 +417,15 @@ export const getTeamListRoom = ({
 };
 
 export const closeLivechat = (rid: string, comment?: string, tags?: string[]) => {
+	const serverVersion = reduxStore.getState().server.version;
 	// RC 3.2.0
 	let params;
 	if (tags && tags?.length) {
 		params = { tags };
 	}
+	if (compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '8.0.0')) {
+		return sdk.post('livechat/room.closeByUser', { rid, comment, ...params });
+	}
 	// RC 0.29.0
 	return sdk.methodCallWrapper('livechat:closeRoom', rid, comment, { clientAction: true, ...params });
 };
@@ -443,9 +453,14 @@ export const returnLivechat = (rid: string, departmentId?: string): Promise<any>
 
 export const onHoldLivechat = (roomId: string) => sdk.post('livechat/room.onHold', { roomId });
 
-export const forwardLivechat = (transferData: any) =>
+export const forwardLivechat = (transferData: any) => {
+	const serverVersion = reduxStore.getState().server.version;
+	if (compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '8.0.0')) {
+		return sdk.post('livechat/room.forward', transferData);
+	}
 	// RC 0.36.0
-	sdk.methodCallWrapper('livechat:transfer', transferData);
+	return sdk.methodCallWrapper('livechat:transfer', transferData);
+};
 
 export const getDepartmentInfo = (departmentId: string) =>
 	// RC 2.2.0
@@ -489,9 +504,18 @@ export const getRoutingConfig = async (): Promise<{
 	return sdk.methodCallWrapper('livechat:getRoutingConfig');
 };
 
-export const getTagsList = (): Promise<ILivechatTag[]> =>
+export const getTagsList = async (): Promise<ILivechatTag[]> => {
+	const serverVersion = reduxStore.getState().server.version;
+	if (compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '8.0.0')) {
+		const result = await sdk.get('livechat/tags');
+		if (result.success) {
+			return result.tags || [];
+		}
+		return [];
+	}
 	// RC 2.0.0
-	sdk.methodCallWrapper('livechat:getTagsList');
+	return sdk.methodCallWrapper('livechat:getTagsList');
+};
 
 export const getAgentDepartments = (uid: string) =>
 	// RC 2.4.0
diff --git a/app/sagas/createChannel.js b/app/sagas/createChannel.js
index caa54482011..2916653cfb4 100644
--- a/app/sagas/createChannel.js
+++ b/app/sagas/createChannel.js
@@ -61,7 +61,7 @@ const handleRequest = function* handleRequest({ data }) {
 			const db = database.active;
 			const subCollection = db.get('subscriptions');
 			yield db.write(async () => {
-				await subCollection.create((s) => {
+				await subCollection.create(s => {
 					s._raw = sanitizedRaw({ id: sub.rid }, subCollection.schema);
 					Object.assign(s, sub);
 				});
diff --git a/app/sagas/createDiscussion.js b/app/sagas/createDiscussion.js
index 0d43e8de4cb..526b3b29828 100644
--- a/app/sagas/createDiscussion.js
+++ b/app/sagas/createDiscussion.js
@@ -23,7 +23,7 @@ const handleRequest = function* handleRequest({ data }) {
 				const db = database.active;
 				const subCollection = db.get('subscriptions');
 				yield db.write(async () => {
-					await subCollection.create((s) => {
+					await subCollection.create(s => {
 						s._raw = sanitizedRaw({ id: sub.rid }, subCollection.schema);
 						Object.assign(s, sub);
 					});
diff --git a/app/sagas/deepLinking.js b/app/sagas/deepLinking.js
index 7afcadc7b92..d1d57dedf44 100644
--- a/app/sagas/deepLinking.js
+++ b/app/sagas/deepLinking.js
@@ -46,7 +46,7 @@ const waitForNavigation = () => {
 	if (Navigation.navigationRef.current) {
 		return Promise.resolve();
 	}
-	return new Promise((resolve) => {
+	return new Promise(resolve => {
 		const listener = () => {
 			emitter.off('navigationReady', listener);
 			resolve();
diff --git a/app/sagas/login.js b/app/sagas/login.js
index 16a4007402f..e88740ed6ff 100644
--- a/app/sagas/login.js
+++ b/app/sagas/login.js
@@ -58,7 +58,7 @@ const showSupportedVersionsWarning = function* showSupportedVersionsWarning(serv
 
 	const serversDB = database.servers;
 	yield serversDB.write(async () => {
-		await serverRecord.update((r) => {
+		await serverRecord.update(r => {
 			r.supportedVersionsWarningAt = new Date();
 		});
 	});
@@ -105,7 +105,7 @@ const handleLoginRequest = function* handleLoginRequest({ credentials, logoutOnE
 						}
 						// this is updating on every login just to save `updated_at`
 						// keeping this server as the most recent on autocomplete order
-						await serverHistoryRecord.update((s) => {
+						await serverHistoryRecord.update(s => {
 							s.username = result.username;
 							if (iconURL) {
 								s.iconURL = iconURL;
@@ -279,12 +279,12 @@ const handleLoginSuccess = function* handleLoginSuccess({ user }) {
 		yield serversDB.write(async () => {
 			try {
 				const userRecord = await usersCollection.find(user.id);
-				await userRecord.update((record) => {
+				await userRecord.update(record => {
 					record._raw = sanitizedRaw({ id: user.id, ...record._raw }, usersCollection.schema);
 					Object.assign(record, u);
 				});
 			} catch (e) {
-				await usersCollection.create((record) => {
+				await usersCollection.create(record => {
 					record._raw = sanitizedRaw({ id: user.id }, usersCollection.schema);
 					Object.assign(record, u);
 				});
@@ -362,7 +362,7 @@ const handleSetUser = function* handleSetUser({ user }) {
 		yield serversDB.write(async () => {
 			try {
 				const record = await userCollections.find(userId);
-				await record.update((userRecord) => {
+				await record.update(userRecord => {
 					if ('avatarETag' in user) {
 						userRecord.avatarETag = user.avatarETag;
 					}
diff --git a/app/sagas/rooms.js b/app/sagas/rooms.js
index 39058a03228..174325121f7 100644
--- a/app/sagas/rooms.js
+++ b/app/sagas/rooms.js
@@ -18,7 +18,7 @@ const updateRooms = function* updateRooms({ server, newRoomsUpdatedAt }) {
 		const serverRecord = yield serversCollection.find(server);
 
 		return serversDB.write(async () => {
-			await serverRecord.update((record) => {
+			await serverRecord.update(record => {
 				record.roomsUpdatedAt = newRoomsUpdatedAt;
 			});
 		});
@@ -75,12 +75,12 @@ const handleRoomsRequest = function* handleRoomsRequest({ params }) {
 
 			const allRecords = [
 				...subsToCreate.map(subscription =>
-					subCollection.prepareCreate((s) => {
+					subCollection.prepareCreate(s => {
 						s._raw = sanitizedRaw({ id: subscription.rid }, subCollection.schema);
 						return Object.assign(s, subscription);
 					})
 				),
-				...subsToUpdate.map((subscription) => {
+				...subsToUpdate.map(subscription => {
 					try {
 						const newSub = subscriptions.find(s => s._id === subscription._id);
 						if (!newSub) {
@@ -99,7 +99,7 @@ const handleRoomsRequest = function* handleRoomsRequest({ params }) {
 						return null;
 					}
 				}),
-				...subsToDelete.map((subscription) => {
+				...subsToDelete.map(subscription => {
 					try {
 						return subscription.prepareDestroyPermanently();
 					} catch (e) {
@@ -108,13 +108,13 @@ const handleRoomsRequest = function* handleRoomsRequest({ params }) {
 					}
 				}),
 				...messagesToCreate.map(message =>
-					messagesCollection.prepareCreate((m) => {
+					messagesCollection.prepareCreate(m => {
 						m._raw = sanitizedRaw({ id: message._id }, messagesCollection.schema);
 						m.subscription.id = message.rid;
 						return Object.assign(m, message);
 					})
 				),
-				...messagesToUpdate.map((message) => {
+				...messagesToUpdate.map(message => {
 					const newMessage = lastMessages.find(m => m._id === message.id);
 					return message.prepareUpdate(() => {
 						try {
diff --git a/app/sagas/state.js b/app/sagas/state.js
index 358549f2dd7..20272cfeb73 100644
--- a/app/sagas/state.js
+++ b/app/sagas/state.js
@@ -28,7 +28,7 @@ const appHasComeBackToForeground = function* appHasComeBackToForeground() {
 		yield localAuthenticate(server);
 		checkAndReopen();
 		// Check for pending notification when app comes to foreground (Android - notification tap while in background)
-		checkPendingNotification().catch((e) => {
+		checkPendingNotification().catch(e => {
 			log('[state.js] Error checking pending notification:', e);
 		});
 		return yield setUserPresenceOnline();
diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx
index d4dd3ccc2fa..995d2091351 100644
--- a/app/stacks/MasterDetailStack/index.tsx
+++ b/app/stacks/MasterDetailStack/index.tsx
@@ -217,7 +217,7 @@ const InsideStackNavigator = React.memo(() => {
 			screenOptions={{
 				...defaultHeader,
 				...themedHeader(theme),
-				presentation: 'containedTransparentModal'
+				presentation: isIOS ? 'containedTransparentModal' : 'containedModal'
 			}}>
 			<InsideStack.Screen name='DrawerNavigator' component={DrawerNavigator} options={{ headerShown: false }} />
 			<InsideStack.Screen name='ModalStackNavigator' component={ModalStackNavigator} options={{ headerShown: false }} />
diff --git a/app/views/CannedResponsesListView/CannedResponseItem.tsx b/app/views/CannedResponsesListView/CannedResponseItem.tsx
index a52d1e8e7d4..c03cc731b9b 100644
--- a/app/views/CannedResponsesListView/CannedResponseItem.tsx
+++ b/app/views/CannedResponsesListView/CannedResponseItem.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text } from 'react-native';
-import Touchable from 'react-native-platform-touchable';
 
+import Touch from '../../containers/Touch';
 import { type TSupportedThemes } from '../../theme';
 import { themes } from '../../lib/constants/colors';
 import Button from '../../containers/Button';
@@ -27,7 +27,7 @@ const CannedResponseItem = ({
 	text,
 	tags = []
 }: ICannedResponseItem): JSX.Element => (
-	<Touchable onPress={onPressDetail} style={[styles.wrapCannedItem, { backgroundColor: themes[theme].surfaceLight }]}>
+	<Touch onPress={onPressDetail} style={[styles.wrapCannedItem, { backgroundColor: themes[theme].surfaceLight }]}>
 		<>
 			<View style={styles.cannedRow}>
 				<View style={styles.cannedWrapShortcutScope}>
@@ -57,7 +57,7 @@ const CannedResponseItem = ({
 					: null}
 			</View>
 		</>
-	</Touchable>
+	</Touch>
 );
 
 export default CannedResponseItem;
diff --git a/app/views/CannedResponsesListView/__snapshots__/CannedResponseItem.test.tsx.snap b/app/views/CannedResponsesListView/__snapshots__/CannedResponseItem.test.tsx.snap
index 1dbd0f7dc8a..660a41df1fd 100644
--- a/app/views/CannedResponsesListView/__snapshots__/CannedResponseItem.test.tsx.snap
+++ b/app/views/CannedResponsesListView/__snapshots__/CannedResponseItem.test.tsx.snap
@@ -2,659 +2,713 @@
 
 exports[`Story Snapshots: Itens should match snapshot 1`] = `
 [
-  <View
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
+  <RNGestureHandlerButton
+    activeOpacity={1}
     collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+    delayLongPress={600}
+    enabled={true}
+    handlerTag={1}
+    handlerType="NativeViewGestureHandler"
+    innerRef={null}
+    onActiveStateChange={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onPress={[Function]}
+    rippleColor="#E4E7EA"
     style={
-      {
-        "backgroundColor": "#FFFFFF",
-        "maxHeight": 141,
-        "minHeight": 117,
-        "opacity": 1,
-        "padding": 16,
-      }
+      [
+        {
+          "backgroundColor": "#FFFFFF",
+          "borderRadius": undefined,
+          "margin": undefined,
+          "marginBottom": undefined,
+          "marginEnd": undefined,
+          "marginHorizontal": undefined,
+          "marginLeft": undefined,
+          "marginRight": undefined,
+          "marginStart": undefined,
+          "marginTop": undefined,
+          "marginVertical": undefined,
+        },
+        {
+          "cursor": undefined,
+        },
+      ]
     }
+    underlayColor="#E4E7EA"
   >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#E4E7EA",
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "bottom": 0,
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    />
     <View
       style={
         {
-          "flexDirection": "row",
-          "height": 36,
+          "maxHeight": 141,
+          "minHeight": 117,
+          "padding": 16,
         }
       }
     >
       <View
         style={
           {
-            "flex": 1,
+            "flexDirection": "row",
+            "height": 36,
           }
         }
       >
-        <Text
+        <View
           style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "flex": 1,
-                "fontFamily": "Inter",
-                "fontSize": 14,
-                "fontWeight": "500",
-                "paddingBottom": 0,
-                "paddingTop": 0,
-                "textAlign": "left",
-              },
-              {
-                "color": "#1F2329",
-              },
-            ]
+            {
+              "flex": 1,
+            }
           }
         >
-          !
-          !FAQ4
-        </Text>
-        <Text
+          <Text
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flex": 1,
+                  "fontFamily": "Inter",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "paddingBottom": 0,
+                  "paddingTop": 0,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                },
+              ]
+            }
+          >
+            !
+            !FAQ4
+          </Text>
+          <Text
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flex": 1,
+                  "fontFamily": "Inter",
+                  "fontSize": 12,
+                  "fontWeight": "400",
+                  "paddingBottom": 0,
+                  "paddingTop": 0,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#6C727A",
+                },
+              ]
+            }
+          >
+            Private
+          </Text>
+        </View>
+        <RNGestureHandlerButton
+          accessibilityLabel="Use"
+          accessibilityRole="button"
+          collapsable={false}
+          enabled={true}
+          hitSlop={
+            {
+              "bottom": 0,
+              "left": 0,
+              "right": 0,
+              "top": 0,
+            }
+          }
+          rippleColor="transparent"
           style={
             [
-              {
-                "backgroundColor": "transparent",
-                "flex": 1,
-                "fontFamily": "Inter",
-                "fontSize": 12,
-                "fontWeight": "400",
-                "paddingBottom": 0,
-                "paddingTop": 0,
-                "textAlign": "left",
-              },
-              {
-                "color": "#6C727A",
-              },
+              {},
+              [
+                {
+                  "justifyContent": "center",
+                  "paddingHorizontal": 16,
+                  "paddingVertical": 14,
+                },
+                {
+                  "borderRadius": 4,
+                  "marginBottom": 12,
+                },
+                {
+                  "backgroundColor": "#156FF5",
+                },
+                {},
+                [
+                  {
+                    "height": 28,
+                    "marginLeft": 8,
+                    "width": 56,
+                  },
+                  {
+                    "backgroundColor": "#F7F8FA",
+                  },
+                ],
+              ],
             ]
           }
+          testOnly_onPress={[Function]}
         >
-          Private
-        </Text>
+          <Text
+            style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 12,
+                },
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontWeight": "500",
+                  "textAlign": "center",
+                },
+                undefined,
+              ]
+            }
+          >
+            Use
+          </Text>
+        </RNGestureHandlerButton>
       </View>
-      <View
-        accessibilityLabel="Use"
-        accessibilityRole="button"
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": undefined,
-            "expanded": undefined,
-            "selected": undefined,
-          }
-        }
-        accessibilityValue={
-          {
-            "max": undefined,
-            "min": undefined,
-            "now": undefined,
-            "text": undefined,
-          }
+      <Text
+        ellipsizeMode="tail"
+        numberOfLines={2}
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "fontFamily": "Inter",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "marginTop": 8,
+              "paddingBottom": 0,
+              "paddingTop": 0,
+              "textAlign": "left",
+            },
+            {
+              "color": "#6C727A",
+            },
+          ]
         }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onClick={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
+      >
+        “
+        ZCVXZVXCZVZXVZXCVZXCVXZCVZX
+        ”
+      </Text>
+      <View
         style={
           {
-            "backgroundColor": "#F7F8FA",
-            "borderRadius": 4,
-            "height": 28,
-            "justifyContent": "center",
-            "marginBottom": 12,
-            "marginLeft": 8,
-            "opacity": 1,
-            "paddingHorizontal": 16,
-            "paddingVertical": 14,
-            "width": 56,
+            "flexDirection": "row",
+            "overflow": "hidden",
           }
         }
-      >
-        <Text
-          style={
-            [
-              {
-                "color": "#1F2329",
-                "fontSize": 12,
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontWeight": "500",
-                "textAlign": "center",
-              },
-              undefined,
-            ]
-          }
-        >
-          Use
-        </Text>
-      </View>
+      />
     </View>
-    <Text
-      ellipsizeMode="tail"
-      numberOfLines={2}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 14,
-            "fontWeight": "400",
-            "marginTop": 8,
-            "paddingBottom": 0,
-            "paddingTop": 0,
-            "textAlign": "left",
-          },
-          {
-            "color": "#6C727A",
-          },
-        ]
-      }
-    >
-      “
-      ZCVXZVXCZVZXVZXCVZXCVXZCVZX
-      ”
-    </Text>
+  </RNGestureHandlerButton>,
+  <RNGestureHandlerButton
+    activeOpacity={1}
+    collapsable={false}
+    delayLongPress={600}
+    enabled={true}
+    handlerTag={2}
+    handlerType="NativeViewGestureHandler"
+    innerRef={null}
+    onActiveStateChange={[Function]}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onPress={[Function]}
+    rippleColor="#E4E7EA"
+    style={
+      [
+        {
+          "backgroundColor": "#FFFFFF",
+          "borderRadius": undefined,
+          "margin": undefined,
+          "marginBottom": undefined,
+          "marginEnd": undefined,
+          "marginHorizontal": undefined,
+          "marginLeft": undefined,
+          "marginRight": undefined,
+          "marginStart": undefined,
+          "marginTop": undefined,
+          "marginVertical": undefined,
+        },
+        {
+          "cursor": undefined,
+        },
+      ]
+    }
+    underlayColor="#E4E7EA"
+  >
     <View
+      collapsable={false}
       style={
         {
-          "flexDirection": "row",
-          "overflow": "hidden",
+          "backgroundColor": "#E4E7EA",
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "bottom": 0,
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         }
       }
     />
-  </View>,
-  <View
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "backgroundColor": "#FFFFFF",
-        "maxHeight": 141,
-        "minHeight": 117,
-        "opacity": 1,
-        "padding": 16,
-      }
-    }
-  >
     <View
       style={
         {
-          "flexDirection": "row",
-          "height": 36,
+          "maxHeight": 141,
+          "minHeight": 117,
+          "padding": 16,
         }
       }
     >
       <View
         style={
           {
-            "flex": 1,
+            "flexDirection": "row",
+            "height": 36,
           }
         }
       >
-        <Text
+        <View
           style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "flex": 1,
-                "fontFamily": "Inter",
-                "fontSize": 14,
-                "fontWeight": "500",
-                "paddingBottom": 0,
-                "paddingTop": 0,
-                "textAlign": "left",
-              },
-              {
-                "color": "#1F2329",
-              },
-            ]
-          }
-        >
-          !
-          test4mobilePrivate
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "flex": 1,
-                "fontFamily": "Inter",
-                "fontSize": 12,
-                "fontWeight": "400",
-                "paddingBottom": 0,
-                "paddingTop": 0,
-                "textAlign": "left",
-              },
-              {
-                "color": "#6C727A",
-              },
-            ]
+            {
+              "flex": 1,
+            }
           }
         >
-          Private
-        </Text>
-      </View>
-      <View
-        accessibilityLabel="Use"
-        accessibilityRole="button"
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": undefined,
-            "expanded": undefined,
-            "selected": undefined,
-          }
-        }
-        accessibilityValue={
-          {
-            "max": undefined,
-            "min": undefined,
-            "now": undefined,
-            "text": undefined,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onClick={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          {
-            "backgroundColor": "#F7F8FA",
-            "borderRadius": 4,
-            "height": 28,
-            "justifyContent": "center",
-            "marginBottom": 12,
-            "marginLeft": 8,
-            "opacity": 1,
-            "paddingHorizontal": 16,
-            "paddingVertical": 14,
-            "width": 56,
+          <Text
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flex": 1,
+                  "fontFamily": "Inter",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "paddingBottom": 0,
+                  "paddingTop": 0,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                },
+              ]
+            }
+          >
+            !
+            test4mobilePrivate
+          </Text>
+          <Text
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flex": 1,
+                  "fontFamily": "Inter",
+                  "fontSize": 12,
+                  "fontWeight": "400",
+                  "paddingBottom": 0,
+                  "paddingTop": 0,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#6C727A",
+                },
+              ]
+            }
+          >
+            Private
+          </Text>
+        </View>
+        <RNGestureHandlerButton
+          accessibilityLabel="Use"
+          accessibilityRole="button"
+          collapsable={false}
+          enabled={true}
+          hitSlop={
+            {
+              "bottom": 0,
+              "left": 0,
+              "right": 0,
+              "top": 0,
+            }
           }
-        }
-      >
-        <Text
+          rippleColor="transparent"
           style={
             [
-              {
-                "color": "#1F2329",
-                "fontSize": 12,
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontWeight": "500",
-                "textAlign": "center",
-              },
-              undefined,
+              {},
+              [
+                {
+                  "justifyContent": "center",
+                  "paddingHorizontal": 16,
+                  "paddingVertical": 14,
+                },
+                {
+                  "borderRadius": 4,
+                  "marginBottom": 12,
+                },
+                {
+                  "backgroundColor": "#156FF5",
+                },
+                {},
+                [
+                  {
+                    "height": 28,
+                    "marginLeft": 8,
+                    "width": 56,
+                  },
+                  {
+                    "backgroundColor": "#F7F8FA",
+                  },
+                ],
+              ],
             ]
           }
+          testOnly_onPress={[Function]}
         >
-          Use
-        </Text>
+          <Text
+            style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 12,
+                },
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontWeight": "500",
+                  "textAlign": "center",
+                },
+                undefined,
+              ]
+            }
+          >
+            Use
+          </Text>
+        </RNGestureHandlerButton>
       </View>
-    </View>
-    <Text
-      ellipsizeMode="tail"
-      numberOfLines={2}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 14,
-            "fontWeight": "400",
-            "marginTop": 8,
-            "paddingBottom": 0,
-            "paddingTop": 0,
-            "textAlign": "left",
-          },
-          {
-            "color": "#6C727A",
-          },
-        ]
-      }
-    >
-      “
-      test for mobile private
-      ”
-    </Text>
-    <View
-      style={
-        {
-          "flexDirection": "row",
-          "overflow": "hidden",
-        }
-      }
-    >
-      <View
+      <Text
+        ellipsizeMode="tail"
+        numberOfLines={2}
         style={
           [
             {
-              "borderRadius": 4,
-              "height": 16,
-              "marginRight": 4,
+              "backgroundColor": "transparent",
+              "fontFamily": "Inter",
+              "fontSize": 14,
+              "fontWeight": "400",
               "marginTop": 8,
+              "paddingBottom": 0,
+              "paddingTop": 0,
+              "textAlign": "left",
             },
             {
-              "backgroundColor": "#EBECEF",
+              "color": "#6C727A",
             },
           ]
         }
       >
-        <Text
+        “
+        test for mobile private
+        ”
+      </Text>
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "overflow": "hidden",
+          }
+        }
+      >
+        <View
           style={
             [
               {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 12,
-                "fontWeight": "400",
-                "paddingBottom": 0,
-                "paddingHorizontal": 4,
-                "paddingTop": 0,
-                "textAlign": "left",
+                "borderRadius": 4,
+                "height": 16,
+                "marginRight": 4,
+                "marginTop": 8,
               },
               {
-                "color": "#6C727A",
+                "backgroundColor": "#EBECEF",
               },
             ]
           }
         >
-          HQ
-        </Text>
-      </View>
-      <View
-        style={
-          [
-            {
-              "borderRadius": 4,
-              "height": 16,
-              "marginRight": 4,
-              "marginTop": 8,
-            },
-            {
-              "backgroundColor": "#EBECEF",
-            },
-          ]
-        }
-      >
-        <Text
+          <Text
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 12,
+                  "fontWeight": "400",
+                  "paddingBottom": 0,
+                  "paddingHorizontal": 4,
+                  "paddingTop": 0,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#6C727A",
+                },
+              ]
+            }
+          >
+            HQ
+          </Text>
+        </View>
+        <View
           style={
             [
               {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 12,
-                "fontWeight": "400",
-                "paddingBottom": 0,
-                "paddingHorizontal": 4,
-                "paddingTop": 0,
-                "textAlign": "left",
+                "borderRadius": 4,
+                "height": 16,
+                "marginRight": 4,
+                "marginTop": 8,
               },
               {
-                "color": "#6C727A",
+                "backgroundColor": "#EBECEF",
               },
             ]
           }
         >
-          Closed
-        </Text>
-      </View>
-      <View
-        style={
-          [
-            {
-              "borderRadius": 4,
-              "height": 16,
-              "marginRight": 4,
-              "marginTop": 8,
-            },
-            {
-              "backgroundColor": "#EBECEF",
-            },
-          ]
-        }
-      >
-        <Text
+          <Text
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 12,
+                  "fontWeight": "400",
+                  "paddingBottom": 0,
+                  "paddingHorizontal": 4,
+                  "paddingTop": 0,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#6C727A",
+                },
+              ]
+            }
+          >
+            Closed
+          </Text>
+        </View>
+        <View
           style={
             [
               {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 12,
-                "fontWeight": "400",
-                "paddingBottom": 0,
-                "paddingHorizontal": 4,
-                "paddingTop": 0,
-                "textAlign": "left",
+                "borderRadius": 4,
+                "height": 16,
+                "marginRight": 4,
+                "marginTop": 8,
               },
               {
-                "color": "#6C727A",
+                "backgroundColor": "#EBECEF",
               },
             ]
           }
         >
-          HQ
-        </Text>
-      </View>
-      <View
-        style={
-          [
-            {
-              "borderRadius": 4,
-              "height": 16,
-              "marginRight": 4,
-              "marginTop": 8,
-            },
-            {
-              "backgroundColor": "#EBECEF",
-            },
-          ]
-        }
-      >
-        <Text
+          <Text
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 12,
+                  "fontWeight": "400",
+                  "paddingBottom": 0,
+                  "paddingHorizontal": 4,
+                  "paddingTop": 0,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#6C727A",
+                },
+              ]
+            }
+          >
+            HQ
+          </Text>
+        </View>
+        <View
           style={
             [
               {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 12,
-                "fontWeight": "400",
-                "paddingBottom": 0,
-                "paddingHorizontal": 4,
-                "paddingTop": 0,
-                "textAlign": "left",
+                "borderRadius": 4,
+                "height": 16,
+                "marginRight": 4,
+                "marginTop": 8,
               },
               {
-                "color": "#6C727A",
+                "backgroundColor": "#EBECEF",
               },
             ]
           }
         >
-          Problem in Product Y
-        </Text>
-      </View>
-      <View
-        style={
-          [
-            {
-              "borderRadius": 4,
-              "height": 16,
-              "marginRight": 4,
-              "marginTop": 8,
-            },
-            {
-              "backgroundColor": "#EBECEF",
-            },
-          ]
-        }
-      >
-        <Text
+          <Text
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 12,
+                  "fontWeight": "400",
+                  "paddingBottom": 0,
+                  "paddingHorizontal": 4,
+                  "paddingTop": 0,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#6C727A",
+                },
+              ]
+            }
+          >
+            Problem in Product Y
+          </Text>
+        </View>
+        <View
           style={
             [
               {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 12,
-                "fontWeight": "400",
-                "paddingBottom": 0,
-                "paddingHorizontal": 4,
-                "paddingTop": 0,
-                "textAlign": "left",
+                "borderRadius": 4,
+                "height": 16,
+                "marginRight": 4,
+                "marginTop": 8,
               },
               {
-                "color": "#6C727A",
+                "backgroundColor": "#EBECEF",
               },
             ]
           }
         >
-          HQ
-        </Text>
-      </View>
-      <View
-        style={
-          [
-            {
-              "borderRadius": 4,
-              "height": 16,
-              "marginRight": 4,
-              "marginTop": 8,
-            },
-            {
-              "backgroundColor": "#EBECEF",
-            },
-          ]
-        }
-      >
-        <Text
+          <Text
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 12,
+                  "fontWeight": "400",
+                  "paddingBottom": 0,
+                  "paddingHorizontal": 4,
+                  "paddingTop": 0,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#6C727A",
+                },
+              ]
+            }
+          >
+            HQ
+          </Text>
+        </View>
+        <View
           style={
             [
               {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 12,
-                "fontWeight": "400",
-                "paddingBottom": 0,
-                "paddingHorizontal": 4,
-                "paddingTop": 0,
-                "textAlign": "left",
+                "borderRadius": 4,
+                "height": 16,
+                "marginRight": 4,
+                "marginTop": 8,
               },
               {
-                "color": "#6C727A",
+                "backgroundColor": "#EBECEF",
               },
             ]
           }
         >
-          Closed
-        </Text>
-      </View>
-      <View
-        style={
-          [
-            {
-              "borderRadius": 4,
-              "height": 16,
-              "marginRight": 4,
-              "marginTop": 8,
-            },
-            {
-              "backgroundColor": "#EBECEF",
-            },
-          ]
-        }
-      >
-        <Text
+          <Text
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 12,
+                  "fontWeight": "400",
+                  "paddingBottom": 0,
+                  "paddingHorizontal": 4,
+                  "paddingTop": 0,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#6C727A",
+                },
+              ]
+            }
+          >
+            Closed
+          </Text>
+        </View>
+        <View
           style={
             [
               {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 12,
-                "fontWeight": "400",
-                "paddingBottom": 0,
-                "paddingHorizontal": 4,
-                "paddingTop": 0,
-                "textAlign": "left",
+                "borderRadius": 4,
+                "height": 16,
+                "marginRight": 4,
+                "marginTop": 8,
               },
               {
-                "color": "#6C727A",
+                "backgroundColor": "#EBECEF",
               },
             ]
           }
         >
-          Problem in Product Y
-        </Text>
+          <Text
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 12,
+                  "fontWeight": "400",
+                  "paddingBottom": 0,
+                  "paddingHorizontal": 4,
+                  "paddingTop": 0,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#6C727A",
+                },
+              ]
+            }
+          >
+            Problem in Product Y
+          </Text>
+        </View>
       </View>
     </View>
-  </View>,
+  </RNGestureHandlerButton>,
 ]
 `;
diff --git a/app/views/ChangePasscodeView.tsx b/app/views/ChangePasscodeView.tsx
index 39524612710..4088d1f6009 100644
--- a/app/views/ChangePasscodeView.tsx
+++ b/app/views/ChangePasscodeView.tsx
@@ -3,13 +3,13 @@ import { StyleSheet } from 'react-native';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import isEmpty from 'lodash/isEmpty';
 import Modal from 'react-native-modal';
-import Touchable from 'react-native-platform-touchable';
 
 import { hasNotch } from '../lib/methods/helpers';
 import { PasscodeChoose } from '../containers/Passcode';
 import EventEmitter from '../lib/methods/helpers/events';
 import { CustomIcon } from '../containers/CustomIcon';
 import { CHANGE_PASSCODE_EMITTER } from '../lib/constants/localAuthentication';
+import Touch from '../containers/Touch';
 
 const styles = StyleSheet.create({
 	modal: {
@@ -71,9 +71,9 @@ const ChangePasscodeView = React.memo(() => {
 		<Modal useNativeDriver isVisible={visible} hideModalContentWhileAnimating style={styles.modal}>
 			<PasscodeChoose finishProcess={onSubmit} force={data?.force} />
 			{!data?.force ? (
-				<Touchable onPress={onCancel} style={styles.close}>
+				<Touch onPress={onCancel} style={styles.close}>
 					<CustomIcon name='close' size={30} />
-				</Touchable>
+				</Touch>
 			) : null}
 		</Modal>
 	);
diff --git a/app/views/CreateChannelView/RoomSettings/SwitchItemEncrypted.test.tsx b/app/views/CreateChannelView/RoomSettings/SwitchItemEncrypted.test.tsx
index 7eeefe93de2..215c3ac8da7 100644
--- a/app/views/CreateChannelView/RoomSettings/SwitchItemEncrypted.test.tsx
+++ b/app/views/CreateChannelView/RoomSettings/SwitchItemEncrypted.test.tsx
@@ -56,11 +56,9 @@ describe('SwitchItemEncrypted', () => {
 				type={testEncrypted.type}
 			/>
 		);
-		const component = screen.queryByTestId(testEncrypted.testSwitchID);
-		if (component) {
-			fireEvent(component, 'valueChange', { value: true });
-			expect(onPressMock).toHaveReturnedWith({ value: !testEncrypted.encrypted });
-		}
+		const component = screen.getByTestId(testEncrypted.testSwitchID);
+		fireEvent(component, 'valueChange', { value: true });
+		expect(onPressMock).toHaveReturnedWith({ value: !testEncrypted.encrypted });
 	});
 
 	it('label when encrypted and isTeam are true and is a private team', () => {
diff --git a/app/views/DirectoryView/Options.tsx b/app/views/DirectoryView/Options.tsx
index 3171154d7b1..0cf6de5a205 100644
--- a/app/views/DirectoryView/Options.tsx
+++ b/app/views/DirectoryView/Options.tsx
@@ -52,7 +52,7 @@ const DirectoryOptions = ({
 	};
 
 	return (
-		<View style={{ backgroundColor: colors.surfaceRoom, marginBottom: insets.bottom }}>
+		<List.Container contentContainerStyle={{ backgroundColor: colors.surfaceRoom, marginBottom: insets.bottom }}>
 			<List.Separator />
 			{renderItem('channels')}
 			<List.Separator />
@@ -74,7 +74,7 @@ const DirectoryOptions = ({
 					</View>
 				</>
 			) : null}
-		</View>
+		</List.Container>
 	);
 };
 
diff --git a/app/views/DirectoryView/index.tsx b/app/views/DirectoryView/index.tsx
index e827e732c50..8a55ed2c07c 100644
--- a/app/views/DirectoryView/index.tsx
+++ b/app/views/DirectoryView/index.tsx
@@ -181,7 +181,8 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 					toggleWorkspace={this.toggleWorkspace}
 					isFederationEnabled={isFederationEnabled}
 				/>
-			)
+			),
+			enableContentPanningGesture: false
 		});
 	};
 
diff --git a/app/views/DiscussionsView/DiscussionDetails.tsx b/app/views/DiscussionsView/DiscussionDetails.tsx
index 6622ee48bf7..bbe5df1d4c3 100644
--- a/app/views/DiscussionsView/DiscussionDetails.tsx
+++ b/app/views/DiscussionsView/DiscussionDetails.tsx
@@ -42,7 +42,7 @@ const DiscussionDetails = ({ item, date }: IDiscussionDetails): React.ReactEleme
 	}
 
 	return (
-		<View style={[styles.container]}>
+		<View style={styles.container}>
 			<View style={styles.detailsContainer}>
 				<View style={styles.detailContainer}>
 					<CustomIcon name={'discussions'} size={24} color={colors.fontSecondaryInfo} />
diff --git a/app/views/DiscussionsView/Item.tsx b/app/views/DiscussionsView/Item.tsx
index 143b4da6841..da06ce6e728 100644
--- a/app/views/DiscussionsView/Item.tsx
+++ b/app/views/DiscussionsView/Item.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import Touchable from 'react-native-platform-touchable';
 
 import dayjs from '../../lib/dayjs';
 import { useTheme } from '../../theme';
@@ -10,6 +9,7 @@ import { MarkdownPreview } from '../../containers/markdown';
 import { formatDateThreads, makeThreadName } from '../../lib/methods/helpers/room';
 import DiscussionDetails from './DiscussionDetails';
 import { type IMessageFromServer } from '../../definitions';
+import Touch from '../../containers/Touch';
 
 const styles = StyleSheet.create({
 	container: {
@@ -63,10 +63,7 @@ const Item = ({ item, onPress }: IItem): React.ReactElement => {
 	}
 
 	return (
-		<Touchable
-			onPress={() => onPress(item)}
-			testID={`discussions-view-${item.msg}`}
-			style={{ backgroundColor: colors.surfaceRoom }}>
+		<Touch onPress={() => onPress(item)} testID={`discussions-view-${item.msg}`} style={{ backgroundColor: colors.surfaceRoom }}>
 			<View style={styles.container}>
 				<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} />
 				<View style={styles.contentContainer}>
@@ -77,12 +74,12 @@ const Item = ({ item, onPress }: IItem): React.ReactElement => {
 						{messageTime ? <Text style={[styles.time, { color: colors.fontSecondaryInfo }]}>{messageTime}</Text> : null}
 					</View>
 					<View style={styles.messageContainer}>
-						{username ? <MarkdownPreview msg={makeThreadName(item)} numberOfLines={2} style={[styles.markdown]} /> : null}
+						{username ? <MarkdownPreview msg={makeThreadName(item)} numberOfLines={2} style={styles.markdown} /> : null}
 					</View>
 					{messageDate ? <DiscussionDetails item={item} date={messageDate} /> : null}
 				</View>
 			</View>
-		</Touchable>
+		</Touch>
 	);
 };
 
diff --git a/app/views/DiscussionsView/__snapshots__/Item.test.tsx.snap b/app/views/DiscussionsView/__snapshots__/Item.test.tsx.snap
index dcca4852073..3449e2022df 100644
--- a/app/views/DiscussionsView/__snapshots__/Item.test.tsx.snap
+++ b/app/views/DiscussionsView/__snapshots__/Item.test.tsx.snap
@@ -16,332 +16,353 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     />
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={1}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="discussions-view-Message content"
+      underlayColor="#E4E7EA"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
-        <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
-          style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
-          }
-          testID="avatar"
-        >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
-              [
-                {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
-                },
-              ]
-            }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
         <View
           style={
             {
-              "flex": 1,
-              "flexDirection": "column",
+              "flexDirection": "row",
+              "padding": 16,
             }
           }
         >
           <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
             style={
-              {
-                "flexDirection": "row",
-                "justifyContent": "space-between",
-                "marginBottom": 2,
-              }
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
+                },
+              ]
             }
+            testID="avatar"
           >
-            <Text
-              numberOfLines={1}
-              style={
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
                   },
                 ]
               }
-            >
-              rocket.cat
-            </Text>
-            <Text
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#6C727A",
-                  },
-                ]
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
               }
-            >
-              10:00 AM
-            </Text>
+              transition={null}
+              width={36}
+            />
           </View>
           <View
             style={
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              accessibilityLabel="Message content"
-              numberOfLines={2}
+            <View
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "flex": 1,
-                  },
-                ]
+                {
+                  "flexDirection": "row",
+                  "justifyContent": "space-between",
+                  "marginBottom": 2,
+                }
               }
-              testID="markdown-preview-Message content"
             >
-              Message content
-            </Text>
-          </View>
-          <View
-            style={
-              [
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                rocket.cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#6C727A",
+                    },
+                  ]
+                }
+              >
+                10:00 AM
+              </Text>
+            </View>
+            <View
+              style={
                 {
-                  "alignItems": "center",
-                  "flex": 1,
                   "flexDirection": "row",
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
+                }
+              }
+            >
+              <Text
+                accessibilityLabel="Message content"
+                numberOfLines={2}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Message content"
+              >
+                Message content
+              </Text>
+            </View>
             <View
               style={
                 {
+                  "alignItems": "center",
                   "flex": 1,
                   "flexDirection": "row",
+                  "marginTop": 8,
                 }
               }
             >
               <View
                 style={
                   {
-                    "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                />
-              </View>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "marginRight": 8,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 24,
-                      },
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                          "color": "#6C727A",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  />
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  November 10, 2020
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#6C727A",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    November 10, 2020
+                  </Text>
+                </View>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
+    </RNGestureHandlerButton>
     <View
       style={
         [
@@ -355,332 +376,353 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     />
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={2}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="discussions-view-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+      underlayColor="#E4E7EA"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
-        <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
-          style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
-          }
-          testID="avatar"
-        >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
-              [
-                {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
-                },
-              ]
-            }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
         <View
           style={
             {
-              "flex": 1,
-              "flexDirection": "column",
+              "flexDirection": "row",
+              "padding": 16,
             }
           }
         >
           <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
             style={
-              {
-                "flexDirection": "row",
-                "justifyContent": "space-between",
-                "marginBottom": 2,
-              }
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
+                },
+              ]
             }
+            testID="avatar"
           >
-            <Text
-              numberOfLines={1}
-              style={
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
                   },
                 ]
               }
-            >
-              rocket.cat
-            </Text>
-            <Text
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#6C727A",
-                  },
-                ]
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
               }
-            >
-              10:00 AM
-            </Text>
+              transition={null}
+              width={36}
+            />
           </View>
           <View
             style={
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-              numberOfLines={2}
+            <View
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "flex": 1,
-                  },
-                ]
+                {
+                  "flexDirection": "row",
+                  "justifyContent": "space-between",
+                  "marginBottom": 2,
+                }
               }
-              testID="markdown-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
             >
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            </Text>
-          </View>
-          <View
-            style={
-              [
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                rocket.cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#6C727A",
+                    },
+                  ]
+                }
+              >
+                10:00 AM
+              </Text>
+            </View>
+            <View
+              style={
                 {
-                  "alignItems": "center",
-                  "flex": 1,
                   "flexDirection": "row",
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
+                }
+              }
+            >
+              <Text
+                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                numberOfLines={2}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+              >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              </Text>
+            </View>
             <View
               style={
                 {
+                  "alignItems": "center",
                   "flex": 1,
                   "flexDirection": "row",
+                  "marginTop": 8,
                 }
               }
             >
               <View
                 style={
                   {
-                    "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                />
-              </View>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "marginRight": 8,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 24,
-                      },
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                          "color": "#6C727A",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  />
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  November 10, 2020
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#6C727A",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    November 10, 2020
+                  </Text>
+                </View>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
+    </RNGestureHandlerButton>
     <View
       style={
         [
@@ -694,334 +736,355 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     />
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={3}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="discussions-view-Message content"
+      underlayColor="#E4E7EA"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
-        <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
-          style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
-          }
-          testID="avatar"
-        >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
-              [
-                {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
-                },
-              ]
-            }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
         <View
           style={
             {
-              "flex": 1,
-              "flexDirection": "column",
+              "flexDirection": "row",
+              "padding": 16,
             }
           }
         >
           <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
             style={
-              {
-                "flexDirection": "row",
-                "justifyContent": "space-between",
-                "marginBottom": 2,
-              }
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
+                },
+              ]
             }
+            testID="avatar"
           >
-            <Text
-              numberOfLines={1}
-              style={
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
                   },
                 ]
               }
-            >
-              rocket.cat
-            </Text>
-            <Text
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#6C727A",
-                  },
-                ]
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
               }
-            >
-              10:00 AM
-            </Text>
+              transition={null}
+              width={36}
+            />
           </View>
           <View
             style={
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              accessibilityLabel="Message content"
-              numberOfLines={2}
+            <View
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "flex": 1,
-                  },
-                ]
+                {
+                  "flexDirection": "row",
+                  "justifyContent": "space-between",
+                  "marginBottom": 2,
+                }
               }
-              testID="markdown-preview-Message content"
             >
-              Message content
-            </Text>
-          </View>
-          <View
-            style={
-              [
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                rocket.cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#6C727A",
+                    },
+                  ]
+                }
+              >
+                10:00 AM
+              </Text>
+            </View>
+            <View
+              style={
                 {
-                  "alignItems": "center",
-                  "flex": 1,
                   "flexDirection": "row",
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
+                }
+              }
+            >
+              <Text
+                accessibilityLabel="Message content"
+                numberOfLines={2}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Message content"
+              >
+                Message content
+              </Text>
+            </View>
             <View
               style={
                 {
+                  "alignItems": "center",
                   "flex": 1,
                   "flexDirection": "row",
+                  "marginTop": 8,
                 }
               }
             >
               <View
                 style={
                   {
-                    "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  +999
-                </Text>
-              </View>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "marginRight": 8,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 24,
-                      },
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                          "color": "#6C727A",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    +999
+                  </Text>
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  November 10, 2020
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#6C727A",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    November 10, 2020
+                  </Text>
+                </View>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
+    </RNGestureHandlerButton>
     <View
       style={
         [
@@ -1035,332 +1098,353 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     />
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={4}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="discussions-view-"
+      underlayColor="#E4E7EA"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
-        <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
-          style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
-          }
-          testID="avatar"
-        >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
-              [
-                {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
-                },
-              ]
-            }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
         <View
           style={
             {
-              "flex": 1,
-              "flexDirection": "column",
+              "flexDirection": "row",
+              "padding": 16,
             }
           }
         >
           <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
             style={
-              {
-                "flexDirection": "row",
-                "justifyContent": "space-between",
-                "marginBottom": 2,
-              }
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
+                },
+              ]
             }
+            testID="avatar"
           >
-            <Text
-              numberOfLines={1}
-              style={
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
                   },
                 ]
               }
-            >
-              rocket.cat
-            </Text>
-            <Text
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#6C727A",
-                  },
-                ]
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
               }
-            >
-              10:00 AM
-            </Text>
+              transition={null}
+              width={36}
+            />
           </View>
           <View
             style={
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              accessibilityLabel="Attachment title"
-              numberOfLines={2}
+            <View
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "flex": 1,
-                  },
-                ]
+                {
+                  "flexDirection": "row",
+                  "justifyContent": "space-between",
+                  "marginBottom": 2,
+                }
               }
-              testID="markdown-preview-Attachment title"
             >
-              Attachment title
-            </Text>
-          </View>
-          <View
-            style={
-              [
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                rocket.cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#6C727A",
+                    },
+                  ]
+                }
+              >
+                10:00 AM
+              </Text>
+            </View>
+            <View
+              style={
                 {
-                  "alignItems": "center",
-                  "flex": 1,
                   "flexDirection": "row",
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
+                }
+              }
+            >
+              <Text
+                accessibilityLabel="Attachment title"
+                numberOfLines={2}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Attachment title"
+              >
+                Attachment title
+              </Text>
+            </View>
             <View
               style={
                 {
+                  "alignItems": "center",
                   "flex": 1,
                   "flexDirection": "row",
+                  "marginTop": 8,
                 }
               }
             >
               <View
                 style={
                   {
-                    "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#6C727A",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  />
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
-                />
-              </View>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "marginRight": 8,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 24,
-                      },
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                >
-                  November 10, 2020
-                </Text>
+                          "color": "#6C727A",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    November 10, 2020
+                  </Text>
+                </View>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
+    </RNGestureHandlerButton>
     <View
       style={
         [
@@ -1374,332 +1458,353 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     />
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={5}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="discussions-view-Message content"
+      underlayColor="#E4E7EA"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
-        <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
-          style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
-          }
-          testID="avatar"
-        >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
-              [
-                {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
-                },
-              ]
-            }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
         <View
           style={
             {
-              "flex": 1,
-              "flexDirection": "column",
+              "flexDirection": "row",
+              "padding": 16,
             }
           }
         >
           <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
             style={
-              {
-                "flexDirection": "row",
-                "justifyContent": "space-between",
-                "marginBottom": 2,
-              }
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
+                },
+              ]
             }
+            testID="avatar"
           >
-            <Text
-              numberOfLines={1}
-              style={
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
                   },
                 ]
               }
-            >
-              rocket.cat
-            </Text>
-            <Text
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#6C727A",
-                  },
-                ]
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
               }
-            >
-              10:00 AM
-            </Text>
+              transition={null}
+              width={36}
+            />
           </View>
           <View
             style={
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              accessibilityLabel="Message content"
-              numberOfLines={2}
+            <View
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "flex": 1,
-                  },
-                ]
+                {
+                  "flexDirection": "row",
+                  "justifyContent": "space-between",
+                  "marginBottom": 2,
+                }
               }
-              testID="markdown-preview-Message content"
             >
-              Message content
-            </Text>
-          </View>
-          <View
-            style={
-              [
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                rocket.cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#6C727A",
+                    },
+                  ]
+                }
+              >
+                10:00 AM
+              </Text>
+            </View>
+            <View
+              style={
                 {
-                  "alignItems": "center",
-                  "flex": 1,
                   "flexDirection": "row",
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
+                }
+              }
+            >
+              <Text
+                accessibilityLabel="Message content"
+                numberOfLines={2}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Message content"
+              >
+                Message content
+              </Text>
+            </View>
             <View
               style={
                 {
+                  "alignItems": "center",
                   "flex": 1,
                   "flexDirection": "row",
+                  "marginTop": 8,
                 }
               }
             >
               <View
                 style={
                   {
-                    "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                />
-              </View>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "marginRight": 8,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 24,
-                      },
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                          "color": "#6C727A",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  />
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  November 10, 2020
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#6C727A",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    November 10, 2020
+                  </Text>
+                </View>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
+    </RNGestureHandlerButton>
     <View
       style={
         [
@@ -1733,984 +1838,1047 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
         ]
       }
     />
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={6}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="discussions-view-Message content"
+      underlayColor="#E4E7EA"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
-        <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
-          style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
-          }
-          testID="avatar"
-        >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
-              [
-                {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
-                },
-              ]
-            }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
         <View
           style={
             {
-              "flex": 1,
-              "flexDirection": "column",
+              "flexDirection": "row",
+              "padding": 16,
             }
           }
         >
           <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
             style={
-              {
-                "flexDirection": "row",
-                "justifyContent": "space-between",
-                "marginBottom": 2,
-              }
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
+                },
+              ]
             }
+            testID="avatar"
           >
-            <Text
-              numberOfLines={1}
-              style={
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
                   },
                 ]
               }
-            >
-              rocket.cat
-            </Text>
-            <Text
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#6C727A",
-                  },
-                ]
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
               }
-            >
-              10:00 AM
-            </Text>
+              transition={null}
+              width={36}
+            />
           </View>
           <View
             style={
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              accessibilityLabel="Message content"
-              numberOfLines={2}
+            <View
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "flex": 1,
-                  },
-                ]
+                {
+                  "flexDirection": "row",
+                  "justifyContent": "space-between",
+                  "marginBottom": 2,
+                }
               }
-              testID="markdown-preview-Message content"
             >
-              Message content
-            </Text>
-          </View>
-          <View
-            style={
-              [
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                rocket.cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#6C727A",
+                    },
+                  ]
+                }
+              >
+                10:00 AM
+              </Text>
+            </View>
+            <View
+              style={
                 {
-                  "alignItems": "center",
-                  "flex": 1,
                   "flexDirection": "row",
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
+                }
+              }
+            >
+              <Text
+                accessibilityLabel="Message content"
+                numberOfLines={2}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Message content"
+              >
+                Message content
+              </Text>
+            </View>
             <View
               style={
                 {
+                  "alignItems": "center",
                   "flex": 1,
                   "flexDirection": "row",
+                  "marginTop": 8,
                 }
               }
             >
               <View
                 style={
                   {
-                    "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                />
-              </View>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "marginRight": 8,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#6C727A",
-                        "fontSize": 24,
-                      },
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                          "color": "#6C727A",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  />
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  November 10, 2020
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#6C727A",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    November 10, 2020
+                  </Text>
+                </View>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    </RNGestureHandlerButton>
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={7}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#2D3039"
       style={
-        {
-          "backgroundColor": "#1F2329",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#1F2329",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="discussions-view-Message content"
+      underlayColor="#2D3039"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#2D3039",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
-        <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
-          style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
-          }
-          testID="avatar"
-        >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
-              [
-                {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
-                },
-              ]
-            }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
         <View
           style={
             {
-              "flex": 1,
-              "flexDirection": "column",
+              "flexDirection": "row",
+              "padding": 16,
             }
           }
         >
           <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
             style={
-              {
-                "flexDirection": "row",
-                "justifyContent": "space-between",
-                "marginBottom": 2,
-              }
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
+                },
+              ]
             }
+            testID="avatar"
           >
-            <Text
-              numberOfLines={1}
-              style={
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#F2F3F5",
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
                   },
                 ]
               }
-            >
-              rocket.cat
-            </Text>
-            <Text
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#9EA2A8",
-                  },
-                ]
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
               }
-            >
-              10:00 AM
-            </Text>
+              transition={null}
+              width={36}
+            />
           </View>
           <View
             style={
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              accessibilityLabel="Message content"
-              numberOfLines={2}
+            <View
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#E4E7EA",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "flex": 1,
-                  },
-                ]
+                {
+                  "flexDirection": "row",
+                  "justifyContent": "space-between",
+                  "marginBottom": 2,
+                }
               }
-              testID="markdown-preview-Message content"
             >
-              Message content
-            </Text>
-          </View>
-          <View
-            style={
-              [
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#F2F3F5",
+                    },
+                  ]
+                }
+              >
+                rocket.cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#9EA2A8",
+                    },
+                  ]
+                }
+              >
+                10:00 AM
+              </Text>
+            </View>
+            <View
+              style={
                 {
-                  "alignItems": "center",
-                  "flex": 1,
                   "flexDirection": "row",
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
+                }
+              }
+            >
+              <Text
+                accessibilityLabel="Message content"
+                numberOfLines={2}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#E4E7EA",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Message content"
+              >
+                Message content
+              </Text>
+            </View>
             <View
               style={
                 {
+                  "alignItems": "center",
                   "flex": 1,
                   "flexDirection": "row",
+                  "marginTop": 8,
                 }
               }
             >
               <View
                 style={
                   {
-                    "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#9EA2A8",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#9EA2A8",
-                      },
-                    ]
-                  }
-                />
-              </View>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "marginRight": 8,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#9EA2A8",
-                        "fontSize": 24,
-                      },
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                          "color": "#9EA2A8",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#9EA2A8",
+                        },
+                      ]
+                    }
+                  />
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#9EA2A8",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  November 10, 2020
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#9EA2A8",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#9EA2A8",
+                        },
+                      ]
+                    }
+                  >
+                    November 10, 2020
+                  </Text>
+                </View>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    </RNGestureHandlerButton>
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={8}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#16181a"
       style={
-        {
-          "backgroundColor": "#000000",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#000000",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="discussions-view-Message content"
+      underlayColor="#16181a"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#16181a",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
-        <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
-          style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
-          }
-          testID="avatar"
-        >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
-              [
-                {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
-                },
-              ]
-            }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
         <View
           style={
             {
-              "flex": 1,
-              "flexDirection": "column",
+              "flexDirection": "row",
+              "padding": 16,
             }
           }
         >
           <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
             style={
-              {
-                "flexDirection": "row",
-                "justifyContent": "space-between",
-                "marginBottom": 2,
-              }
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
+                },
+              ]
             }
+            testID="avatar"
           >
-            <Text
-              numberOfLines={1}
-              style={
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#F2F3F5",
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
                   },
                 ]
               }
-            >
-              rocket.cat
-            </Text>
-            <Text
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#9EA2A8",
-                  },
-                ]
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
               }
-            >
-              10:00 AM
-            </Text>
+              transition={null}
+              width={36}
+            />
           </View>
           <View
             style={
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              accessibilityLabel="Message content"
-              numberOfLines={2}
+            <View
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#E4E7EA",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "flex": 1,
-                  },
-                ]
+                {
+                  "flexDirection": "row",
+                  "justifyContent": "space-between",
+                  "marginBottom": 2,
+                }
               }
-              testID="markdown-preview-Message content"
             >
-              Message content
-            </Text>
-          </View>
-          <View
-            style={
-              [
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#F2F3F5",
+                    },
+                  ]
+                }
+              >
+                rocket.cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#9EA2A8",
+                    },
+                  ]
+                }
+              >
+                10:00 AM
+              </Text>
+            </View>
+            <View
+              style={
                 {
-                  "alignItems": "center",
-                  "flex": 1,
                   "flexDirection": "row",
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
+                }
+              }
+            >
+              <Text
+                accessibilityLabel="Message content"
+                numberOfLines={2}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#E4E7EA",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Message content"
+              >
+                Message content
+              </Text>
+            </View>
             <View
               style={
                 {
+                  "alignItems": "center",
                   "flex": 1,
                   "flexDirection": "row",
+                  "marginTop": 8,
                 }
               }
             >
               <View
                 style={
                   {
-                    "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#9EA2A8",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#9EA2A8",
-                      },
-                    ]
-                  }
-                />
-              </View>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "marginRight": 8,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#9EA2A8",
-                        "fontSize": 24,
-                      },
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                          "color": "#9EA2A8",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#9EA2A8",
+                        },
+                      ]
+                    }
+                  />
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#9EA2A8",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  November 10, 2020
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#9EA2A8",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#9EA2A8",
+                        },
+                      ]
+                    }
+                  >
+                    November 10, 2020
+                  </Text>
+                </View>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
+    </RNGestureHandlerButton>
     <View
       style={
         [
diff --git a/app/views/ModalBlockView.tsx b/app/views/ModalBlockView.tsx
index 94e33b04875..1633355ba1e 100644
--- a/app/views/ModalBlockView.tsx
+++ b/app/views/ModalBlockView.tsx
@@ -12,7 +12,7 @@ import ActivityIndicator from '../containers/ActivityIndicator';
 import { textParser } from '../containers/UIKit/utils';
 import Navigation from '../lib/navigation/appNavigation';
 import { type MasterDetailInsideStackParamList } from '../stacks/MasterDetailStack/types';
-import { ContainerTypes, ModalActions } from '../containers/UIKit/interfaces';
+import { ContainerTypes, ModalActions, type TModalAction } from '../containers/UIKit/interfaces';
 import { triggerBlockAction, triggerCancel, triggerSubmitView } from '../lib/methods/triggerActions';
 import { type IApplicationState } from '../definitions';
 import KeyboardView from '../containers/KeyboardView';
@@ -164,8 +164,8 @@ class ModalBlockView extends React.Component<IModalBlockViewProps, IModalBlockVi
 		});
 	};
 
-	handleUpdate = ({ type, ...data }: { type: ModalActions }) => {
-		if ([ModalActions.ERRORS].includes(type)) {
+	handleUpdate = ({ type, ...data }: { type: TModalAction }) => {
+		if (type === ModalActions.ERRORS) {
 			const { errors }: any = data;
 			this.setState({ errors });
 		} else {
diff --git a/app/views/NewServerView/components/ServersHistoryItem/__snapshots__/ServersHistoryItem.test.tsx.snap b/app/views/NewServerView/components/ServersHistoryItem/__snapshots__/ServersHistoryItem.test.tsx.snap
index d8ea0e5ee46..03298b02ea9 100644
--- a/app/views/NewServerView/components/ServersHistoryItem/__snapshots__/ServersHistoryItem.test.tsx.snap
+++ b/app/views/NewServerView/components/ServersHistoryItem/__snapshots__/ServersHistoryItem.test.tsx.snap
@@ -144,6 +144,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={2}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -450,6 +451,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={4}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -756,6 +758,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={6}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -1067,6 +1070,7 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={11}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -1373,6 +1377,7 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={13}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -1684,6 +1689,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={17}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -1990,6 +1996,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={19}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
@@ -2296,6 +2303,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
         activeOpacity={1}
         collapsable={false}
         delayLongPress={600}
+        enabled={true}
         handlerTag={21}
         handlerType="NativeViewGestureHandler"
         innerRef={null}
diff --git a/app/views/ProfileView/components/ConfirmEmailChangeActionSheetContent/index.tsx b/app/views/ProfileView/components/ConfirmEmailChangeActionSheetContent/index.tsx
index 967fd284bf5..319fdf05ecc 100644
--- a/app/views/ProfileView/components/ConfirmEmailChangeActionSheetContent/index.tsx
+++ b/app/views/ProfileView/components/ConfirmEmailChangeActionSheetContent/index.tsx
@@ -104,7 +104,6 @@ const ConfirmEmailChangeActionSheetContent = ({
 				autoComplete='password'
 				testID='profile-view-enter-password-sheet-input'
 				secureTextEntry
-				bottomSheet={true}
 				containerStyle={styles.inputContainer}
 				error={errors.password?.message}
 			/>
diff --git a/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx b/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx
index 8f93ccc1b8f..36b5fe853bf 100644
--- a/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx
+++ b/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx
@@ -11,7 +11,6 @@ import ConfirmDeleteAccountContent from './ConfirmDeleteAccountContent';
 import { deleteOwnAccount } from '../../../../lib/services/restApi';
 import { deleteAccount } from '../../../../actions/login';
 import { CustomIcon } from '../../../../containers/CustomIcon';
-import { isIOS } from '../../../../lib/methods/helpers';
 import { useTheme } from '../../../../theme';
 import { ControlledFormTextInput } from '../../../../containers/TextInput';
 import { useActionSheet } from '../../../../containers/ActionSheet/Provider';
@@ -109,7 +108,6 @@ const DeleteAccountActionSheetContent = (): React.ReactElement => {
 				autoComplete='password'
 				testID='profile-view-delete-account-sheet-input'
 				secureTextEntry
-				bottomSheet={isIOS}
 				containerStyle={styles.inputContainer}
 				error={errors.password?.message}
 			/>
diff --git a/app/views/ReportUserView/index.tsx b/app/views/ReportUserView/index.tsx
index ad1fd079a6a..fc2d0a63ddb 100644
--- a/app/views/ReportUserView/index.tsx
+++ b/app/views/ReportUserView/index.tsx
@@ -87,7 +87,7 @@ const ReportUserView = () => {
 	return (
 		<KeyboardView>
 			<SafeAreaView style={styles.containerView} testID='report-user-view'>
-				<ScrollView contentContainerStyle={styles.scroll}>
+				<ScrollView contentContainerStyle={styles.scroll} keyboardShouldPersistTaps='always'>
 					<UserInfo username={username} name={name} />
 					<ControlledFormTextInput
 						name='description'
diff --git a/app/views/RoomMembersView/index.tsx b/app/views/RoomMembersView/index.tsx
index a285fe5f148..5e67b0a0a3a 100644
--- a/app/views/RoomMembersView/index.tsx
+++ b/app/views/RoomMembersView/index.tsx
@@ -268,7 +268,8 @@ const RoomMembersView = (): React.ReactElement => {
 										right: () => <Radio check={allUsers} />,
 										testID: 'room-members-view-toggle-status-all'
 									}
-								]
+								],
+								enableContentPanningGesture: false
 							})
 						}
 						testID='room-members-view-filter'
diff --git a/app/views/RoomView/Banner.tsx b/app/views/RoomView/Banner.tsx
index aca32f4fecc..047aa8f06a1 100644
--- a/app/views/RoomView/Banner.tsx
+++ b/app/views/RoomView/Banner.tsx
@@ -30,7 +30,7 @@ const Banner = React.memo(
 						style={[styles.bannerContainer, { backgroundColor: themes[theme].surfaceNeutral }]}
 						testID='room-view-banner'
 						onPress={toggleModal}>
-						<MarkdownPreview msg={text} style={[styles.bannerText]} />
+						<MarkdownPreview msg={text} style={styles.bannerText} />
 						<BorderlessButton onPress={closeBanner} hitSlop={10}>
 							<CustomIcon color={themes[theme].fontSecondaryInfo} name='close' size={20} />
 						</BorderlessButton>
diff --git a/app/views/RoomView/JoinCode.tsx b/app/views/RoomView/JoinCode.tsx
index 4245d5cdcbc..aa9731892d1 100644
--- a/app/views/RoomView/JoinCode.tsx
+++ b/app/views/RoomView/JoinCode.tsx
@@ -2,6 +2,7 @@ import React, { forwardRef, useImperativeHandle, useState } from 'react';
 import { InteractionManager, StyleSheet, Text, View } from 'react-native';
 import Modal from 'react-native-modal';
 import { connect } from 'react-redux';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 import I18n from '../../i18n';
 import Button from '../../containers/Button';
@@ -78,7 +79,7 @@ const JoinCode = React.memo(
 
 		return (
 			<Modal avoidKeyboard useNativeDriver isVisible={visible} hideModalContentWhileAnimating>
-				<View style={styles.container} testID='join-code'>
+				<GestureHandlerRootView style={styles.container} testID='join-code'>
 					<View
 						style={[
 							styles.content,
@@ -122,7 +123,7 @@ const JoinCode = React.memo(
 							/>
 						</View>
 					</View>
-				</View>
+				</GestureHandlerRootView>
 			</Modal>
 		);
 	})
diff --git a/app/views/RoomView/List/components/InvertedScrollView.tsx b/app/views/RoomView/List/components/InvertedScrollView.tsx
index c160fbcc42a..a441c25893c 100644
--- a/app/views/RoomView/List/components/InvertedScrollView.tsx
+++ b/app/views/RoomView/List/components/InvertedScrollView.tsx
@@ -1,153 +1,20 @@
-import React, { forwardRef, useRef, useLayoutEffect } from 'react';
-import {
-	findNodeHandle,
-	requireNativeComponent,
-	StyleSheet,
-	UIManager,
-	type StyleProp,
-	type ViewStyle,
-	type LayoutChangeEvent,
-	type ScrollViewProps,
-	type ViewProps
-} from 'react-native';
+import React, { forwardRef } from 'react';
+import { ScrollView, requireNativeComponent, type ScrollViewProps, type ViewProps } from 'react-native';
 
-const COMMAND_SCROLL_TO = 1;
-const COMMAND_SCROLL_TO_END = 2;
-const COMMAND_FLASH_SCROLL_INDICATORS = 3;
+const NativeInvertedScrollContentView = requireNativeComponent<ViewProps>('InvertedScrollContentView');
 
-const styles = StyleSheet.create({
-	baseVertical: {
-		flexGrow: 1,
-		flexShrink: 1,
-		flexDirection: 'column',
-		overflow: 'scroll'
-	},
-	baseHorizontal: {
-		flexGrow: 1,
-		flexShrink: 1,
-		flexDirection: 'row',
-		overflow: 'scroll'
-	}
-});
-
-type ScrollViewPropsWithRef = ScrollViewProps & React.RefAttributes<NativeScrollInstance | null>;
-type NativeScrollInstance = React.ComponentRef<NonNullable<typeof NativeInvertedScrollView>>;
-interface IScrollableMethods {
-	scrollTo(options?: { x?: number; y?: number; animated?: boolean }): void;
-	scrollToEnd(options?: { animated?: boolean }): void;
-	flashScrollIndicators(): void;
-	getScrollRef(): NativeScrollInstance | null;
-	setNativeProps(props: object): void;
-}
-
-export type InvertedScrollViewRef = NativeScrollInstance & IScrollableMethods;
-
-const NativeInvertedScrollView = requireNativeComponent<ScrollViewProps>('InvertedScrollView');
-
-const NativeInvertedScrollContentView = requireNativeComponent<ViewProps & { removeClippedSubviews?: boolean }>(
-	'InvertedScrollContentView'
-);
-
-const InvertedScrollView = forwardRef<InvertedScrollViewRef, ScrollViewProps>((props, externalRef) => {
-	const internalRef = useRef<NativeScrollInstance | null>(null);
-
-	useLayoutEffect(() => {
-		const node = internalRef.current as any;
-
-		if (node) {
-			// 1. Implementation of scrollTo
-			node.scrollTo = (options?: { x?: number; y?: number; animated?: boolean }) => {
-				const tag = findNodeHandle(node);
-				if (tag != null) {
-					const x = options?.x || 0;
-					const y = options?.y || 0;
-					const animated = options?.animated !== false;
-					UIManager.dispatchViewManagerCommand(tag, COMMAND_SCROLL_TO, [x, y, animated]);
-				}
-			};
-
-			// 2. Implementation of scrollToEnd
-			node.scrollToEnd = (options?: { animated?: boolean }) => {
-				const tag = findNodeHandle(node);
-				if (tag != null) {
-					const animated = options?.animated !== false;
-					UIManager.dispatchViewManagerCommand(tag, COMMAND_SCROLL_TO_END, [animated]);
-				}
-			};
-
-			// 3. Implementation of flashScrollIndicators
-			node.flashScrollIndicators = () => {
-				const tag = findNodeHandle(node as any);
-				if (tag !== null) {
-					UIManager.dispatchViewManagerCommand(tag, COMMAND_FLASH_SCROLL_INDICATORS, []);
-				}
-			};
-
-			node.getScrollRef = () => node;
-			const originalSetNativeProps = (node as any).setNativeProps;
-			if (typeof originalSetNativeProps !== 'function') {
-				node.setNativeProps = (_nativeProps: object) => {};
-			}
-		}
-	}, []);
-
-	// Callback Ref to handle merging internal and external refs
-	const setRef = (node: NativeScrollInstance | null) => {
-		internalRef.current = node;
-
-		if (typeof externalRef === 'function') {
-			externalRef(node as InvertedScrollViewRef);
-		} else if (externalRef) {
-			(externalRef as React.MutableRefObject<NativeScrollInstance | null>).current = node;
-		}
-	};
-
-	const {
-		children,
-		contentContainerStyle,
-		onContentSizeChange,
-		removeClippedSubviews,
-		maintainVisibleContentPosition,
-		snapToAlignment,
-		stickyHeaderIndices,
-		...rest
-	} = props;
-
-	const preserveChildren = maintainVisibleContentPosition != null || snapToAlignment != null;
-	const hasStickyHeaders = Array.isArray(stickyHeaderIndices) && stickyHeaderIndices.length > 0;
-
-	const contentContainerStyleArray = [props.horizontal ? { flexDirection: 'row' as const } : null, contentContainerStyle];
-
-	const contentSizeChangeProps =
-		onContentSizeChange == null
-			? undefined
-			: {
-					onLayout: (e: LayoutChangeEvent) => {
-						const { width, height } = e.nativeEvent.layout;
-						onContentSizeChange(width, height);
-					}
-			  };
-
-	const horizontal = !!props.horizontal;
-	const baseStyle = horizontal ? styles.baseHorizontal : styles.baseVertical;
-	const { style, ...restWithoutStyle } = rest;
-
-	if (!NativeInvertedScrollView || !NativeInvertedScrollContentView) {
-		return null;
-	}
-	const ScrollView = NativeInvertedScrollView as React.ComponentType<ScrollViewPropsWithRef>;
-	const ContentView = NativeInvertedScrollContentView as React.ComponentType<ViewProps & { removeClippedSubviews?: boolean }>;
+/**
+ * Android-only scroll component that wraps the standard ScrollView but uses a native content view
+ * that reverses accessibility traversal order. This fixes TalkBack reading inverted FlatList items
+ * in the wrong order, while preserving all ScrollView JS-side behavior (responder handling,
+ * momentum events, touch coordination).
+ */
+const InvertedScrollView = forwardRef<ScrollView, ScrollViewProps>((props, ref) => {
+	const { children, ...rest } = props;
 
 	return (
-		<ScrollView ref={setRef} {...restWithoutStyle} style={StyleSheet.compose(baseStyle, style)} horizontal={horizontal}>
-			<ContentView
-				{...contentSizeChangeProps}
-				removeClippedSubviews={hasStickyHeaders ? false : removeClippedSubviews}
-				collapsable={false}
-				collapsableChildren={!preserveChildren}
-				style={contentContainerStyleArray as StyleProp<ViewStyle>}>
-				{children}
-			</ContentView>
+		<ScrollView ref={ref} {...rest}>
+			<NativeInvertedScrollContentView collapsable={false}>{children}</NativeInvertedScrollContentView>
 		</ScrollView>
 	);
 });
diff --git a/app/views/RoomView/LoadMore/__snapshots__/LoadMore.test.tsx.snap b/app/views/RoomView/LoadMore/__snapshots__/LoadMore.test.tsx.snap
index 642a5d044af..024d83bbc1a 100644
--- a/app/views/RoomView/LoadMore/__snapshots__/LoadMore.test.tsx.snap
+++ b/app/views/RoomView/LoadMore/__snapshots__/LoadMore.test.tsx.snap
@@ -89,7 +89,7 @@ exports[`Story Snapshots: Basic should match snapshot 1`] = `
     activeOpacity={1}
     collapsable={false}
     delayLongPress={600}
-    enabled={false}
+    enabled={true}
     handlerTag={2}
     handlerType="NativeViewGestureHandler"
     innerRef={null}
@@ -454,324 +454,390 @@ exports[`Story Snapshots: BlackTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Hey!.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Hey!"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r0:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Hey!.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Hey!"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r0:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={6}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#16181a"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#16181a"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#16181a",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={7}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#16181a"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#F2F3F5",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#16181a"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#16181a",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#9EA2A8",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#F2F3F5",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#9EA2A8",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Hey!"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Hey!"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#E4E7EA",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#E4E7EA",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Hey!"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#E4E7EA",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Hey!
+                                <Text
+                                  accessibilityLabel="Hey!"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#E4E7EA",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Hey!
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -816,141 +882,155 @@ exports[`Story Snapshots: BlackTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r1:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r1:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#E4E7EA",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#E4E7EA",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#E4E7EA",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+                                <Text
+                                  accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#E4E7EA",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -995,141 +1075,155 @@ exports[`Story Snapshots: BlackTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Older message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Older message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r2:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Older message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Older message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r2:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-Older message"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Older message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#E4E7EA",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#E4E7EA",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Older message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#E4E7EA",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Older message
+                                <Text
+                                  accessibilityLabel="Older message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#E4E7EA",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Older message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -1139,7 +1233,7 @@ exports[`Story Snapshots: BlackTheme should match snapshot 1`] = `
       collapsable={false}
       delayLongPress={600}
       enabled={true}
-      handlerTag={6}
+      handlerTag={8}
       handlerType="NativeViewGestureHandler"
       innerRef={null}
       onActiveStateChange={[Function]}
@@ -1222,7 +1316,7 @@ exports[`Story Snapshots: BlackTheme should match snapshot 1`] = `
       collapsable={false}
       delayLongPress={600}
       enabled={true}
-      handlerTag={7}
+      handlerTag={9}
       handlerType="NativeViewGestureHandler"
       innerRef={null}
       onActiveStateChange={[Function]}
@@ -1340,324 +1434,390 @@ exports[`Story Snapshots: BlackTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r3:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r3:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={10}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#16181a"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#16181a"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#16181a",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={11}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#16181a"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#F2F3F5",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#16181a"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#16181a",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#9EA2A8",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#F2F3F5",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#9EA2A8",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#E4E7EA",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#E4E7EA",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#E4E7EA",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+                                <Text
+                                  accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#E4E7EA",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -1702,141 +1862,155 @@ exports[`Story Snapshots: BlackTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is the third message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is the third message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r4:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is the third message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is the third message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r4:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-This is the third message"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This is the third message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#E4E7EA",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#E4E7EA",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This is the third message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#E4E7EA",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This is the third message
+                                <Text
+                                  accessibilityLabel="This is the third message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#E4E7EA",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This is the third message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -1881,141 +2055,155 @@ exports[`Story Snapshots: BlackTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is the second message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is the second message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r5:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is the second message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is the second message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r5:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-This is the second message"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This is the second message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#E4E7EA",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#E4E7EA",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This is the second message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#E4E7EA",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This is the second message
+                                <Text
+                                  accessibilityLabel="This is the second message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#E4E7EA",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This is the second message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -2060,324 +2248,390 @@ exports[`Story Snapshots: BlackTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is the first message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is the first message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r6:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is the first message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is the first message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r6:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={12}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#16181a"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#16181a"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#16181a",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={13}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#16181a"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#F2F3F5",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#16181a"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#16181a",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#9EA2A8",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#F2F3F5",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#9EA2A8",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-This is the first message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This is the first message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#E4E7EA",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#E4E7EA",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This is the first message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#E4E7EA",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This is the first message
+                                <Text
+                                  accessibilityLabel="This is the first message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#E4E7EA",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This is the first message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -2400,7 +2654,7 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
       collapsable={false}
       delayLongPress={600}
       enabled={true}
-      handlerTag={8}
+      handlerTag={14}
       handlerType="NativeViewGestureHandler"
       innerRef={null}
       onActiveStateChange={[Function]}
@@ -2518,324 +2772,390 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Hey!.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Hey!"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r7:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Hey!.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Hey!"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r7:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={15}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#2D3039"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#2D3039"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#2D3039",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={16}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#2D3039"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#F2F3F5",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#2D3039"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#2D3039",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#9EA2A8",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#F2F3F5",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#9EA2A8",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Hey!"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Hey!"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#E4E7EA",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#E4E7EA",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Hey!"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#E4E7EA",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Hey!
+                                <Text
+                                  accessibilityLabel="Hey!"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#E4E7EA",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Hey!
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -2880,141 +3200,155 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r8:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r8:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#E4E7EA",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#E4E7EA",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#E4E7EA",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+                                <Text
+                                  accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#E4E7EA",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -3059,141 +3393,155 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Older message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Older message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":r9:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Older message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Older message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":r9:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-Older message"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Older message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#E4E7EA",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#E4E7EA",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Older message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#E4E7EA",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Older message
+                                <Text
+                                  accessibilityLabel="Older message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#E4E7EA",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Older message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -3203,7 +3551,7 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
       collapsable={false}
       delayLongPress={600}
       enabled={true}
-      handlerTag={9}
+      handlerTag={17}
       handlerType="NativeViewGestureHandler"
       innerRef={null}
       onActiveStateChange={[Function]}
@@ -3286,7 +3634,7 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
       collapsable={false}
       delayLongPress={600}
       enabled={true}
-      handlerTag={10}
+      handlerTag={18}
       handlerType="NativeViewGestureHandler"
       innerRef={null}
       onActiveStateChange={[Function]}
@@ -3404,324 +3752,390 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":ra:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":ra:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={19}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#2D3039"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#2D3039"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#2D3039",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={20}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#2D3039"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#F2F3F5",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#2D3039"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#2D3039",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#9EA2A8",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#F2F3F5",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#9EA2A8",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#E4E7EA",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#E4E7EA",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#E4E7EA",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+                                <Text
+                                  accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#E4E7EA",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -3766,141 +4180,155 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is the third message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is the third message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rb:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is the third message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is the third message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rb:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-This is the third message"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This is the third message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#E4E7EA",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#E4E7EA",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This is the third message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#E4E7EA",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This is the third message
+                                <Text
+                                  accessibilityLabel="This is the third message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#E4E7EA",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This is the third message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -3945,141 +4373,155 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is the second message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is the second message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rc:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is the second message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is the second message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rc:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-This is the second message"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This is the second message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#E4E7EA",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#E4E7EA",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This is the second message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#E4E7EA",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This is the second message
+                                <Text
+                                  accessibilityLabel="This is the second message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#E4E7EA",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This is the second message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -4124,324 +4566,390 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is the first message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is the first message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rd:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is the first message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is the first message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rd:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={21}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#2D3039"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#2D3039"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#2D3039",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={22}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#2D3039"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#F2F3F5",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#2D3039"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#2D3039",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#9EA2A8",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#F2F3F5",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#9EA2A8",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-This is the first message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This is the first message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#E4E7EA",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#E4E7EA",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This is the first message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#E4E7EA",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This is the first message
+                                <Text
+                                  accessibilityLabel="This is the first message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#E4E7EA",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This is the first message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -4464,7 +4972,7 @@ exports[`Story Snapshots: LightTheme should match snapshot 1`] = `
       collapsable={false}
       delayLongPress={600}
       enabled={true}
-      handlerTag={11}
+      handlerTag={23}
       handlerType="NativeViewGestureHandler"
       innerRef={null}
       onActiveStateChange={[Function]}
@@ -4582,324 +5090,390 @@ exports[`Story Snapshots: LightTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Hey!.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Hey!"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":re:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Hey!.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Hey!"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":re:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={24}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
+                  </View>
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={25}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Hey!"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Hey!"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Hey!"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Hey!
+                                <Text
+                                  accessibilityLabel="Hey!"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Hey!
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -4944,141 +5518,155 @@ exports[`Story Snapshots: LightTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rf:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rf:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+                                <Text
+                                  accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -5123,141 +5711,155 @@ exports[`Story Snapshots: LightTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Older message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Older message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rg:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Older message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Older message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rg:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-Older message"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Older message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Older message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Older message
+                                <Text
+                                  accessibilityLabel="Older message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Older message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -5267,7 +5869,7 @@ exports[`Story Snapshots: LightTheme should match snapshot 1`] = `
       collapsable={false}
       delayLongPress={600}
       enabled={true}
-      handlerTag={12}
+      handlerTag={26}
       handlerType="NativeViewGestureHandler"
       innerRef={null}
       onActiveStateChange={[Function]}
@@ -5350,7 +5952,7 @@ exports[`Story Snapshots: LightTheme should match snapshot 1`] = `
       collapsable={false}
       delayLongPress={600}
       enabled={true}
-      handlerTag={13}
+      handlerTag={27}
       handlerType="NativeViewGestureHandler"
       innerRef={null}
       onActiveStateChange={[Function]}
@@ -5468,324 +6070,390 @@ exports[`Story Snapshots: LightTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rh:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rh:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={28}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={29}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+                                <Text
+                                  accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -5830,141 +6498,155 @@ exports[`Story Snapshots: LightTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is the third message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is the third message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":ri:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is the third message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is the third message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":ri:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-This is the third message"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This is the third message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This is the third message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This is the third message
+                                <Text
+                                  accessibilityLabel="This is the third message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This is the third message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -6009,141 +6691,155 @@ exports[`Story Snapshots: LightTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is the second message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is the second message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rj:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is the second message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is the second message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rj:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    onLayout={[Function]}
+                    style={
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
+                    }
+                  />
+                  <View
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "gap": 4,
+                          "flex": 1,
                         }
                       }
                     >
                       <View
-                        testID="message-content-This is the second message"
+                        style={
+                          {
+                            "gap": 4,
+                          }
+                        }
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This is the second message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This is the second message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This is the second message
+                                <Text
+                                  accessibilityLabel="This is the second message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This is the second message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flexDirection": "row",
+                  <View
+                    style={
+                      {
+                        "flexDirection": "row",
+                      }
                     }
-                  }
-                />
-              </View>
-            </A11yIndexView>
+                  />
+                </View>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
@@ -6188,324 +6884,390 @@ exports[`Story Snapshots: LightTheme should match snapshot 1`] = `
           style={
             {
               "backgroundColor": undefined,
+              "borderRadius": undefined,
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
               "opacity": 1,
             }
           }
         >
           <View
-            accessibilityLabel="diego.mello 10:00:00 AM  This is the first message.  "
-            accessible={true}
-            style={
-              {
-                "flexDirection": "column",
-                "gap": 8,
-                "paddingHorizontal": 12,
-                "paddingVertical": 4,
-                "width": "100%",
-              }
-            }
-            testID="message-undefined"
+            style={{}}
           >
-            <A11yIndexView
-              accessibilityLabel="This is the first message"
-              importantForAccessibility="yes"
-              orderFocusType={0}
-              orderIndex={2}
-              orderKey=":rk:"
-            >
-              <View
-                accessible={true}
-                style={
-                  {
-                    "flexDirection": "row",
-                  }
+            <View
+              accessibilityLabel="diego.mello 10:00:00 AM  This is the first message.  "
+              accessible={true}
+              style={
+                {
+                  "flexDirection": "column",
+                  "gap": 8,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                  "width": "100%",
                 }
+              }
+              testID="message-undefined"
+            >
+              <A11yIndexView
+                accessibilityLabel="This is the first message"
+                importantForAccessibility="yes"
+                orderFocusType={0}
+                orderIndex={2}
+                orderKey=":rk:"
               >
                 <View
+                  accessible={true}
                   style={
                     {
-                      "alignItems": "flex-end",
-                      "width": 36,
+                      "flexDirection": "row",
                     }
                   }
                 >
                   <View
-                    accessible={true}
                     style={
-                      [
-                        {
-                          "borderRadius": 4,
-                          "height": 36,
-                          "width": 36,
-                        },
-                        {
-                          "marginTop": 4,
-                        },
-                      ]
+                      {
+                        "alignItems": "flex-end",
+                        "width": 36,
+                      }
                     }
-                    testID="avatar"
                   >
                     <View
-                      accessibilityLabel="diego.mello's avatar"
-                      accessibilityState={
-                        {
-                          "busy": undefined,
-                          "checked": undefined,
-                          "disabled": undefined,
-                          "expanded": undefined,
-                          "selected": undefined,
-                        }
-                      }
-                      accessibilityValue={
-                        {
-                          "max": undefined,
-                          "min": undefined,
-                          "now": undefined,
-                          "text": undefined,
-                        }
-                      }
                       accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
-                        {
-                          "opacity": 1,
-                        }
+                        [
+                          {
+                            "borderRadius": 4,
+                            "height": 36,
+                            "width": 36,
+                          },
+                          {
+                            "marginTop": 4,
+                          },
+                        ]
                       }
+                      testID="avatar"
                     >
-                      <ViewManagerAdapter_ExpoImage
-                        borderRadius={4}
-                        containerViewRef={"[React.ref]"}
-                        contentFit="cover"
-                        contentPosition={
-                          {
-                            "left": "50%",
-                            "top": "50%",
-                          }
-                        }
-                        height={36}
-                        nativeViewRef={"[React.ref]"}
-                        onError={[Function]}
-                        onLoad={[Function]}
-                        onLoadStart={[Function]}
-                        onProgress={[Function]}
-                        placeholder={[]}
-                        priority="high"
-                        source={
+                      <RNGestureHandlerButton
+                        activeOpacity={1}
+                        collapsable={false}
+                        delayLongPress={600}
+                        enabled={true}
+                        handlerTag={30}
+                        handlerType="NativeViewGestureHandler"
+                        innerRef={null}
+                        onActiveStateChange={[Function]}
+                        onGestureHandlerEvent={[Function]}
+                        onGestureHandlerStateChange={[Function]}
+                        onPress={[Function]}
+                        rippleColor="#E4E7EA"
+                        style={
                           [
                             {
-                              "headers": {
-                                "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                              },
-                              "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "cursor": undefined,
                             },
                           ]
                         }
-                        style={
-                          {
-                            "borderRadius": 4,
-                            "height": 36,
-                            "width": 36,
+                        underlayColor="#E4E7EA"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            {
+                              "backgroundColor": "#E4E7EA",
+                              "borderBottomLeftRadius": undefined,
+                              "borderBottomRightRadius": undefined,
+                              "borderRadius": undefined,
+                              "borderTopLeftRadius": undefined,
+                              "borderTopRightRadius": undefined,
+                              "bottom": 0,
+                              "left": 0,
+                              "opacity": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                        transition={null}
-                        width={36}
-                      />
+                        />
+                        <View
+                          accessibilityLabel="diego.mello's avatar"
+                          accessible={true}
+                          style={{}}
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={"[React.ref]"}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={36}
+                            nativeViewRef={"[React.ref]"}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 36,
+                                "width": 36,
+                              }
+                            }
+                            transition={null}
+                            width={36}
+                          />
+                        </View>
+                      </RNGestureHandlerButton>
                     </View>
                   </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "marginLeft": 10,
-                    }
-                  }
-                >
                   <View
-                    onLayout={[Function]}
                     style={
                       {
                         "flex": 1,
+                        "marginLeft": 10,
                       }
                     }
                   >
                     <View
+                      onLayout={[Function]}
                       style={
                         {
-                          "alignItems": "center",
                           "flex": 1,
-                          "flexDirection": "row",
-                          "justifyContent": "space-between",
                         }
                       }
                     >
                       <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
                         style={
                           {
                             "alignItems": "center",
+                            "flex": 1,
                             "flexDirection": "row",
-                            "flexShrink": 1,
-                            "gap": 4,
-                            "opacity": 1,
+                            "justifyContent": "space-between",
                           }
                         }
-                        testID="username-header-diego.mello"
                       >
-                        <Text
-                          numberOfLines={1}
+                        <RNGestureHandlerButton
+                          activeOpacity={1}
+                          collapsable={false}
+                          delayLongPress={600}
+                          enabled={true}
+                          handlerTag={31}
+                          handlerType="NativeViewGestureHandler"
+                          innerRef={null}
+                          onActiveStateChange={[Function]}
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          onPress={[Function]}
+                          rippleColor="#E4E7EA"
                           style={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontWeight": "600",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "backgroundColor": undefined,
+                                "borderRadius": undefined,
+                                "margin": undefined,
+                                "marginBottom": undefined,
+                                "marginEnd": undefined,
+                                "marginHorizontal": undefined,
+                                "marginLeft": undefined,
+                                "marginRight": undefined,
+                                "marginStart": undefined,
+                                "marginTop": undefined,
+                                "marginVertical": undefined,
                               },
                               {
-                                "color": "#1F2329",
+                                "cursor": undefined,
                               },
                             ]
                           }
+                          testID="username-header-diego.mello"
+                          underlayColor="#E4E7EA"
                         >
-                          diego.mello
-                        </Text>
-                        <Text
-                          style={
-                            [
+                          <View
+                            collapsable={false}
+                            style={
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 13,
-                                "fontWeight": "400",
-                                "lineHeight": 18,
-                                "textAlign": "left",
-                              },
+                                "backgroundColor": "#E4E7EA",
+                                "borderBottomLeftRadius": undefined,
+                                "borderBottomRightRadius": undefined,
+                                "borderRadius": undefined,
+                                "borderTopLeftRadius": undefined,
+                                "borderTopRightRadius": undefined,
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <View
+                            style={
                               {
-                                "color": "#6C727A",
-                              },
-                            ]
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "flexShrink": 1,
+                                "gap": 4,
+                              }
+                            }
+                          >
+                            <Text
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "600",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              diego.mello
+                            </Text>
+                            <Text
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 13,
+                                    "fontWeight": "400",
+                                    "lineHeight": 18,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#6C727A",
+                                  },
+                                ]
+                              }
+                            >
+                              10:00 AM
+                            </Text>
+                          </View>
+                        </RNGestureHandlerButton>
+                        <View
+                          style={
+                            {
+                              "flexDirection": "row",
+                            }
                           }
-                        >
-                          10:00 AM
-                        </Text>
+                        />
                       </View>
                       <View
                         style={
                           {
-                            "flexDirection": "row",
+                            "gap": 4,
                           }
                         }
-                      />
-                    </View>
-                    <View
-                      style={
-                        {
-                          "gap": 4,
-                        }
-                      }
-                    >
-                      <View
-                        testID="message-content-This is the first message"
                       >
                         <View
-                          style={
-                            {
-                              "gap": 2,
-                            }
-                          }
+                          testID="message-content-This is the first message"
                         >
-                          <Text
+                          <View
                             style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
+                              {
+                                "gap": 2,
+                              }
                             }
                           >
                             <Text
                               style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontWeight": "400",
+                                    "lineHeight": 22,
+                                    "textAlign": "left",
+                                  },
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
                               }
                             >
                               <Text
-                                accessibilityLabel="This is the first message"
                                 style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontWeight": "400",
+                                    "textAlign": "left",
+                                  }
                                 }
                               >
-                                This is the first message
+                                <Text
+                                  accessibilityLabel="This is the first message"
+                                  style={
+                                    [
+                                      {
+                                        "flexShrink": 1,
+                                        "fontSize": 16,
+                                        "lineHeight": 22,
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  This is the first message
+                                </Text>
                               </Text>
                             </Text>
-                          </Text>
+                          </View>
                         </View>
                       </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            </A11yIndexView>
+              </A11yIndexView>
+            </View>
           </View>
         </View>
       </A11yIndexView>
diff --git a/app/views/RoomView/ReactionPicker.tsx b/app/views/RoomView/ReactionPicker.tsx
index 60f38c7fbe5..6d2ce348b3b 100644
--- a/app/views/RoomView/ReactionPicker.tsx
+++ b/app/views/RoomView/ReactionPicker.tsx
@@ -45,7 +45,7 @@ const ReactionPicker = ({ onEmojiSelected, messageId, reactionClose }: IReaction
 			<View style={styles.reactionSearchContainer}>
 				<EmojiSearch onChangeText={handleTextChange} bottomSheet />
 			</View>
-			<EmojiPicker onItemClicked={handleEmojiSelect} searching={searching} searchedEmojis={searchedEmojis} />
+			<EmojiPicker onItemClicked={handleEmojiSelect} searching={searching} searchedEmojis={searchedEmojis} bottomSheet />
 		</View>
 	);
 };
diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx
index 89c851ab168..2622040f562 100644
--- a/app/views/RoomView/index.tsx
+++ b/app/views/RoomView/index.tsx
@@ -855,9 +855,10 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 				),
 				snaps: ['50%'],
 				enableContentPanningGesture: false,
-				onClose: this.resetAction
+				onClose: this.resetAction,
+				fullContainer: true
 			});
-		}, 100);
+		}, 300);
 	};
 
 	onReactionInit = (messageId: string) => {
@@ -914,7 +915,8 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		this.handleCloseEmoji(showActionSheet, {
 			children: <ReactionsList reactions={message?.reactions} getCustomEmoji={this.getCustomEmoji} />,
 			snaps: ['50%'],
-			enableContentPanningGesture: false
+			enableContentPanningGesture: false,
+			fullContainer: true
 		});
 	};
 
diff --git a/app/views/RoomsListView/components/ServersList.tsx b/app/views/RoomsListView/components/ServersList.tsx
index 850eea2375e..a1a052ae451 100644
--- a/app/views/RoomsListView/components/ServersList.tsx
+++ b/app/views/RoomsListView/components/ServersList.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useRef, useState } from 'react';
+import React, { memo, useLayoutEffect, useRef, useState } from 'react';
 import { FlatList, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { batch, useDispatch } from 'react-redux';
@@ -39,10 +39,10 @@ const ServersList = () => {
 	const { colors } = useTheme();
 	const insets = useSafeAreaInsets();
 
-	useEffect(() => {
-		const init = async () => {
+	useLayoutEffect(() => {
+		const init = () => {
 			const serversDB = database.servers;
-			const observable = await serversDB.get('servers').query().observeWithColumns(['name']);
+			const observable = serversDB.get('servers').query().observeWithColumns(['name']);
 
 			subscription.current = observable.subscribe(data => {
 				setServers(data);
diff --git a/app/views/ScreenLockedView.tsx b/app/views/ScreenLockedView.tsx
index 672af98113e..0733998516c 100644
--- a/app/views/ScreenLockedView.tsx
+++ b/app/views/ScreenLockedView.tsx
@@ -2,7 +2,6 @@ import isEmpty from 'lodash/isEmpty';
 import React, { useEffect, useState } from 'react';
 import { StyleSheet } from 'react-native';
 import Modal from 'react-native-modal';
-import Touchable from 'react-native-platform-touchable';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 
 import { PasscodeEnter } from '../containers/Passcode';
@@ -10,6 +9,7 @@ import { LOCAL_AUTHENTICATE_EMITTER } from '../lib/constants/localAuthentication
 import { CustomIcon } from '../containers/CustomIcon';
 import { hasNotch } from '../lib/methods/helpers';
 import EventEmitter from '../lib/methods/helpers/events';
+import Touch from '../containers/Touch';
 
 interface IData {
 	submit?: () => void;
@@ -75,9 +75,9 @@ const ScreenLockedView = (): JSX.Element => {
 			animationOut='fadeOut'>
 			<PasscodeEnter hasBiometry={!!data?.hasBiometry} finishProcess={onSubmit} />
 			{data?.force ? (
-				<Touchable onPress={onCancel} style={styles.close}>
+				<Touch onPress={onCancel} style={styles.close}>
 					<CustomIcon name='close' size={30} />
-				</Touchable>
+				</Touch>
 			) : null}
 		</Modal>
 	);
diff --git a/app/views/SelectServerView.tsx b/app/views/SelectServerView.tsx
index 25cf0969f93..c77df86d021 100644
--- a/app/views/SelectServerView.tsx
+++ b/app/views/SelectServerView.tsx
@@ -15,7 +15,7 @@ import { type TServerModel } from '../definitions';
 import { useAppSelector } from '../lib/hooks/useAppSelector';
 import { selectServerRequest } from '../actions/server';
 
-const getItemLayout = (data: any, index: number) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index });
+const getItemLayout = (_data: any, index: number) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index });
 const keyExtractor = (item: TServerModel) => item.id;
 
 const SelectServerView = () => {
diff --git a/app/views/ThreadMessagesView/Item.tsx b/app/views/ThreadMessagesView/Item.tsx
index edeea31e46a..94ec80ffc36 100644
--- a/app/views/ThreadMessagesView/Item.tsx
+++ b/app/views/ThreadMessagesView/Item.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import Touchable from 'react-native-platform-touchable';
 
 import { useTheme } from '../../theme';
 import Avatar from '../../containers/Avatar';
@@ -10,6 +9,7 @@ import { MarkdownPreview } from '../../containers/markdown';
 import { formatDateThreads, makeThreadName } from '../../lib/methods/helpers/room';
 import ThreadDetails from '../../containers/ThreadDetails';
 import { type TThreadModel } from '../../definitions';
+import Touch from '../../containers/Touch';
 
 const styles = StyleSheet.create({
 	container: {
@@ -74,7 +74,7 @@ const Item = ({ item, useRealName, user, badgeColor, onPress, toggleFollowThread
 	}
 
 	return (
-		<Touchable
+		<Touch
 			onPress={() => onPress(item)}
 			testID={`thread-messages-view-${item.msg}`}
 			style={{ backgroundColor: themes[theme].surfaceRoom }}>
@@ -88,13 +88,13 @@ const Item = ({ item, useRealName, user, badgeColor, onPress, toggleFollowThread
 						<Text style={[styles.time, { color: themes[theme].fontSecondaryInfo }]}>{time}</Text>
 					</View>
 					<View style={styles.messageContainer}>
-						<MarkdownPreview msg={makeThreadName(item)} numberOfLines={2} style={[styles.markdown]} />
+						<MarkdownPreview msg={makeThreadName(item)} numberOfLines={2} style={styles.markdown} />
 						{badgeColor ? <View style={[styles.badge, { backgroundColor: badgeColor }]} /> : null}
 					</View>
 					<ThreadDetails item={item} user={user} toggleFollowThread={toggleFollowThread} style={styles.threadDetails} />
 				</View>
 			</View>
-		</Touchable>
+		</Touch>
 	);
 };
 
diff --git a/app/views/ThreadMessagesView/__snapshots__/Item.test.tsx.snap b/app/views/ThreadMessagesView/__snapshots__/Item.test.tsx.snap
index abad0d4166c..ac9fa0f75d2 100644
--- a/app/views/ThreadMessagesView/__snapshots__/Item.test.tsx.snap
+++ b/app/views/ThreadMessagesView/__snapshots__/Item.test.tsx.snap
@@ -16,424 +16,471 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
         ]
       }
     />
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={1}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="thread-messages-view-Message content"
+      underlayColor="#E4E7EA"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
-        <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
-          style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
-          }
-          testID="avatar"
-        >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
-              [
-                {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
-                },
-              ]
-            }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
         <View
           style={
             {
-              "flex": 1,
-              "flexDirection": "column",
+              "flexDirection": "row",
+              "padding": 16,
             }
           }
         >
           <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "marginBottom": 2,
-              }
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
+                },
+              ]
             }
+            testID="avatar"
           >
-            <Text
-              numberOfLines={1}
-              style={
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
                   },
                 ]
               }
-            >
-              rocket.cat
-            </Text>
-            <Text
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#6C727A",
-                  },
-                ]
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
               }
-            >
-              November 10, 2020
-            </Text>
+              transition={null}
+              width={36}
+            />
           </View>
           <View
             style={
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              accessibilityLabel="Message content"
-              numberOfLines={2}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "flex": 1,
-                  },
-                ]
-              }
-              testID="markdown-preview-Message content"
-            >
-              Message content
-            </Text>
             <View
               style={
-                [
-                  {
-                    "alignSelf": "center",
-                    "borderRadius": 4,
-                    "height": 8,
-                    "marginHorizontal": 8,
-                    "width": 8,
-                  },
-                  {
-                    "backgroundColor": "#F5455C",
-                  },
-                ]
-              }
-            />
-          </View>
-          <View
-            style={
-              [
                 {
                   "alignItems": "center",
-                  "flex": 1,
                   "flexDirection": "row",
-                },
-                {
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
+                  "marginBottom": 2,
+                }
+              }
+            >
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                rocket.cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#6C727A",
+                    },
+                  ]
+                }
+              >
+                November 10, 2020
+              </Text>
+            </View>
             <View
               style={
                 {
-                  "flex": 1,
                   "flexDirection": "row",
                 }
               }
             >
+              <Text
+                accessibilityLabel="Message content"
+                numberOfLines={2}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Message content"
+              >
+                Message content
+              </Text>
               <View
                 style={
+                  [
+                    {
+                      "alignSelf": "center",
+                      "borderRadius": 4,
+                      "height": 8,
+                      "marginHorizontal": 8,
+                      "width": 8,
+                    },
+                    {
+                      "backgroundColor": "#F5455C",
+                    },
+                  ]
+                }
+              />
+            </View>
+            <View
+              style={
+                [
                   {
                     "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                  testID="thread-count-1"
-                >
-                  1
-                </Text>
-              </View>
+                  },
+                  {
+                    "marginTop": 8,
+                  },
+                ]
+              }
+            >
               <View
                 style={
                   {
-                    "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
+                          "color": "#2F343D",
+                          "fontSize": 24,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                    testID="thread-count-1"
+                  >
+                    1
+                  </Text>
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  1
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#2F343D",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    1
+                  </Text>
+                </View>
               </View>
-            </View>
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                }
-              }
-            >
               <View
-                accessibilityLabel="Follow thread"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
                 style={
                   {
-                    "opacity": 1,
+                    "alignItems": "center",
+                    "flexDirection": "row",
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={2}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#E4E7EA"
                   style={
                     [
                       {
-                        "color": "#2F343D",
-                        "fontSize": 24,
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
                       },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "cursor": undefined,
                       },
-                      {},
                     ]
                   }
+                  underlayColor="#E4E7EA"
                 >
-                  
-                </Text>
+                  <View
+                    collapsable={false}
+                    style={
+                      {
+                        "backgroundColor": "#E4E7EA",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityLabel="Follow thread"
+                    style={{}}
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#2F343D",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ],
+                          {
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                    >
+                      
+                    </Text>
+                  </View>
+                </RNGestureHandlerButton>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
+    </RNGestureHandlerButton>
     <View
       style={
         [
@@ -447,424 +494,471 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
         ]
       }
     />
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={3}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="thread-messages-view-Message content"
+      underlayColor="#E4E7EA"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
-        <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
-          style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
-          }
-          testID="avatar"
-        >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
-              [
-                {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
-                },
-              ]
-            }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
         <View
           style={
             {
-              "flex": 1,
-              "flexDirection": "column",
+              "flexDirection": "row",
+              "padding": 16,
             }
           }
         >
           <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "marginBottom": 2,
-              }
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
+                },
+              ]
             }
+            testID="avatar"
           >
-            <Text
-              numberOfLines={1}
-              style={
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
                   },
                 ]
               }
-            >
-              rocket.cat
-            </Text>
-            <Text
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#6C727A",
-                  },
-                ]
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
               }
-            >
-              November 10, 2020
-            </Text>
+              transition={null}
+              width={36}
+            />
           </View>
           <View
             style={
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              accessibilityLabel="Message content"
-              numberOfLines={2}
+            <View
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "flex": 1,
-                  },
-                ]
-              }
-              testID="markdown-preview-Message content"
-            >
-              Message content
-            </Text>
-            <View
-              style={
-                [
-                  {
-                    "alignSelf": "center",
-                    "borderRadius": 4,
-                    "height": 8,
-                    "marginHorizontal": 8,
-                    "width": 8,
-                  },
-                  {
-                    "backgroundColor": "#F38C39",
-                  },
-                ]
-              }
-            />
-          </View>
-          <View
-            style={
-              [
                 {
                   "alignItems": "center",
-                  "flex": 1,
                   "flexDirection": "row",
-                },
-                {
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
+                  "marginBottom": 2,
+                }
+              }
+            >
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                rocket.cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#6C727A",
+                    },
+                  ]
+                }
+              >
+                November 10, 2020
+              </Text>
+            </View>
             <View
               style={
                 {
-                  "flex": 1,
                   "flexDirection": "row",
                 }
               }
             >
+              <Text
+                accessibilityLabel="Message content"
+                numberOfLines={2}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Message content"
+              >
+                Message content
+              </Text>
               <View
                 style={
+                  [
+                    {
+                      "alignSelf": "center",
+                      "borderRadius": 4,
+                      "height": 8,
+                      "marginHorizontal": 8,
+                      "width": 8,
+                    },
+                    {
+                      "backgroundColor": "#F38C39",
+                    },
+                  ]
+                }
+              />
+            </View>
+            <View
+              style={
+                [
                   {
                     "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                  testID="thread-count-1"
-                >
-                  1
-                </Text>
-              </View>
+                  },
+                  {
+                    "marginTop": 8,
+                  },
+                ]
+              }
+            >
               <View
                 style={
                   {
-                    "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
+                          "color": "#2F343D",
+                          "fontSize": 24,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                    testID="thread-count-1"
+                  >
+                    1
+                  </Text>
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  1
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#2F343D",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    1
+                  </Text>
+                </View>
               </View>
-            </View>
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                }
-              }
-            >
               <View
-                accessibilityLabel="Follow thread"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
                 style={
                   {
-                    "opacity": 1,
+                    "alignItems": "center",
+                    "flexDirection": "row",
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={4}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#E4E7EA"
                   style={
                     [
                       {
-                        "color": "#2F343D",
-                        "fontSize": 24,
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
                       },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "cursor": undefined,
                       },
-                      {},
                     ]
                   }
+                  underlayColor="#E4E7EA"
                 >
-                  
-                </Text>
+                  <View
+                    collapsable={false}
+                    style={
+                      {
+                        "backgroundColor": "#E4E7EA",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityLabel="Follow thread"
+                    style={{}}
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#2F343D",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ],
+                          {
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                    >
+                      
+                    </Text>
+                  </View>
+                </RNGestureHandlerButton>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
+    </RNGestureHandlerButton>
     <View
       style={
         [
@@ -878,842 +972,936 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
         ]
       }
     />
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={5}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="thread-messages-view-Message content"
+      underlayColor="#E4E7EA"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
-        <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
-          style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
-          }
-          testID="avatar"
-        >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
-              [
-                {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
-                },
-              ]
-            }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
         <View
           style={
             {
-              "flex": 1,
-              "flexDirection": "column",
+              "flexDirection": "row",
+              "padding": 16,
             }
           }
         >
           <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "marginBottom": 2,
-              }
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
+                },
+              ]
             }
+            testID="avatar"
           >
-            <Text
-              numberOfLines={1}
-              style={
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
                   },
                 ]
               }
-            >
-              rocket.cat
-            </Text>
-            <Text
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#6C727A",
-                  },
-                ]
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
               }
-            >
-              November 10, 2020
-            </Text>
+              transition={null}
+              width={36}
+            />
           </View>
           <View
             style={
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              accessibilityLabel="Message content"
-              numberOfLines={2}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "flex": 1,
-                  },
-                ]
-              }
-              testID="markdown-preview-Message content"
-            >
-              Message content
-            </Text>
             <View
               style={
-                [
-                  {
-                    "alignSelf": "center",
-                    "borderRadius": 4,
-                    "height": 8,
-                    "marginHorizontal": 8,
-                    "width": 8,
-                  },
-                  {
-                    "backgroundColor": "#095AD2",
-                  },
-                ]
-              }
-            />
-          </View>
-          <View
-            style={
-              [
                 {
                   "alignItems": "center",
-                  "flex": 1,
                   "flexDirection": "row",
-                },
-                {
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
+                  "marginBottom": 2,
+                }
+              }
+            >
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                rocket.cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#6C727A",
+                    },
+                  ]
+                }
+              >
+                November 10, 2020
+              </Text>
+            </View>
             <View
               style={
                 {
-                  "flex": 1,
                   "flexDirection": "row",
                 }
               }
             >
+              <Text
+                accessibilityLabel="Message content"
+                numberOfLines={2}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Message content"
+              >
+                Message content
+              </Text>
               <View
                 style={
+                  [
+                    {
+                      "alignSelf": "center",
+                      "borderRadius": 4,
+                      "height": 8,
+                      "marginHorizontal": 8,
+                      "width": 8,
+                    },
+                    {
+                      "backgroundColor": "#095AD2",
+                    },
+                  ]
+                }
+              />
+            </View>
+            <View
+              style={
+                [
                   {
                     "alignItems": "center",
+                    "flex": 1,
+                    "flexDirection": "row",
+                  },
+                  {
+                    "marginTop": 8,
+                  },
+                ]
+              }
+            >
+              <View
+                style={
+                  {
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
-                  testID="thread-count-1"
                 >
-                  1
-                </Text>
-              </View>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "marginRight": 8,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
+                          "color": "#2F343D",
+                          "fontSize": 24,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                    testID="thread-count-1"
+                  >
+                    1
+                  </Text>
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  1
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#2F343D",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    1
+                  </Text>
+                </View>
               </View>
-            </View>
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                }
-              }
-            >
               <View
-                accessibilityLabel="Follow thread"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
                 style={
                   {
-                    "opacity": 1,
+                    "alignItems": "center",
+                    "flexDirection": "row",
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={6}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#E4E7EA"
                   style={
                     [
                       {
-                        "color": "#2F343D",
-                        "fontSize": 24,
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
                       },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "cursor": undefined,
                       },
-                      {},
                     ]
                   }
+                  underlayColor="#E4E7EA"
                 >
-                  
-                </Text>
+                  <View
+                    collapsable={false}
+                    style={
+                      {
+                        "backgroundColor": "#E4E7EA",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityLabel="Follow thread"
+                    style={{}}
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#2F343D",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ],
+                          {
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                    >
+                      
+                    </Text>
+                  </View>
+                </RNGestureHandlerButton>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    </RNGestureHandlerButton>
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={7}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="thread-messages-view-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+      underlayColor="#E4E7EA"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
-        <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
-          style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
-          }
-          testID="avatar"
-        >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
-              [
-                {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
-                },
-              ]
-            }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
         <View
           style={
             {
-              "flex": 1,
-              "flexDirection": "column",
+              "flexDirection": "row",
+              "padding": 16,
             }
           }
         >
           <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "marginBottom": 2,
-              }
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
+                },
+              ]
             }
+            testID="avatar"
           >
-            <Text
-              numberOfLines={1}
-              style={
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
                   },
                 ]
               }
-            >
-              rocket.cat
-            </Text>
-            <Text
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#6C727A",
-                  },
-                ]
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
               }
-            >
-              November 10, 2020
-            </Text>
+              transition={null}
+              width={36}
+            />
           </View>
           <View
             style={
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-              numberOfLines={2}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "flex": 1,
-                  },
-                ]
-              }
-              testID="markdown-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-            >
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            </Text>
             <View
               style={
-                [
-                  {
-                    "alignSelf": "center",
-                    "borderRadius": 4,
-                    "height": 8,
-                    "marginHorizontal": 8,
-                    "width": 8,
-                  },
-                  {
-                    "backgroundColor": "#095AD2",
-                  },
-                ]
-              }
-            />
-          </View>
-          <View
-            style={
-              [
                 {
                   "alignItems": "center",
-                  "flex": 1,
                   "flexDirection": "row",
-                },
-                {
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
+                  "marginBottom": 2,
+                }
+              }
+            >
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                rocket.cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#6C727A",
+                    },
+                  ]
+                }
+              >
+                November 10, 2020
+              </Text>
+            </View>
             <View
               style={
                 {
-                  "flex": 1,
                   "flexDirection": "row",
                 }
               }
             >
+              <Text
+                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                numberOfLines={2}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+              >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              </Text>
               <View
                 style={
+                  [
+                    {
+                      "alignSelf": "center",
+                      "borderRadius": 4,
+                      "height": 8,
+                      "marginHorizontal": 8,
+                      "width": 8,
+                    },
+                    {
+                      "backgroundColor": "#095AD2",
+                    },
+                  ]
+                }
+              />
+            </View>
+            <View
+              style={
+                [
                   {
                     "alignItems": "center",
+                    "flex": 1,
+                    "flexDirection": "row",
+                  },
+                  {
+                    "marginTop": 8,
+                  },
+                ]
+              }
+            >
+              <View
+                style={
+                  {
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
+                          "color": "#2F343D",
+                          "fontSize": 24,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                    testID="thread-count-1"
+                  >
+                    1
+                  </Text>
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
-                  testID="thread-count-1"
                 >
-                  1
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#2F343D",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    1
+                  </Text>
+                </View>
               </View>
               <View
                 style={
                   {
                     "alignItems": "center",
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={8}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#E4E7EA"
                   style={
                     [
                       {
-                        "color": "#2F343D",
-                        "fontSize": 24,
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
                       },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "cursor": undefined,
                       },
-                      {},
                     ]
                   }
+                  underlayColor="#E4E7EA"
                 >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    [
+                  <View
+                    collapsable={false}
+                    style={
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                >
-                  1
-                </Text>
-              </View>
-            </View>
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                }
-              }
-            >
-              <View
-                accessibilityLabel="Follow thread"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  {
-                    "opacity": 1,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
+                        "backgroundColor": "#E4E7EA",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityLabel="Follow thread"
+                    style={{}}
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#2F343D",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ],
+                          {
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                    >
+                      
+                    </Text>
+                  </View>
+                </RNGestureHandlerButton>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
+    </RNGestureHandlerButton>
     <View
       style={
         [
@@ -1747,408 +1935,455 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     />
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={9}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="thread-messages-view-Message content"
+      underlayColor="#E4E7EA"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
-        <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
-          style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
-          }
-          testID="avatar"
-        >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
-              [
-                {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
-                },
-              ]
-            }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
         <View
           style={
             {
-              "flex": 1,
-              "flexDirection": "column",
+              "flexDirection": "row",
+              "padding": 16,
             }
           }
         >
           <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "marginBottom": 2,
-              }
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
+                },
+              ]
             }
+            testID="avatar"
           >
-            <Text
-              numberOfLines={1}
-              style={
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
                   },
                 ]
               }
-            >
-              rocket.cat
-            </Text>
-            <Text
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#6C727A",
-                  },
-                ]
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
               }
-            >
-              November 10, 2020
-            </Text>
+              transition={null}
+              width={36}
+            />
           </View>
           <View
             style={
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              accessibilityLabel="Message content"
-              numberOfLines={2}
+            <View
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "flex": 1,
-                  },
-                ]
-              }
-              testID="markdown-preview-Message content"
-            >
-              Message content
-            </Text>
-          </View>
-          <View
-            style={
-              [
                 {
                   "alignItems": "center",
-                  "flex": 1,
                   "flexDirection": "row",
-                },
-                {
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
+                  "marginBottom": 2,
+                }
+              }
+            >
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                rocket.cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#6C727A",
+                    },
+                  ]
+                }
+              >
+                November 10, 2020
+              </Text>
+            </View>
             <View
               style={
                 {
-                  "flex": 1,
                   "flexDirection": "row",
                 }
               }
             >
-              <View
+              <Text
+                accessibilityLabel="Message content"
+                numberOfLines={2}
                 style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Message content"
+              >
+                Message content
+              </Text>
+            </View>
+            <View
+              style={
+                [
                   {
                     "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                  testID="thread-count-1"
-                >
-                  1
-                </Text>
-              </View>
+                  },
+                  {
+                    "marginTop": 8,
+                  },
+                ]
+              }
+            >
               <View
                 style={
                   {
-                    "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
+                          "color": "#2F343D",
+                          "fontSize": 24,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                    testID="thread-count-1"
+                  >
+                    1
+                  </Text>
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  1
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#2F343D",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    1
+                  </Text>
+                </View>
               </View>
-            </View>
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                }
-              }
-            >
               <View
-                accessibilityLabel="Follow thread"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
                 style={
                   {
-                    "opacity": 1,
+                    "alignItems": "center",
+                    "flexDirection": "row",
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={10}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#E4E7EA"
                   style={
                     [
                       {
-                        "color": "#2F343D",
-                        "fontSize": 24,
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
                       },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "cursor": undefined,
                       },
-                      {},
                     ]
                   }
+                  underlayColor="#E4E7EA"
                 >
-                  
-                </Text>
+                  <View
+                    collapsable={false}
+                    style={
+                      {
+                        "backgroundColor": "#E4E7EA",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityLabel="Follow thread"
+                    style={{}}
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#2F343D",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ],
+                          {
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                    >
+                      
+                    </Text>
+                  </View>
+                </RNGestureHandlerButton>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
+    </RNGestureHandlerButton>
     <View
       style={
         [
@@ -2162,408 +2397,455 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     />
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={11}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="thread-messages-view-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+      underlayColor="#E4E7EA"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
         <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
           style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
+            {
+              "flexDirection": "row",
+              "padding": 16,
+            }
           }
-          testID="avatar"
         >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
+          <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
+            style={
               [
                 {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
                 },
               ]
             }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
+            testID="avatar"
+          >
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
               }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
-        <View
-          style={
-            {
-              "flex": 1,
-              "flexDirection": "column",
-            }
-          }
-        >
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
+                [
+                  {
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
+                  },
+                ]
+              }
+              style={
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
+              }
+              transition={null}
+              width={36}
+            />
+          </View>
           <View
             style={
               {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "marginBottom": 2,
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              numberOfLines={1}
+            <View
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                  },
-                ]
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "marginBottom": 2,
+                }
               }
             >
-              rocket.cat
-            </Text>
-            <Text
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                rocket.cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#6C727A",
+                    },
+                  ]
+                }
+              >
+                November 10, 2020
+              </Text>
+            </View>
+            <View
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#6C727A",
-                  },
-                ]
+                {
+                  "flexDirection": "row",
+                }
               }
             >
-              November 10, 2020
-            </Text>
-          </View>
-          <View
-            style={
-              {
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-              numberOfLines={2}
+              <Text
+                accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                numberOfLines={2}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+              >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              </Text>
+            </View>
+            <View
               style={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
+                    "alignItems": "center",
+                    "flex": 1,
+                    "flexDirection": "row",
                   },
                   {
-                    "flex": 1,
+                    "marginTop": 8,
                   },
                 ]
               }
-              testID="markdown-preview-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-            >
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            </Text>
-          </View>
-          <View
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "flex": 1,
-                  "flexDirection": "row",
-                },
-                {
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "flexDirection": "row",
-                }
-              }
             >
               <View
                 style={
                   {
-                    "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
+                          "color": "#2F343D",
+                          "fontSize": 24,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                  testID="thread-count-1"
-                >
-                  1
-                </Text>
-              </View>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "marginRight": 8,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                    testID="thread-count-1"
+                  >
+                    1
+                  </Text>
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  1
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#2F343D",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    1
+                  </Text>
+                </View>
               </View>
-            </View>
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                }
-              }
-            >
               <View
-                accessibilityLabel="Follow thread"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
                 style={
                   {
-                    "opacity": 1,
+                    "alignItems": "center",
+                    "flexDirection": "row",
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={12}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#E4E7EA"
                   style={
                     [
                       {
-                        "color": "#2F343D",
-                        "fontSize": 24,
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
                       },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "cursor": undefined,
                       },
-                      {},
                     ]
                   }
+                  underlayColor="#E4E7EA"
                 >
-                  
-                </Text>
+                  <View
+                    collapsable={false}
+                    style={
+                      {
+                        "backgroundColor": "#E4E7EA",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityLabel="Follow thread"
+                    style={{}}
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#2F343D",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ],
+                          {
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                    >
+                      
+                    </Text>
+                  </View>
+                </RNGestureHandlerButton>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
+    </RNGestureHandlerButton>
     <View
       style={
         [
@@ -2577,408 +2859,455 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     />
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={13}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="thread-messages-view-Message content"
+      underlayColor="#E4E7EA"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
-        <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
-          style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
-          }
-          testID="avatar"
-        >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
-              [
-                {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
-                },
-              ]
-            }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
         <View
           style={
             {
-              "flex": 1,
-              "flexDirection": "column",
+              "flexDirection": "row",
+              "padding": 16,
             }
           }
         >
           <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "marginBottom": 2,
-              }
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
+                },
+              ]
             }
+            testID="avatar"
           >
-            <Text
-              numberOfLines={1}
-              style={
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
                   },
                 ]
               }
-            >
-              rocket.cat
-            </Text>
-            <Text
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#6C727A",
-                  },
-                ]
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
               }
-            >
-              November 10, 2020
-            </Text>
+              transition={null}
+              width={36}
+            />
           </View>
           <View
             style={
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              accessibilityLabel="Message content"
-              numberOfLines={2}
+            <View
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "flex": 1,
-                  },
-                ]
-              }
-              testID="markdown-preview-Message content"
-            >
-              Message content
-            </Text>
-          </View>
-          <View
-            style={
-              [
                 {
                   "alignItems": "center",
-                  "flex": 1,
                   "flexDirection": "row",
-                },
-                {
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
+                  "marginBottom": 2,
+                }
+              }
+            >
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                rocket.cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#6C727A",
+                    },
+                  ]
+                }
+              >
+                November 10, 2020
+              </Text>
+            </View>
             <View
               style={
                 {
-                  "flex": 1,
                   "flexDirection": "row",
                 }
               }
             >
-              <View
+              <Text
+                accessibilityLabel="Message content"
+                numberOfLines={2}
                 style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Message content"
+              >
+                Message content
+              </Text>
+            </View>
+            <View
+              style={
+                [
                   {
                     "alignItems": "center",
+                    "flex": 1,
+                    "flexDirection": "row",
+                  },
+                  {
+                    "marginTop": 8,
+                  },
+                ]
+              }
+            >
+              <View
+                style={
+                  {
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
+                          "color": "#2F343D",
+                          "fontSize": 24,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                  testID="thread-count-+999"
-                >
-                  +999
-                </Text>
-              </View>
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "marginRight": 8,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                    testID="thread-count-+999"
+                  >
+                    +999
+                  </Text>
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  +999
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#2F343D",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    +999
+                  </Text>
+                </View>
               </View>
-            </View>
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                }
-              }
-            >
               <View
-                accessibilityLabel="Follow thread"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
                 style={
                   {
-                    "opacity": 1,
+                    "alignItems": "center",
+                    "flexDirection": "row",
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={14}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#E4E7EA"
                   style={
                     [
                       {
-                        "color": "#2F343D",
-                        "fontSize": 24,
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
                       },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "cursor": undefined,
                       },
-                      {},
                     ]
                   }
+                  underlayColor="#E4E7EA"
                 >
-                  
-                </Text>
+                  <View
+                    collapsable={false}
+                    style={
+                      {
+                        "backgroundColor": "#E4E7EA",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityLabel="Follow thread"
+                    style={{}}
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#2F343D",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ],
+                          {
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                    >
+                      
+                    </Text>
+                  </View>
+                </RNGestureHandlerButton>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
+    </RNGestureHandlerButton>
     <View
       style={
         [
@@ -2992,408 +3321,455 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     />
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={15}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="thread-messages-view-"
+      underlayColor="#E4E7EA"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
-        <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
-          style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
-          }
-          testID="avatar"
-        >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
-              [
-                {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
-                },
-              ]
-            }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
         <View
           style={
             {
-              "flex": 1,
-              "flexDirection": "column",
+              "flexDirection": "row",
+              "padding": 16,
             }
           }
         >
           <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "marginBottom": 2,
-              }
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
+                },
+              ]
             }
+            testID="avatar"
           >
-            <Text
-              numberOfLines={1}
-              style={
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
                   },
                 ]
               }
-            >
-              rocket.cat
-            </Text>
-            <Text
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#6C727A",
-                  },
-                ]
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
               }
-            >
-              November 10, 2020
-            </Text>
+              transition={null}
+              width={36}
+            />
           </View>
           <View
             style={
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              accessibilityLabel="Attachment title"
-              numberOfLines={2}
+            <View
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "flex": 1,
-                  },
-                ]
-              }
-              testID="markdown-preview-Attachment title"
-            >
-              Attachment title
-            </Text>
-          </View>
-          <View
-            style={
-              [
                 {
                   "alignItems": "center",
-                  "flex": 1,
                   "flexDirection": "row",
-                },
-                {
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
+                  "marginBottom": 2,
+                }
+              }
+            >
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                rocket.cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#6C727A",
+                    },
+                  ]
+                }
+              >
+                November 10, 2020
+              </Text>
+            </View>
             <View
               style={
                 {
-                  "flex": 1,
                   "flexDirection": "row",
                 }
               }
             >
-              <View
+              <Text
+                accessibilityLabel="Attachment title"
+                numberOfLines={2}
                 style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Attachment title"
+              >
+                Attachment title
+              </Text>
+            </View>
+            <View
+              style={
+                [
                   {
                     "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                  testID="thread-count-1"
-                >
-                  1
-                </Text>
-              </View>
+                  },
+                  {
+                    "marginTop": 8,
+                  },
+                ]
+              }
+            >
               <View
                 style={
                   {
-                    "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
+                          "color": "#2F343D",
+                          "fontSize": 24,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                    testID="thread-count-1"
+                  >
+                    1
+                  </Text>
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  1
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#2F343D",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    1
+                  </Text>
+                </View>
               </View>
-            </View>
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                }
-              }
-            >
               <View
-                accessibilityLabel="Follow thread"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
                 style={
                   {
-                    "opacity": 1,
+                    "alignItems": "center",
+                    "flexDirection": "row",
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={16}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#E4E7EA"
                   style={
                     [
                       {
-                        "color": "#2F343D",
-                        "fontSize": 24,
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
                       },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "cursor": undefined,
                       },
-                      {},
                     ]
                   }
+                  underlayColor="#E4E7EA"
                 >
-                  
-                </Text>
+                  <View
+                    collapsable={false}
+                    style={
+                      {
+                        "backgroundColor": "#E4E7EA",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityLabel="Follow thread"
+                    style={{}}
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#2F343D",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ],
+                          {
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                    >
+                      
+                    </Text>
+                  </View>
+                </RNGestureHandlerButton>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
+    </RNGestureHandlerButton>
     <View
       style={
         [
@@ -3407,408 +3783,455 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     />
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={17}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="thread-messages-view-Message content"
+      underlayColor="#E4E7EA"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
-        <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
-          style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
-          }
-          testID="avatar"
-        >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
-              [
-                {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
-                },
-              ]
-            }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
         <View
           style={
             {
-              "flex": 1,
-              "flexDirection": "column",
+              "flexDirection": "row",
+              "padding": 16,
             }
           }
         >
           <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "marginBottom": 2,
-              }
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
+                },
+              ]
             }
+            testID="avatar"
           >
-            <Text
-              numberOfLines={1}
-              style={
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
                   },
                 ]
               }
-            >
-              Rocket Cat
-            </Text>
-            <Text
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#6C727A",
-                  },
-                ]
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
               }
-            >
-              November 10, 2020
-            </Text>
+              transition={null}
+              width={36}
+            />
           </View>
           <View
             style={
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              accessibilityLabel="Message content"
-              numberOfLines={2}
+            <View
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "flex": 1,
-                  },
-                ]
-              }
-              testID="markdown-preview-Message content"
-            >
-              Message content
-            </Text>
-          </View>
-          <View
-            style={
-              [
                 {
                   "alignItems": "center",
-                  "flex": 1,
                   "flexDirection": "row",
-                },
-                {
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
+                  "marginBottom": 2,
+                }
+              }
+            >
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                Rocket Cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#6C727A",
+                    },
+                  ]
+                }
+              >
+                November 10, 2020
+              </Text>
+            </View>
             <View
               style={
                 {
-                  "flex": 1,
                   "flexDirection": "row",
                 }
               }
             >
-              <View
+              <Text
+                accessibilityLabel="Message content"
+                numberOfLines={2}
                 style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Message content"
+              >
+                Message content
+              </Text>
+            </View>
+            <View
+              style={
+                [
                   {
                     "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                  testID="thread-count-1"
-                >
-                  1
-                </Text>
-              </View>
+                  },
+                  {
+                    "marginTop": 8,
+                  },
+                ]
+              }
+            >
               <View
                 style={
                   {
-                    "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
+                          "color": "#2F343D",
+                          "fontSize": 24,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                    testID="thread-count-1"
+                  >
+                    1
+                  </Text>
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  1
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#2F343D",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    1
+                  </Text>
+                </View>
               </View>
-            </View>
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                }
-              }
-            >
               <View
-                accessibilityLabel="Follow thread"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
                 style={
                   {
-                    "opacity": 1,
+                    "alignItems": "center",
+                    "flexDirection": "row",
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={18}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#E4E7EA"
                   style={
                     [
                       {
-                        "color": "#2F343D",
-                        "fontSize": 24,
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
                       },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "cursor": undefined,
                       },
-                      {},
                     ]
                   }
+                  underlayColor="#E4E7EA"
                 >
-                  
-                </Text>
+                  <View
+                    collapsable={false}
+                    style={
+                      {
+                        "backgroundColor": "#E4E7EA",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityLabel="Follow thread"
+                    style={{}}
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#2F343D",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ],
+                          {
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                    >
+                      
+                    </Text>
+                  </View>
+                </RNGestureHandlerButton>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
+    </RNGestureHandlerButton>
     <View
       style={
         [
@@ -3842,1260 +4265,1401 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
         ]
       }
     />
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={19}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#E4E7EA"
       style={
-        {
-          "backgroundColor": "#FFFFFF",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="thread-messages-view-Message content"
+      underlayColor="#E4E7EA"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#E4E7EA",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
-        <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
-          style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
-          }
-          testID="avatar"
-        >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
-              [
-                {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
-                },
-              ]
-            }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
         <View
           style={
             {
-              "flex": 1,
-              "flexDirection": "column",
+              "flexDirection": "row",
+              "padding": 16,
             }
           }
         >
           <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "marginBottom": 2,
-              }
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
+                },
+              ]
             }
+            testID="avatar"
           >
-            <Text
-              numberOfLines={1}
-              style={
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
                   },
                 ]
               }
-            >
-              rocket.cat
-            </Text>
-            <Text
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#6C727A",
-                  },
-                ]
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
               }
-            >
-              November 10, 2020
-            </Text>
+              transition={null}
+              width={36}
+            />
           </View>
           <View
             style={
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              accessibilityLabel="Message content"
-              numberOfLines={2}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "flex": 1,
-                  },
-                ]
-              }
-              testID="markdown-preview-Message content"
-            >
-              Message content
-            </Text>
             <View
               style={
-                [
-                  {
-                    "alignSelf": "center",
-                    "borderRadius": 4,
-                    "height": 8,
-                    "marginHorizontal": 8,
-                    "width": 8,
-                  },
-                  {
-                    "backgroundColor": "#F5455C",
-                  },
-                ]
-              }
-            />
-          </View>
-          <View
-            style={
-              [
                 {
                   "alignItems": "center",
-                  "flex": 1,
                   "flexDirection": "row",
-                },
-                {
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
+                  "marginBottom": 2,
+                }
+              }
+            >
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#1F2329",
+                    },
+                  ]
+                }
+              >
+                rocket.cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#6C727A",
+                    },
+                  ]
+                }
+              >
+                November 10, 2020
+              </Text>
+            </View>
             <View
               style={
                 {
-                  "flex": 1,
                   "flexDirection": "row",
                 }
               }
             >
+              <Text
+                accessibilityLabel="Message content"
+                numberOfLines={2}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Message content"
+              >
+                Message content
+              </Text>
               <View
                 style={
+                  [
+                    {
+                      "alignSelf": "center",
+                      "borderRadius": 4,
+                      "height": 8,
+                      "marginHorizontal": 8,
+                      "width": 8,
+                    },
+                    {
+                      "backgroundColor": "#F5455C",
+                    },
+                  ]
+                }
+              />
+            </View>
+            <View
+              style={
+                [
                   {
                     "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                  testID="thread-count-1"
-                >
-                  1
-                </Text>
-              </View>
+                  },
+                  {
+                    "marginTop": 8,
+                  },
+                ]
+              }
+            >
               <View
                 style={
                   {
-                    "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#2F343D",
-                        "fontSize": 24,
-                      },
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
+                          "color": "#2F343D",
+                          "fontSize": 24,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                    testID="thread-count-1"
+                  >
+                    1
+                  </Text>
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  1
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#2F343D",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    1
+                  </Text>
+                </View>
               </View>
-            </View>
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                }
-              }
-            >
               <View
-                accessibilityLabel="Follow thread"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
                 style={
                   {
-                    "opacity": 1,
+                    "alignItems": "center",
+                    "flexDirection": "row",
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={20}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#E4E7EA"
                   style={
                     [
                       {
-                        "color": "#2F343D",
-                        "fontSize": 24,
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
                       },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "cursor": undefined,
                       },
-                      {},
                     ]
                   }
+                  underlayColor="#E4E7EA"
                 >
-                  
-                </Text>
+                  <View
+                    collapsable={false}
+                    style={
+                      {
+                        "backgroundColor": "#E4E7EA",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityLabel="Follow thread"
+                    style={{}}
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#2F343D",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ],
+                          {
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                    >
+                      
+                    </Text>
+                  </View>
+                </RNGestureHandlerButton>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    </RNGestureHandlerButton>
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={21}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#2D3039"
       style={
-        {
-          "backgroundColor": "#1F2329",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#1F2329",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="thread-messages-view-Message content"
+      underlayColor="#2D3039"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#2D3039",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
-        <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
-          style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
-          }
-          testID="avatar"
-        >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
-              [
-                {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
-                },
-              ]
-            }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
         <View
           style={
             {
-              "flex": 1,
-              "flexDirection": "column",
+              "flexDirection": "row",
+              "padding": 16,
             }
           }
         >
           <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "marginBottom": 2,
-              }
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
+                },
+              ]
             }
+            testID="avatar"
           >
-            <Text
-              numberOfLines={1}
-              style={
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#F2F3F5",
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
                   },
                 ]
               }
-            >
-              rocket.cat
-            </Text>
-            <Text
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#9EA2A8",
-                  },
-                ]
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
               }
-            >
-              November 10, 2020
-            </Text>
+              transition={null}
+              width={36}
+            />
           </View>
           <View
             style={
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              accessibilityLabel="Message content"
-              numberOfLines={2}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#E4E7EA",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "flex": 1,
-                  },
-                ]
-              }
-              testID="markdown-preview-Message content"
-            >
-              Message content
-            </Text>
             <View
               style={
-                [
-                  {
-                    "alignSelf": "center",
-                    "borderRadius": 4,
-                    "height": 8,
-                    "marginHorizontal": 8,
-                    "width": 8,
-                  },
-                  {
-                    "backgroundColor": "#B43C4C",
-                  },
-                ]
-              }
-            />
-          </View>
-          <View
-            style={
-              [
                 {
                   "alignItems": "center",
-                  "flex": 1,
                   "flexDirection": "row",
-                },
-                {
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
+                  "marginBottom": 2,
+                }
+              }
+            >
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#F2F3F5",
+                    },
+                  ]
+                }
+              >
+                rocket.cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#9EA2A8",
+                    },
+                  ]
+                }
+              >
+                November 10, 2020
+              </Text>
+            </View>
             <View
               style={
                 {
-                  "flex": 1,
                   "flexDirection": "row",
                 }
               }
             >
+              <Text
+                accessibilityLabel="Message content"
+                numberOfLines={2}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#E4E7EA",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Message content"
+              >
+                Message content
+              </Text>
               <View
                 style={
+                  [
+                    {
+                      "alignSelf": "center",
+                      "borderRadius": 4,
+                      "height": 8,
+                      "marginHorizontal": 8,
+                      "width": 8,
+                    },
+                    {
+                      "backgroundColor": "#B43C4C",
+                    },
+                  ]
+                }
+              />
+            </View>
+            <View
+              style={
+                [
                   {
                     "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#E4E7EA",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#9EA2A8",
-                      },
-                    ]
-                  }
-                  testID="thread-count-1"
-                >
-                  1
-                </Text>
-              </View>
+                  },
+                  {
+                    "marginTop": 8,
+                  },
+                ]
+              }
+            >
               <View
                 style={
                   {
-                    "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#E4E7EA",
-                        "fontSize": 24,
-                      },
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
+                          "color": "#E4E7EA",
+                          "fontSize": 24,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#9EA2A8",
+                        },
+                      ]
+                    }
+                    testID="thread-count-1"
+                  >
+                    1
+                  </Text>
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#9EA2A8",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  1
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#E4E7EA",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#9EA2A8",
+                        },
+                      ]
+                    }
+                  >
+                    1
+                  </Text>
+                </View>
               </View>
-            </View>
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                }
-              }
-            >
               <View
-                accessibilityLabel="Follow thread"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
                 style={
                   {
-                    "opacity": 1,
+                    "alignItems": "center",
+                    "flexDirection": "row",
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={22}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#2D3039"
                   style={
                     [
                       {
-                        "color": "#E4E7EA",
-                        "fontSize": 24,
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
                       },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "cursor": undefined,
                       },
-                      {},
                     ]
                   }
+                  underlayColor="#2D3039"
                 >
-                  
-                </Text>
+                  <View
+                    collapsable={false}
+                    style={
+                      {
+                        "backgroundColor": "#2D3039",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityLabel="Follow thread"
+                    style={{}}
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#E4E7EA",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ],
+                          {
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                    >
+                      
+                    </Text>
+                  </View>
+                </RNGestureHandlerButton>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
+    </RNGestureHandlerButton>
+    <RNGestureHandlerButton
+      activeOpacity={1}
       collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+      delayLongPress={600}
+      enabled={true}
+      handlerTag={23}
+      handlerType="NativeViewGestureHandler"
+      innerRef={null}
+      onActiveStateChange={[Function]}
+      onGestureHandlerEvent={[Function]}
+      onGestureHandlerStateChange={[Function]}
+      onPress={[Function]}
+      rippleColor="#16181a"
       style={
-        {
-          "backgroundColor": "#000000",
-          "opacity": 1,
-        }
+        [
+          {
+            "backgroundColor": "#000000",
+            "borderRadius": undefined,
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "cursor": undefined,
+          },
+        ]
       }
       testID="thread-messages-view-Message content"
+      underlayColor="#16181a"
     >
       <View
+        collapsable={false}
         style={
           {
-            "flexDirection": "row",
-            "padding": 16,
+            "backgroundColor": "#16181a",
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
+      />
+      <View
+        style={{}}
       >
-        <View
-          accessibilityLabel="rocket.cat's avatar"
-          accessible={true}
-          style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              },
-              {
-                "marginRight": 8,
-              },
-            ]
-          }
-          testID="avatar"
-        >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={36}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
-              [
-                {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
-                },
-              ]
-            }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 36,
-                "width": 36,
-              }
-            }
-            transition={null}
-            width={36}
-          />
-        </View>
         <View
           style={
             {
-              "flex": 1,
-              "flexDirection": "column",
+              "flexDirection": "row",
+              "padding": 16,
             }
           }
         >
           <View
+            accessibilityLabel="rocket.cat's avatar"
+            accessible={true}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "marginBottom": 2,
-              }
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                },
+                {
+                  "marginRight": 8,
+                },
+              ]
             }
+            testID="avatar"
           >
-            <Text
-              numberOfLines={1}
-              style={
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={36}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#F2F3F5",
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=72",
                   },
                 ]
               }
-            >
-              rocket.cat
-            </Text>
-            <Text
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "marginLeft": 4,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#9EA2A8",
-                  },
-                ]
+                {
+                  "borderRadius": 4,
+                  "height": 36,
+                  "width": 36,
+                }
               }
-            >
-              November 10, 2020
-            </Text>
+              transition={null}
+              width={36}
+            />
           </View>
           <View
             style={
               {
-                "flexDirection": "row",
+                "flex": 1,
+                "flexDirection": "column",
               }
             }
           >
-            <Text
-              accessibilityLabel="Message content"
-              numberOfLines={2}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#E4E7EA",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "flex": 1,
-                  },
-                ]
-              }
-              testID="markdown-preview-Message content"
-            >
-              Message content
-            </Text>
             <View
               style={
-                [
-                  {
-                    "alignSelf": "center",
-                    "borderRadius": 4,
-                    "height": 8,
-                    "marginHorizontal": 8,
-                    "width": 8,
-                  },
-                  {
-                    "backgroundColor": "#B43C4C",
-                  },
-                ]
-              }
-            />
-          </View>
-          <View
-            style={
-              [
                 {
                   "alignItems": "center",
-                  "flex": 1,
                   "flexDirection": "row",
-                },
-                {
-                  "marginTop": 8,
-                },
-              ]
-            }
-          >
+                  "marginBottom": 2,
+                }
+              }
+            >
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#F2F3F5",
+                    },
+                  ]
+                }
+              >
+                rocket.cat
+              </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "400",
+                      "marginLeft": 4,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#9EA2A8",
+                    },
+                  ]
+                }
+              >
+                November 10, 2020
+              </Text>
+            </View>
             <View
               style={
                 {
-                  "flex": 1,
                   "flexDirection": "row",
                 }
               }
             >
+              <Text
+                accessibilityLabel="Message content"
+                numberOfLines={2}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "fontFamily": "Inter",
+                      "fontSize": 16,
+                      "fontWeight": "400",
+                      "lineHeight": 22,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#E4E7EA",
+                      "lineHeight": undefined,
+                    },
+                    {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID="markdown-preview-Message content"
+              >
+                Message content
+              </Text>
               <View
                 style={
+                  [
+                    {
+                      "alignSelf": "center",
+                      "borderRadius": 4,
+                      "height": 8,
+                      "marginHorizontal": 8,
+                      "width": 8,
+                    },
+                    {
+                      "backgroundColor": "#B43C4C",
+                    },
+                  ]
+                }
+              />
+            </View>
+            <View
+              style={
+                [
                   {
                     "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
-                  }
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#E4E7EA",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#9EA2A8",
-                      },
-                    ]
-                  }
-                  testID="thread-count-1"
-                >
-                  1
-                </Text>
-              </View>
+                  },
+                  {
+                    "marginTop": 8,
+                  },
+                ]
+              }
+            >
               <View
                 style={
                   {
-                    "alignItems": "center",
+                    "flex": 1,
                     "flexDirection": "row",
-                    "marginRight": 8,
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <View
                   style={
-                    [
-                      {
-                        "color": "#E4E7EA",
-                        "fontSize": 24,
-                      },
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
+                          "color": "#E4E7EA",
+                          "fontSize": 24,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  numberOfLines={1}
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#9EA2A8",
+                        },
+                      ]
+                    }
+                    testID="thread-count-1"
+                  >
+                    1
+                  </Text>
+                </View>
+                <View
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 10,
-                        "fontWeight": "600",
-                        "marginLeft": 2,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#9EA2A8",
-                      },
-                    ]
+                    {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "marginRight": 8,
+                    }
                   }
                 >
-                  1
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#E4E7EA",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 10,
+                          "fontWeight": "600",
+                          "marginLeft": 2,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#9EA2A8",
+                        },
+                      ]
+                    }
+                  >
+                    1
+                  </Text>
+                </View>
               </View>
-            </View>
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                }
-              }
-            >
               <View
-                accessibilityLabel="Follow thread"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
                 style={
                   {
-                    "opacity": 1,
+                    "alignItems": "center",
+                    "flexDirection": "row",
                   }
                 }
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                <RNGestureHandlerButton
+                  activeOpacity={1}
+                  collapsable={false}
+                  delayLongPress={600}
+                  enabled={true}
+                  handlerTag={24}
+                  handlerType="NativeViewGestureHandler"
+                  innerRef={null}
+                  onActiveStateChange={[Function]}
+                  onGestureHandlerEvent={[Function]}
+                  onGestureHandlerStateChange={[Function]}
+                  onPress={[Function]}
+                  rippleColor="#16181a"
                   style={
                     [
                       {
-                        "color": "#E4E7EA",
-                        "fontSize": 24,
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
                       },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "cursor": undefined,
                       },
-                      {},
                     ]
                   }
+                  underlayColor="#16181a"
                 >
-                  
-                </Text>
+                  <View
+                    collapsable={false}
+                    style={
+                      {
+                        "backgroundColor": "#16181a",
+                        "borderBottomLeftRadius": undefined,
+                        "borderBottomRightRadius": undefined,
+                        "borderRadius": undefined,
+                        "borderTopLeftRadius": undefined,
+                        "borderTopRightRadius": undefined,
+                        "bottom": 0,
+                        "left": 0,
+                        "opacity": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityLabel="Follow thread"
+                    style={{}}
+                  >
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#E4E7EA",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ],
+                          {
+                            "fontFamily": "custom",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          {},
+                        ]
+                      }
+                    >
+                      
+                    </Text>
+                  </View>
+                </RNGestureHandlerButton>
               </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
+    </RNGestureHandlerButton>
     <View
       style={
         [
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index f4895e79616..8122f18684a 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -232,7 +232,7 @@ PODS:
   - libwebp/sharpyuv (1.5.0)
   - libwebp/webp (1.5.0):
     - libwebp/sharpyuv
-  - MobileCrypto (0.2.1):
+  - MobileCrypto (0.2.2):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2606,6 +2606,30 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNTrueSheet (3.7.3):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - SDWebImage (5.21.0):
     - SDWebImage/Core (= 5.21.0)
   - SDWebImage/Core (5.21.0)
@@ -2754,6 +2778,7 @@ DEPENDENCIES:
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSVG (from `../node_modules/react-native-svg`)
+  - "RNTrueSheet (from `../node_modules/@lodev09/react-native-true-sheet`)"
   - "simdjson (from `../node_modules/@nozbe/simdjson`)"
   - "WatermelonDB (from `../node_modules/@nozbe/watermelondb`)"
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@@ -3030,6 +3055,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-screens"
   RNSVG:
     :path: "../node_modules/react-native-svg"
+  RNTrueSheet:
+    :path: "../node_modules/@lodev09/react-native-true-sheet"
   simdjson:
     :path: "../node_modules/@nozbe/simdjson"
   WatermelonDB:
@@ -3082,7 +3109,7 @@ SPEC CHECKSUMS:
   libavif: 84bbb62fb232c3018d6f1bab79beea87e35de7b7
   libdav1d: 23581a4d8ec811ff171ed5e2e05cd27bad64c39f
   libwebp: 02b23773aedb6ff1fd38cec7a77b81414c6842a8
-  MobileCrypto: a424494b2f45bec9dbe60e3f6d16a40aedefe7b7
+  MobileCrypto: badd466d89e6fb166575c8a5cb74606ee3eec0fe
   nanopb: fad817b59e0457d11a5dfbde799381cd727c1275
   PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
   PromisesSwift: 9d77319bbe72ebf6d872900551f7eeba9bce2851
@@ -3177,6 +3204,7 @@ SPEC CHECKSUMS:
   RNReanimated: f52ccd5ceea2bae48d7421eec89b3f0c10d7b642
   RNScreens: b13e4c45f0406f33986a39c0d8da0324bff94435
   RNSVG: 680e961f640e381aab730a04b2371969686ed9f7
+  RNTrueSheet: e9ee7ff82a7854295eac6fc225e54f1539e6cd7b
   SDWebImage: f84b0feeb08d2d11e6a9b843cb06d75ebf5b8868
   SDWebImageAVIFCoder: 00310d246aab3232ce77f1d8f0076f8c4b021d90
   SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
diff --git a/ios/custom.ttf b/ios/custom.ttf
index b0758f2fa60..ace29c7f232 100644
Binary files a/ios/custom.ttf and b/ios/custom.ttf differ
diff --git a/jest.config.js b/jest.config.js
index bbaf848b1d1..fb58f54f7f5 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,7 +1,7 @@
 module.exports = {
 	testPathIgnorePatterns: ['e2e', 'node_modules'],
 	transformIgnorePatterns: [
-		'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)'
+		'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|@rocket.chat/ui-kit)'
 	],
 	preset: './jest.preset.js',
 	coverageDirectory: './coverage/',
diff --git a/jest.setup.js b/jest.setup.js
index 774f02d2527..8be69b13b05 100644
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -91,16 +91,22 @@ jest.mock('react-native/Libraries/Utilities/useWindowDimensions', () => ({
 	}))
 }));
 
-jest.mock('./app/lib/hooks/useResponsiveLayout/useResponsiveLayout', () => ({
-	useResponsiveLayout: jest.fn(() => ({
-		fontScale: 1,
-		isLargeFontScale: false,
-		fontScaleLimited: 1,
-		rowHeight: 75,
-		rowHeightCondensed: 60
-	})),
-	FONT_SCALE_LIMIT: 1.3
-}));
+jest.mock('./app/lib/hooks/useResponsiveLayout/useResponsiveLayout', () => {
+	const actual = jest.requireActual('./app/lib/hooks/useResponsiveLayout/useResponsiveLayout');
+	return {
+		...actual,
+		useResponsiveLayout: jest.fn(() => ({
+			fontScale: 1,
+			width: 390,
+			height: 844,
+			isLargeFontScale: false,
+			fontScaleLimited: 1,
+			rowHeight: actual.BASE_ROW_HEIGHT,
+			rowHeightCondensed: actual.BASE_ROW_HEIGHT_CONDENSED
+		})),
+		FONT_SCALE_LIMIT: actual.FONT_SCALE_LIMIT
+	};
+});
 
 jest.mock('./app/containers/CustomIcon', () => {
 	const actualNav = jest.requireActual('./app/containers/CustomIcon');
@@ -155,12 +161,22 @@ jest.mock('expo-device', () => ({
 	isDevice: true
 }));
 
-jest.mock('@discord/bottom-sheet', () => {
-	const react = require('react-native');
+jest.mock('@lodev09/react-native-true-sheet', () => {
+	const React = require('react');
+	const { View } = require('react-native');
+	const TrueSheet = React.forwardRef((props, ref) => {
+		React.useImperativeHandle(ref, () => ({
+			present: () => Promise.resolve(),
+			dismiss: () => Promise.resolve(),
+			resize: () => Promise.resolve()
+		}));
+		return <View {...props} />;
+	});
+	TrueSheet.displayName = 'TrueSheet';
 	return {
 		__esModule: true,
-		default: react.View,
-		BottomSheetScrollView: react.ScrollView
+		TrueSheet,
+		TrueSheetProvider: ({ children }) => children
 	};
 });
 
diff --git a/package.json b/package.json
index 48912502716..4b3e53b0dd1 100644
--- a/package.json
+++ b/package.json
@@ -25,9 +25,9 @@
 	},
 	"dependencies": {
 		"@bugsnag/react-native": "8.4.0",
-		"@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
 		"@expo/vector-icons": "^14.1.0",
 		"@hookform/resolvers": "^2.9.10",
+		"@lodev09/react-native-true-sheet": "~3.7.0",
 		"@nozbe/watermelondb": "^0.28.1-0",
 		"@react-native-async-storage/async-storage": "^1.22.3",
 		"@react-native-camera-roll/camera-roll": "^7.10.0",
@@ -50,14 +50,13 @@
 		"@rocket.chat/message-parser": "^0.31.31",
 		"@rocket.chat/mobile-crypto": "RocketChat/rocket.chat-mobile-crypto",
 		"@rocket.chat/sdk": "RocketChat/Rocket.Chat.js.SDK#mobile",
-		"@rocket.chat/ui-kit": "0.31.19",
+		"@rocket.chat/ui-kit": "^0.39.0",
 		"axios": "~0.28.1",
 		"bytebuffer": "~5.0.1",
 		"color2k": "1.2.4",
 		"dayjs": "^1.11.18",
 		"dequal": "2.0.3",
 		"ejson": "2.2.3",
-		"eslint-import-resolver-typescript": "^4.4.4",
 		"expo": "53",
 		"expo-apple-authentication": "7.2.3",
 		"expo-av": "15.1.3",
@@ -108,7 +107,6 @@
 		"react-native-modal": "13.0.1",
 		"react-native-notifier": "1.6.1",
 		"react-native-picker-select": "9.0.1",
-		"react-native-platform-touchable": "1.1.1",
 		"react-native-popover-view": "5.1.7",
 		"react-native-reanimated": "^3.17.1",
 		"react-native-restart": "0.0.22",
@@ -150,12 +148,11 @@
 		"@babel/runtime": "~7.25.9",
 		"@bugsnag/cli": "^3.2.1",
 		"@bugsnag/source-maps": "^2.3.3",
-		"@gorhom/bottom-sheet": "^5.1.6",
+		"@gorhom/bottom-sheet": "^5",
 		"@react-native-community/cli": "18.0.0",
 		"@react-native-community/cli-platform-android": "18.0.0",
 		"@react-native-community/cli-platform-ios": "18.0.0",
 		"@react-native/babel-preset": "0.79.4",
-		"@react-native/eslint-config": "0.79.4",
 		"@react-native/metro-config": "0.79.4",
 		"@react-native/typescript-config": "0.79.4",
 		"@rocket.chat/eslint-config": "^0.4.0",
@@ -172,25 +169,25 @@
 		"@types/react": "^19.0.0",
 		"@types/react-native-background-timer": "^2.0.2",
 		"@types/react-native-config-reader": "^4.1.3",
-		"@types/react-native-platform-touchable": "^1.1.6",
 		"@types/semver": "7.3.13",
 		"@types/ua-parser-js": "^0.7.36",
 		"@types/url-parse": "^1.4.8",
-		"@typescript-eslint/eslint-plugin": "^7.4.0",
-		"@typescript-eslint/parser": "^7.4.0",
+		"@typescript-eslint/eslint-plugin": "~7.18.0",
+		"@typescript-eslint/parser": "~7.18.0",
 		"babel-jest": "~29.7.0",
 		"babel-loader": "~9.1.3",
 		"babel-plugin-react-compiler": "19.1.0-rc.3",
 		"babel-plugin-transform-remove-console": "^6.9.4",
 		"babel-preset-expo": "~12.0.12",
 		"eslint": "^8.57.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-import": "^2.29.1",
-		"eslint-plugin-jest": "^27.9.0",
-		"eslint-plugin-jsx-a11y": "^6.8.0",
-		"eslint-plugin-react": "^7.34.1",
-		"eslint-plugin-react-hooks": "^7.0.0",
-		"eslint-plugin-react-native": "^4.1.0",
+		"eslint-config-prettier": "~10.1.8",
+		"eslint-import-resolver-typescript": "~4.4.4",
+		"eslint-plugin-import": "~2.32.0",
+		"eslint-plugin-jest": "~29.14.0",
+		"eslint-plugin-prettier": "~5.5.5",
+		"eslint-plugin-react": "~7.37.5",
+		"eslint-plugin-react-hooks": "~7.0.1",
+		"eslint-plugin-react-native": "~5.0.0",
 		"identity-obj-proxy": "^3.0.0",
 		"jest": "^29.7.0",
 		"jest-cli": "^29.7.0",
diff --git a/patches/@discord+bottom-sheet+4.6.1.patch b/patches/@discord+bottom-sheet+4.6.1.patch
deleted file mode 100644
index 0dff575d79f..00000000000
--- a/patches/@discord+bottom-sheet+4.6.1.patch
+++ /dev/null
@@ -1,70 +0,0 @@
-diff --git a/node_modules/@discord/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx b/node_modules/@discord/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
-index 2897fef..9a8505e 100644
---- a/node_modules/@discord/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
-+++ b/node_modules/@discord/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
-@@ -1382,7 +1382,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
-           if (containerHeight !== _previousContainerHeight) {
-             animationSource = ANIMATION_SOURCE.CONTAINER_RESIZE;
-             animationConfig = {
--              duration: 0,
-+              // https://github.com/gorhom/react-native-bottom-sheet/pull/1497
-+              duration: 1,
-             };
-           }
-         }
-diff --git a/node_modules/@discord/bottom-sheet/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx b/node_modules/@discord/bottom-sheet/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx
-index 2219e0f..59f90ba 100644
---- a/node_modules/@discord/bottom-sheet/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx
-+++ b/node_modules/@discord/bottom-sheet/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx
-@@ -92,10 +92,6 @@ function BottomSheetHandleContainerComponent({
-     >
-       <Animated.View
-         key="BottomSheetHandleContainer"
--        accessible={true}
--        accessibilityRole="adjustable"
--        accessibilityLabel="Bottom Sheet handle"
--        accessibilityHint="Drag up or down to extend or minimize the Bottom Sheet"
-         onLayout={handleContainerLayout}
-       >
-         <HandleComponent
-diff --git a/node_modules/@discord/bottom-sheet/src/hooks/useStableCallback.ts b/node_modules/@discord/bottom-sheet/src/hooks/useStableCallback.ts
-index 1c788ab..6328dea 100644
---- a/node_modules/@discord/bottom-sheet/src/hooks/useStableCallback.ts
-+++ b/node_modules/@discord/bottom-sheet/src/hooks/useStableCallback.ts
-@@ -6,6 +6,7 @@ type Callback = (...args: any[]) => any;
-  * https://gist.github.com/JakeCoxon/c7ebf6e6496f8468226fd36b596e1985
-  */
- export const useStableCallback = (callback: Callback) => {
-+  // @ts-ignore
-   const callbackRef = useRef<Callback>();
-   const memoCallback = useCallback(
-     (...args: any) => callbackRef.current && callbackRef.current(...args),
-@@ -13,6 +14,7 @@ export const useStableCallback = (callback: Callback) => {
-   );
-   useEffect(() => {
-     callbackRef.current = callback;
-+    // @ts-ignore
-     return () => (callbackRef.current = undefined);
-   });
-   return memoCallback;
-diff --git a/node_modules/@discord/bottom-sheet/src/utilities/animate.ts b/node_modules/@discord/bottom-sheet/src/utilities/animate.ts
-index 0ce4c9a..9562675 100644
---- a/node_modules/@discord/bottom-sheet/src/utilities/animate.ts
-+++ b/node_modules/@discord/bottom-sheet/src/utilities/animate.ts
-@@ -4,6 +4,7 @@ import {
-   withTiming,
-   withSpring,
-   AnimationCallback,
-+  ReduceMotion,
- } from 'react-native-reanimated';
- import { ANIMATION_CONFIGS, ANIMATION_METHOD } from '../constants';
- 
-@@ -26,6 +27,8 @@ export const animate = ({
-     configs = ANIMATION_CONFIGS;
-   }
- 
-+  configs.reduceMotion = ReduceMotion.Never;
-+
-   // detect animation type
-   const type =
-     'duration' in configs || 'easing' in configs
diff --git a/patches/@lodev09+react-native-true-sheet+3.7.3.patch b/patches/@lodev09+react-native-true-sheet+3.7.3.patch
new file mode 100644
index 00000000000..6004b34fdae
--- /dev/null
+++ b/patches/@lodev09+react-native-true-sheet+3.7.3.patch
@@ -0,0 +1,108 @@
+diff --git a/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetContainerViewManager.kt b/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetContainerViewManager.kt
+index 359546c..e8d8f0a 100644
+--- a/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetContainerViewManager.kt
++++ b/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetContainerViewManager.kt
+@@ -1,10 +1,8 @@
+ package com.lodev09.truesheet
+
+ import com.facebook.react.module.annotations.ReactModule
+-import com.facebook.react.uimanager.PointerEvents
+ import com.facebook.react.uimanager.ThemedReactContext
+ import com.facebook.react.uimanager.ViewGroupManager
+-import com.facebook.react.uimanager.annotations.ReactProp
+
+ /**
+  * ViewManager for TrueSheetContainerView
+@@ -17,11 +15,6 @@ class TrueSheetContainerViewManager : ViewGroupManager<TrueSheetContainerView>()
+
+   override fun createViewInstance(reactContext: ThemedReactContext): TrueSheetContainerView = TrueSheetContainerView(reactContext)
+
+-  @ReactProp(name = "pointerEvents")
+-  fun setPointerEvents(view: TrueSheetContainerView, pointerEventsStr: String?) {
+-    view.pointerEvents = PointerEvents.parsePointerEvents(pointerEventsStr)
+-  }
+-
+   companion object {
+     const val REACT_CLASS = "TrueSheetContainerView"
+   }
+diff --git a/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetContentViewManager.kt b/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetContentViewManager.kt
+index 2853192..2bf5fe5 100644
+--- a/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetContentViewManager.kt
++++ b/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetContentViewManager.kt
+@@ -1,10 +1,8 @@
+ package com.lodev09.truesheet
+
+ import com.facebook.react.module.annotations.ReactModule
+-import com.facebook.react.uimanager.PointerEvents
+ import com.facebook.react.uimanager.ThemedReactContext
+ import com.facebook.react.uimanager.ViewGroupManager
+-import com.facebook.react.uimanager.annotations.ReactProp
+
+ /**
+  * ViewManager for TrueSheetContentView
+@@ -17,11 +15,6 @@ class TrueSheetContentViewManager : ViewGroupManager<TrueSheetContentView>() {
+
+   override fun createViewInstance(reactContext: ThemedReactContext): TrueSheetContentView = TrueSheetContentView(reactContext)
+
+-  @ReactProp(name = "pointerEvents")
+-  fun setPointerEvents(view: TrueSheetContentView, pointerEventsStr: String?) {
+-    view.pointerEvents = PointerEvents.parsePointerEvents(pointerEventsStr)
+-  }
+-
+   companion object {
+     const val REACT_CLASS = "TrueSheetContentView"
+   }
+diff --git a/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetFooterViewManager.kt b/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetFooterViewManager.kt
+index aedf0a3..d317e6c 100644
+--- a/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetFooterViewManager.kt
++++ b/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetFooterViewManager.kt
+@@ -1,10 +1,8 @@
+ package com.lodev09.truesheet
+
+ import com.facebook.react.module.annotations.ReactModule
+-import com.facebook.react.uimanager.PointerEvents
+ import com.facebook.react.uimanager.ThemedReactContext
+ import com.facebook.react.uimanager.ViewGroupManager
+-import com.facebook.react.uimanager.annotations.ReactProp
+
+ /**
+  * ViewManager for TrueSheetFooterView
+@@ -17,11 +15,6 @@ class TrueSheetFooterViewManager : ViewGroupManager<TrueSheetFooterView>() {
+
+   override fun createViewInstance(reactContext: ThemedReactContext): TrueSheetFooterView = TrueSheetFooterView(reactContext)
+
+-  @ReactProp(name = "pointerEvents")
+-  fun setPointerEvents(view: TrueSheetFooterView, pointerEventsStr: String?) {
+-    view.pointerEvents = PointerEvents.parsePointerEvents(pointerEventsStr)
+-  }
+-
+   companion object {
+     const val REACT_CLASS = "TrueSheetFooterView"
+   }
+diff --git a/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetHeaderViewManager.kt b/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetHeaderViewManager.kt
+index a811616..bc43932 100644
+--- a/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetHeaderViewManager.kt
++++ b/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetHeaderViewManager.kt
+@@ -1,10 +1,8 @@
+ package com.lodev09.truesheet
+
+ import com.facebook.react.module.annotations.ReactModule
+-import com.facebook.react.uimanager.PointerEvents
+ import com.facebook.react.uimanager.ThemedReactContext
+ import com.facebook.react.uimanager.ViewGroupManager
+-import com.facebook.react.uimanager.annotations.ReactProp
+
+ /**
+  * ViewManager for TrueSheetHeaderView
+@@ -17,11 +15,6 @@ class TrueSheetHeaderViewManager : ViewGroupManager<TrueSheetHeaderView>() {
+
+   override fun createViewInstance(reactContext: ThemedReactContext): TrueSheetHeaderView = TrueSheetHeaderView(reactContext)
+
+-  @ReactProp(name = "pointerEvents")
+-  fun setPointerEvents(view: TrueSheetHeaderView, pointerEventsStr: String?) {
+-    view.pointerEvents = PointerEvents.parsePointerEvents(pointerEventsStr)
+-  }
+-
+   companion object {
+     const val REACT_CLASS = "TrueSheetHeaderView"
+   }
diff --git a/scripts/build-icon-set.js b/scripts/build-icon-set.js
index 916e428644f..af7a3dd45b2 100644
--- a/scripts/build-icon-set.js
+++ b/scripts/build-icon-set.js
@@ -1,7 +1,7 @@
 const fs = require('fs');
 const customIcons = require('../app/containers/CustomIcon/selection.json');
 
-const sortObject = o => Object.keys(o).sort().reduce((r, k) => (r[k] = o[k], r), {});
+const sortObject = o => Object.keys(o).sort().reduce((r, k) => { r[k] = o[k]; return r; }, {});
 
 let icons = {};
 
diff --git a/scripts/create-avd.sh b/scripts/create-avd.sh
index 36f54c58ee4..fe6ca9ec429 100644
--- a/scripts/create-avd.sh
+++ b/scripts/create-avd.sh
@@ -1,14 +1,53 @@
 #!/usr/bin/env bash
+set -e
 
-$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager --install emulator
+if [ -z "$ANDROID_HOME" ]; then
+  export ANDROID_HOME="$ANDROID_SDK_ROOT"
+fi
 
-$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager "system-images;android-31;default;arm64-v8a"
-$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager --licenses
+if [ -z "$ANDROID_HOME" ]; then
+  export ANDROID_HOME="$HOME/Android/Sdk"
+fi
 
-$ANDROID_HOME/cmdline-tools/latest/bin/avdmanager create avd -n Pixel_API_31_AOSP -d pixel --package "system-images;android-31;default;arm64-v8a"
+export PATH=$ANDROID_HOME/cmdline-tools/latest/bin:$ANDROID_HOME/platform-tools:$ANDROID_HOME/emulator:$PATH
 
-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
+echo "ANDROID_HOME=$ANDROID_HOME"
+echo "PATH=$PATH"
 
-echo "Pixel_API_31_AOSP created"
\ No newline at end of file
+API_LEVEL=34
+AVD_NAME="Pixel_API_${API_LEVEL}"
+
+HOST_ARCH=$(uname -m)
+
+if [[ "$HOST_ARCH" == "arm64" || "$HOST_ARCH" == "aarch64" ]]; then
+  ABI="arm64-v8a"
+else
+  ABI="x86_64"
+fi
+
+echo "Host architecture: $HOST_ARCH"
+echo "Using emulator ABI: $ABI"
+
+IMAGE="system-images;android-${API_LEVEL};google_apis;${ABI}"
+
+echo "Installing emulator + system image"
+
+yes | sdkmanager --licenses
+sdkmanager --install emulator
+sdkmanager "$IMAGE"
+
+echo "Creating AVD"
+
+echo "no" | avdmanager create avd \
+  -n "$AVD_NAME" \
+  -d "pixel_7_pro" \
+  --package "$IMAGE"
+
+CONFIG="$HOME/.android/avd/${AVD_NAME}.avd/config.ini"
+
+echo "hw.lcd.density=440" >> "$CONFIG"
+echo "hw.lcd.height=2280" >> "$CONFIG"
+echo "hw.lcd.width=1080" >> "$CONFIG"
+echo "hw.gpu.enabled=yes" >> "$CONFIG"
+
+echo "AVD created: $AVD_NAME ($ABI)"
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index edd328f5061..bb3f37edb4d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
 
 		/* Basic Options */
 		// "incremental": true,                         /* Enable incremental compilation */
-		"target": "ESNEXT" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
+		"target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
 		"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
 		// "lib": [],                                   /* Specify library files to be included in the compilation. */
 		"allowJs": true /* Allow javascript files to be compiled. */,
@@ -35,8 +35,8 @@
 		// "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */
 
 		/* Additional Checks */
-		// "noUnusedLocals": true,                      /* Report errors on unused locals. */
-		// "noUnusedParameters": true,                  /* Report errors on unused parameters. */
+		"noUnusedLocals": true /* Report errors on unused locals. */,
+		"noUnusedParameters": true /* Report errors on unused parameters. */,
 		// "noImplicitReturns": true,                   /* Report error when not all code paths in function return a value. */
 		// "noFallthroughCasesInSwitch": true,          /* Report errors for fallthrough cases in switch statement. */
 		// "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
diff --git a/yarn.lock b/yarn.lock
index d3cc00e3a71..6d8d740fa76 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -32,7 +32,7 @@
   dependencies:
     "@babel/highlight" "^7.10.4"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.8.3":
+"@babel/code-frame@^7.0.0":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
   integrity sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==
@@ -96,7 +96,7 @@
     js-tokens "^4.0.0"
     picocolors "^1.1.1"
 
-"@babel/compat-data@^7.20.5", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.23.5":
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.23.5":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.5.tgz#ffb878728bb6bdcb6f4510aa51b1be9afb8cfd98"
   integrity sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==
@@ -221,15 +221,6 @@
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/eslint-parser@^7.25.1":
-  version "7.26.10"
-  resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.26.10.tgz#4423cb3f84c26978439feabfe23c5aa929400737"
-  integrity sha512-QsfQZr4AiLpKqn7fz+j7SN+f43z2DZCgGyYbNJ2vJOqKfG4E6MZer1+jqGZqKJaxq/gdO2DC/nUu45+pOL5p2Q==
-  dependencies:
-    "@nicolo-ribaudo/eslint-scope-5-internals" "5.1.1-v1"
-    eslint-visitor-keys "^2.1.0"
-    semver "^6.3.1"
-
 "@babel/eslint-parser@~7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.25.9.tgz#603c68a63078796527bc9d0833f5e52dd5f9224c"
@@ -255,7 +246,7 @@
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
-"@babel/generator@^7.20.0", "@babel/generator@^7.20.5", "@babel/generator@^7.23.6":
+"@babel/generator@^7.20.5", "@babel/generator@^7.23.6":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.6.tgz#9e1fca4811c77a10580d17d26b57b036133f3c2e"
   integrity sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==
@@ -345,7 +336,7 @@
   dependencies:
     "@babel/types" "^7.27.3"
 
-"@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.22.15", "@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.23.6":
+"@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.23.6":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz#4d79069b16cbcf1461289eccfbbd81501ae39991"
   integrity sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==
@@ -402,10 +393,10 @@
     "@babel/helper-replace-supers" "^7.18.6"
     "@babel/helper-split-export-declaration" "^7.18.6"
 
-"@babel/helper-create-class-features-plugin@^7.22.15", "@babel/helper-create-class-features-plugin@^7.24.0":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.0.tgz#fc7554141bdbfa2d17f7b4b80153b9b090e5d158"
-  integrity sha512-QAH+vfvts51BCsNZ2PhY6HAggnlS6omLLFTsIpeqZk/MmJ6cW7tgz5yRv0fMJThcr6FmbMrENh1RgrWPTYA76g==
+"@babel/helper-create-class-features-plugin@^7.23.6":
+  version "7.23.10"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.10.tgz#25d55fafbaea31fd0e723820bb6cc3df72edf7ea"
+  integrity sha512-2XpP2XhkXzgxecPNEEK8Vz8Asj9aRxt08oKOqtiZoqV2UGZ5T+EkyP9sXQ9nwMxBIG34a7jmasVqoMop7VdPUw==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
     "@babel/helper-environment-visitor" "^7.22.20"
@@ -417,10 +408,10 @@
     "@babel/helper-split-export-declaration" "^7.22.6"
     semver "^6.3.1"
 
-"@babel/helper-create-class-features-plugin@^7.23.6":
-  version "7.23.10"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.10.tgz#25d55fafbaea31fd0e723820bb6cc3df72edf7ea"
-  integrity sha512-2XpP2XhkXzgxecPNEEK8Vz8Asj9aRxt08oKOqtiZoqV2UGZ5T+EkyP9sXQ9nwMxBIG34a7jmasVqoMop7VdPUw==
+"@babel/helper-create-class-features-plugin@^7.24.0":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.0.tgz#fc7554141bdbfa2d17f7b4b80153b9b090e5d158"
+  integrity sha512-QAH+vfvts51BCsNZ2PhY6HAggnlS6omLLFTsIpeqZk/MmJ6cW7tgz5yRv0fMJThcr6FmbMrENh1RgrWPTYA76g==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
     "@babel/helper-environment-visitor" "^7.22.20"
@@ -466,15 +457,6 @@
     "@babel/helper-annotate-as-pure" "^7.18.6"
     regexpu-core "^5.1.0"
 
-"@babel/helper-create-regexp-features-plugin@^7.22.15", "@babel/helper-create-regexp-features-plugin@^7.22.5":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.15.tgz#5ee90093914ea09639b01c711db0d6775e558be1"
-  integrity sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    regexpu-core "^5.3.1"
-    semver "^6.3.1"
-
 "@babel/helper-create-regexp-features-plugin@^7.25.9":
   version "7.26.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.26.3.tgz#5169756ecbe1d95f7866b90bb555b022595302a0"
@@ -484,17 +466,6 @@
     regexpu-core "^6.2.0"
     semver "^6.3.1"
 
-"@babel/helper-define-polyfill-provider@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.5.0.tgz#465805b7361f461e86c680f1de21eaf88c25901b"
-  integrity sha512-NovQquuQLAQ5HuyjCz7WQP9MjRj7dx++yspwiyUiGl9ZyadHRSql1HZh5ogRd8W8w6YM6EQ/NTB8rgjLt5W65Q==
-  dependencies:
-    "@babel/helper-compilation-targets" "^7.22.6"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    debug "^4.1.1"
-    lodash.debounce "^4.0.8"
-    resolve "^1.14.2"
-
 "@babel/helper-define-polyfill-provider@^0.6.1":
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.1.tgz#fadc63f0c2ff3c8d02ed905dcea747c5b0fb74fd"
@@ -528,7 +499,7 @@
     lodash.debounce "^4.0.8"
     resolve "^1.14.2"
 
-"@babel/helper-environment-visitor@^7.18.6", "@babel/helper-environment-visitor@^7.18.9", "@babel/helper-environment-visitor@^7.22.20":
+"@babel/helper-environment-visitor@^7.18.6", "@babel/helper-environment-visitor@^7.22.20":
   version "7.22.20"
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
   integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
@@ -541,7 +512,7 @@
     "@babel/template" "^7.18.6"
     "@babel/types" "^7.18.6"
 
-"@babel/helper-function-name@^7.22.5", "@babel/helper-function-name@^7.23.0":
+"@babel/helper-function-name@^7.23.0":
   version "7.23.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
   integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
@@ -671,7 +642,7 @@
   dependencies:
     "@babel/types" "^7.27.1"
 
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.24.0", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.24.0", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz#945681931a52f15ce879fd5b86ce2dae6d3d7f2a"
   integrity sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==
@@ -701,25 +672,6 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.28.6.tgz#6f13ea251b68c8532e985fd532f28741a8af9ac8"
   integrity sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==
 
-"@babel/helper-remap-async-to-generator@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
-  integrity sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-wrap-function" "^7.18.9"
-    "@babel/types" "^7.18.9"
-
-"@babel/helper-remap-async-to-generator@^7.22.20":
-  version "7.22.20"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz#7b68e1cb4fa964d2996fd063723fb48eca8498e0"
-  integrity sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-wrap-function" "^7.22.20"
-
 "@babel/helper-remap-async-to-generator@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.9.tgz#e53956ab3d5b9fb88be04b3e2f31b523afd34b92"
@@ -878,15 +830,6 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz#fa52f5b1e7db1ab049445b421c4471303897702f"
   integrity sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==
 
-"@babel/helper-wrap-function@^7.18.9", "@babel/helper-wrap-function@^7.22.20":
-  version "7.22.20"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.22.20.tgz#15352b0b9bfb10fc9c76f79f6342c00e3411a569"
-  integrity sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw==
-  dependencies:
-    "@babel/helper-function-name" "^7.22.5"
-    "@babel/template" "^7.22.15"
-    "@babel/types" "^7.22.19"
-
 "@babel/helper-wrap-function@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.25.9.tgz#d99dfd595312e6c894bd7d237470025c85eea9d0"
@@ -1007,7 +950,7 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.0.tgz#26a3d1ff49031c53a97d03b604375f028746a9ac"
   integrity sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==
 
-"@babel/parser@^7.10.4", "@babel/parser@^7.24.0", "@babel/parser@^7.24.1", "@babel/parser@^7.8.6":
+"@babel/parser@^7.10.4", "@babel/parser@^7.24.0", "@babel/parser@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.1.tgz#1e416d3627393fab1cb5b0f2f1796a100ae9133a"
   integrity sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==
@@ -1082,17 +1025,7 @@
     "@babel/helper-plugin-utils" "^7.25.9"
     "@babel/traverse" "^7.25.9"
 
-"@babel/plugin-proposal-async-generator-functions@^7.0.0":
-  version "7.18.10"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.18.10.tgz#85ea478c98b0095c3e4102bff3b67d306ed24952"
-  integrity sha512-1mFuY2TOsR1hxbjCo4QL+qlIjV07p4H4EUYw2J/WCqsvFV6V9X9z9YhXbWndc/4fw+hYGlDT7egYxliMp5O6Ew==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-plugin-utils" "^7.18.9"
-    "@babel/helper-remap-async-to-generator" "^7.18.9"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-
-"@babel/plugin-proposal-class-properties@^7.13.0", "@babel/plugin-proposal-class-properties@^7.18.0":
+"@babel/plugin-proposal-class-properties@^7.13.0":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
   integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
@@ -1118,14 +1051,6 @@
     "@babel/helper-plugin-utils" "^7.25.9"
     "@babel/plugin-syntax-decorators" "^7.25.9"
 
-"@babel/plugin-proposal-export-default-from@^7.0.0":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.23.3.tgz#6f511a676c540ccc8d17a8553dbba9230b0ddac0"
-  integrity sha512-Q23MpLZfSGZL1kU7fWqV262q65svLSCIP5kZ/JCW/rKTCm/FrLjpvEd2kfUYMVeHh4QhV/xzyoRAHWrAZJrE3Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/plugin-syntax-export-default-from" "^7.23.3"
-
 "@babel/plugin-proposal-export-default-from@^7.24.7":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.25.9.tgz#52702be6ef8367fc8f18b8438278332beeb8f87c"
@@ -1133,7 +1058,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.13.8", "@babel/plugin-proposal-nullish-coalescing-operator@^7.18.0":
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.13.8":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1"
   integrity sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==
@@ -1141,34 +1066,7 @@
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
-"@babel/plugin-proposal-numeric-separator@^7.0.0":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz#899b14fbafe87f053d2c5ff05b36029c62e13c75"
-  integrity sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-
-"@babel/plugin-proposal-object-rest-spread@^7.20.0":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz#aa662940ef425779c75534a5c41e9d936edc390a"
-  integrity sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==
-  dependencies:
-    "@babel/compat-data" "^7.20.5"
-    "@babel/helper-compilation-targets" "^7.20.7"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.20.7"
-
-"@babel/plugin-proposal-optional-catch-binding@^7.0.0":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz#f9400d0e6a3ea93ba9ef70b09e72dd6da638a2cb"
-  integrity sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-
-"@babel/plugin-proposal-optional-chaining@^7.13.12", "@babel/plugin-proposal-optional-chaining@^7.20.0":
+"@babel/plugin-proposal-optional-chaining@^7.13.12":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz#886f5c8978deb7d30f678b2e24346b287234d3ea"
   integrity sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==
@@ -1217,20 +1115,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.28.6"
 
-"@babel/plugin-syntax-dynamic-import@^7.8.0", "@babel/plugin-syntax-dynamic-import@^7.8.3":
+"@babel/plugin-syntax-dynamic-import@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
   integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-export-default-from@^7.0.0", "@babel/plugin-syntax-export-default-from@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-default-from/-/plugin-syntax-export-default-from-7.23.3.tgz#7e6d4bf595d5724230200fb2b7401d4734b15335"
-  integrity sha512-KeENO5ck1IeZ/l2lFZNy+mpobV3D2Zy5C1YFnWm+YuY5mQiAWc4yAp13dqgguwsBsFVLh4LPCEqCa5qW13N+hw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-
 "@babel/plugin-syntax-export-default-from@^7.24.7":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-default-from/-/plugin-syntax-export-default-from-7.25.9.tgz#86614767a9ff140366f0c3766ef218beb32a730a"
@@ -1245,7 +1136,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-flow@^7.12.1", "@babel/plugin-syntax-flow@^7.18.0", "@babel/plugin-syntax-flow@^7.23.3":
+"@babel/plugin-syntax-flow@^7.12.1", "@babel/plugin-syntax-flow@^7.23.3":
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.23.3.tgz#084564e0f3cc21ea6c70c44cff984a1c0509729a"
   integrity sha512-YZiAIpkJAwQXBJLIQbRFayR5c+gJ35Vcz3bg954k7cd73zqjvhacJuL9RbrzPz8qPmZdgqP6EUKwy0PCNhaaPA==
@@ -1315,14 +1206,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-nullish-coalescing-operator@^7.0.0", "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
   integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-numeric-separator@^7.10.4", "@babel/plugin-syntax-numeric-separator@^7.8.3":
+"@babel/plugin-syntax-numeric-separator@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
   integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
@@ -1343,20 +1234,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-optional-chaining@^7.0.0", "@babel/plugin-syntax-optional-chaining@^7.8.3":
+"@babel/plugin-syntax-optional-chaining@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
   integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-private-property-in-object@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz#0dc6671ec0ea22b6e94a1114f857970cd39de1ad"
-  integrity sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
-
 "@babel/plugin-syntax-top-level-await@^7.8.3":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
@@ -1386,13 +1270,6 @@
     "@babel/helper-create-regexp-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-arrow-functions@^7.0.0":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.23.3.tgz#94c6dcfd731af90f27a79509f9ab7fb2120fc38b"
-  integrity sha512-NzQcQrzaQPkaEwoTm4Mhyl8jI1huEL/WWIEvudjTCMJ9aBZNpsJbMASx7EQECtQQPS/DcnFpo0FIh3LvEO9cxQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-
 "@babel/plugin-transform-arrow-functions@^7.0.0-0", "@babel/plugin-transform-arrow-functions@^7.24.7", "@babel/plugin-transform-arrow-functions@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.9.tgz#7821d4410bee5daaadbb4cdd9a6649704e176845"
@@ -1418,15 +1295,6 @@
     "@babel/helper-remap-async-to-generator" "^7.27.1"
     "@babel/traverse" "^7.29.0"
 
-"@babel/plugin-transform-async-to-generator@^7.20.0":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.23.3.tgz#d1f513c7a8a506d43f47df2bf25f9254b0b051fa"
-  integrity sha512-A7LFsKi4U4fomjqXJlZg/u0ft/n8/7n7lpffUP/ZULx/DtV9SGlNKZolHH6PE8Xl1ngCc0M11OaeZptXVkfKSw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-remap-async-to-generator" "^7.22.20"
-
 "@babel/plugin-transform-async-to-generator@^7.24.7", "@babel/plugin-transform-async-to-generator@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.9.tgz#c80008dacae51482793e5a9c08b39a5be7e12d71"
@@ -1443,13 +1311,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.27.1"
 
-"@babel/plugin-transform-block-scoping@^7.0.0":
-  version "7.23.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.23.4.tgz#b2d38589531c6c80fbe25e6b58e763622d2d3cf5"
-  integrity sha512-0QqbP6B6HOh7/8iNR4CQU2Th/bbRtBp4KS9vcaZd1fZ0wSh5Fyssg0UCIHwxh+ka+pNDREbVLQnHCMHKZfPwfw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-
 "@babel/plugin-transform-block-scoping@^7.25.0", "@babel/plugin-transform-block-scoping@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.9.tgz#c33665e46b06759c93687ca0f84395b80c0473a1"
@@ -1473,20 +1334,6 @@
     "@babel/helper-create-class-features-plugin" "^7.28.6"
     "@babel/helper-plugin-utils" "^7.28.6"
 
-"@babel/plugin-transform-classes@^7.0.0":
-  version "7.23.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.8.tgz#d08ae096c240347badd68cdf1b6d1624a6435d92"
-  integrity sha512-yAYslGsY1bX6Knmg46RjiCiNSwJKv2IUC8qOdYKqMMr0491SXFhcHqOdRDeCRohOOIzwN/90C6mQ9qAKgrP7dg==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-compilation-targets" "^7.23.6"
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-replace-supers" "^7.22.20"
-    "@babel/helper-split-export-declaration" "^7.22.6"
-    globals "^11.1.0"
-
 "@babel/plugin-transform-classes@^7.0.0-0", "@babel/plugin-transform-classes@^7.25.4", "@babel/plugin-transform-classes@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.9.tgz#7152457f7880b593a63ade8a861e6e26a4469f52"
@@ -1499,14 +1346,6 @@
     "@babel/traverse" "^7.25.9"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.0.0":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.23.3.tgz#652e69561fcc9d2b50ba4f7ac7f60dcf65e86474"
-  integrity sha512-dTj83UVTLw/+nbiHqQSFdwO9CbTtwq1DsDqm3CUEtDrZNET5rT5E6bIdTlOftDTDLMYxvxHNEYO4B9SLl8SLZw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/template" "^7.22.15"
-
 "@babel/plugin-transform-computed-properties@^7.24.7", "@babel/plugin-transform-computed-properties@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.9.tgz#db36492c78460e534b8852b1d5befe3c923ef10b"
@@ -1515,13 +1354,6 @@
     "@babel/helper-plugin-utils" "^7.25.9"
     "@babel/template" "^7.25.9"
 
-"@babel/plugin-transform-destructuring@^7.20.0":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.23.3.tgz#8c9ee68228b12ae3dff986e56ed1ba4f3c446311"
-  integrity sha512-n225npDqjDIr967cMScVKHXJs7rout1q+tt50inyBCPkyZ8KxeI6d+GIbSBTT/w/9WdlWDOej3V9HE5Lgk57gw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-
 "@babel/plugin-transform-destructuring@^7.24.8", "@babel/plugin-transform-destructuring@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.9.tgz#966ea2595c498224340883602d3cfd7a0c79cea1"
@@ -1581,7 +1413,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-flow-strip-types@^7.20.0", "@babel/plugin-transform-flow-strip-types@^7.23.3":
+"@babel/plugin-transform-flow-strip-types@^7.23.3":
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.23.3.tgz#cfa7ca159cc3306fab526fc67091556b51af26ff"
   integrity sha512-26/pQTf9nQSNVJCrLB1IkHUKyPxR+lMrH2QDPG89+Znu9rAMbtrybdbWeE9bb7gzjmE5iXHEY+e0HUwM6Co93Q==
@@ -1613,15 +1445,6 @@
     "@babel/helper-plugin-utils" "^7.27.1"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.27.1"
 
-"@babel/plugin-transform-function-name@^7.0.0":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.23.3.tgz#8f424fcd862bf84cb9a1a6b42bc2f47ed630f8dc"
-  integrity sha512-I1QXp1LxIvt8yLaib49dRW5Okt7Q4oaxao6tFVKS/anCdEOMtYwWVKoiOA1p34GOWIZjUK0E+zCp7+l1pfQyiw==
-  dependencies:
-    "@babel/helper-compilation-targets" "^7.22.15"
-    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-plugin-utils" "^7.22.5"
-
 "@babel/plugin-transform-function-name@^7.25.1", "@babel/plugin-transform-function-name@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.9.tgz#939d956e68a606661005bfd550c4fc2ef95f7b97"
@@ -1638,13 +1461,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-literals@^7.0.0":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.23.3.tgz#8214665f00506ead73de157eba233e7381f3beb4"
-  integrity sha512-wZ0PIXRxnwZvl9AYpqNUxpZ5BiTGrYt7kueGQ+N5FiQ7RCOD4cm8iShd6S6ggfVIWaJf2EMk8eRzAh52RfP4rQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-
 "@babel/plugin-transform-literals@^7.25.2", "@babel/plugin-transform-literals@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.9.tgz#1a1c6b4d4aa59bc4cad5b6b3a223a0abd685c9de"
@@ -1674,7 +1490,7 @@
     "@babel/helper-module-transforms" "^7.25.9"
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-modules-commonjs@^7.0.0", "@babel/plugin-transform-modules-commonjs@^7.13.8", "@babel/plugin-transform-modules-commonjs@^7.23.3":
+"@babel/plugin-transform-modules-commonjs@^7.13.8", "@babel/plugin-transform-modules-commonjs@^7.23.3":
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.3.tgz#661ae831b9577e52be57dd8356b734f9700b53b4"
   integrity sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==
@@ -1709,14 +1525,6 @@
     "@babel/helper-module-transforms" "^7.25.9"
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.0.0":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz#67fe18ee8ce02d57c855185e27e3dc959b2e991f"
-  integrity sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.22.5"
-    "@babel/helper-plugin-utils" "^7.22.5"
-
 "@babel/plugin-transform-named-capturing-groups-regex@^7.24.7", "@babel/plugin-transform-named-capturing-groups-regex@^7.25.9", "@babel/plugin-transform-named-capturing-groups-regex@~7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.9.tgz#454990ae6cc22fd2a0fa60b3a2c6f63a38064e6a"
@@ -1796,7 +1604,7 @@
     "@babel/helper-plugin-utils" "^7.25.9"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
 
-"@babel/plugin-transform-parameters@^7.0.0", "@babel/plugin-transform-parameters@^7.20.7", "@babel/plugin-transform-parameters@^7.22.15", "@babel/plugin-transform-parameters@^7.23.3":
+"@babel/plugin-transform-parameters@^7.22.15", "@babel/plugin-transform-parameters@^7.23.3":
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.23.3.tgz#83ef5d1baf4b1072fa6e54b2b0999a7b2527e2af"
   integrity sha512-09lMt6UsUb3/34BbECKVbVwrT9bO6lILWln237z7sLaWnMsTi7Yc9fhX5DLpkJzAGfaReXI22wP41SZmnAA3Vw==
@@ -1810,14 +1618,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-private-methods@^7.22.5":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.23.3.tgz#b2d7a3c97e278bfe59137a978d53b2c2e038c0e4"
-  integrity sha512-UzqRcRtWsDMTLrRWFvUBDwmw06tCQH9Rl1uAjfh6ijMSmGYQ+fpdB+cnqRC8EMh5tuuxSv0/TejGL+7vyj+50g==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.22.5"
-
 "@babel/plugin-transform-private-methods@^7.24.7", "@babel/plugin-transform-private-methods@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.9.tgz#847f4139263577526455d7d3223cd8bda51e3b57"
@@ -1826,16 +1626,6 @@
     "@babel/helper-create-class-features-plugin" "^7.25.9"
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-private-property-in-object@^7.22.11":
-  version "7.23.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.23.4.tgz#3ec711d05d6608fd173d9b8de39872d8dbf68bf5"
-  integrity sha512-9G3K1YqTq3F4Vt88Djx1UZ79PDyj+yKRnUy7cZGSMe+a7jkwD259uKKuUzQlPkGam7R+8RJwh5z4xO27fA1o2A==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-create-class-features-plugin" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
-
 "@babel/plugin-transform-private-property-in-object@^7.24.7", "@babel/plugin-transform-private-property-in-object@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.9.tgz#9c8b73e64e6cc3cbb2743633885a7dd2c385fe33"
@@ -1852,7 +1642,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-react-display-name@^7.0.0", "@babel/plugin-transform-react-display-name@^7.23.3":
+"@babel/plugin-transform-react-display-name@^7.23.3":
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.23.3.tgz#70529f034dd1e561045ad3c8152a267f0d7b6200"
   integrity sha512-GnvhtVfA2OAtzdX58FJxU19rhoGeQzyVndw3GgtdECQvQFXPEZIOVULHVZGAYmOgmqjXpVpfocAbSjh99V/Fqw==
@@ -1873,13 +1663,6 @@
   dependencies:
     "@babel/plugin-transform-react-jsx" "^7.22.5"
 
-"@babel/plugin-transform-react-jsx-self@^7.0.0":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.23.3.tgz#ed3e7dadde046cce761a8e3cf003a13d1a7972d9"
-  integrity sha512-qXRvbeKDSfwnlJnanVRp0SfuWE5DQhwQr5xtLBzp56Wabyo+4CMosF6Kfp+eOD/4FYpql64XVJ2W0pVLlJZxOQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-
 "@babel/plugin-transform-react-jsx-self@^7.24.7":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.25.9.tgz#c0b6cae9c1b73967f7f9eb2fca9536ba2fad2858"
@@ -1887,13 +1670,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-react-jsx-source@^7.0.0":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.23.3.tgz#03527006bdc8775247a78643c51d4e715fe39a3e"
-  integrity sha512-91RS0MDnAWDNvGC6Wio5XYkyWI39FMFO+JK9+4AlgaTH+yWwVTsw7/sn6LK0lH7c5F+TFkpv/3LfCJ1Ydwof/g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-
 "@babel/plugin-transform-react-jsx-source@^7.24.7":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.25.9.tgz#4c6b8daa520b5f155b5fb55547d7c9fa91417503"
@@ -1901,7 +1677,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-react-jsx@^7.0.0", "@babel/plugin-transform-react-jsx@^7.22.15", "@babel/plugin-transform-react-jsx@^7.22.5":
+"@babel/plugin-transform-react-jsx@^7.22.15", "@babel/plugin-transform-react-jsx@^7.22.5":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.23.4.tgz#393f99185110cea87184ea47bcb4a7b0c2e39312"
   integrity sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==
@@ -1946,18 +1722,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-runtime@^7.0.0":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.24.0.tgz#e308fe27d08b74027d42547081eefaf4f2ffbcc9"
-  integrity sha512-zc0GA5IitLKJrSfXlXmp8KDqLrnGECK7YRfQBmEKg1NmBOQ7e+KuclBEKJgzifQeUYLdNiAw4B4bjyvzWVLiSA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.24.0"
-    babel-plugin-polyfill-corejs2 "^0.4.8"
-    babel-plugin-polyfill-corejs3 "^0.9.0"
-    babel-plugin-polyfill-regenerator "^0.5.5"
-    semver "^6.3.1"
-
 "@babel/plugin-transform-runtime@^7.24.7":
   version "7.26.10"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.26.10.tgz#6b4504233de8238e7d666c15cde681dc62adff87"
@@ -1970,13 +1734,6 @@
     babel-plugin-polyfill-regenerator "^0.6.1"
     semver "^6.3.1"
 
-"@babel/plugin-transform-shorthand-properties@^7.0.0":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.23.3.tgz#97d82a39b0e0c24f8a981568a8ed851745f59210"
-  integrity sha512-ED2fgqZLmexWiN+YNFX26fx4gh5qHDhn1O2gvEhreLW2iI63Sqm4llRLCXALKrCnbN4Jy0VcMQZl/SAzqug/jg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-
 "@babel/plugin-transform-shorthand-properties@^7.0.0-0", "@babel/plugin-transform-shorthand-properties@^7.24.7", "@babel/plugin-transform-shorthand-properties@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.9.tgz#bb785e6091f99f826a95f9894fc16fde61c163f2"
@@ -1984,14 +1741,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-spread@^7.0.0":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.23.3.tgz#41d17aacb12bde55168403c6f2d6bdca563d362c"
-  integrity sha512-VvfVYlrlBVu+77xVTOAoxQ6mZbnIq5FM0aGBSFEcIh03qHf+zNqA4DC/3XMUozTg7bZV3e3mZQ0i13VB6v5yUg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
-
 "@babel/plugin-transform-spread@^7.24.7", "@babel/plugin-transform-spread@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.9.tgz#24a35153931b4ba3d13cec4a7748c21ab5514ef9"
@@ -2000,13 +1749,6 @@
     "@babel/helper-plugin-utils" "^7.25.9"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
 
-"@babel/plugin-transform-sticky-regex@^7.0.0":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.23.3.tgz#dec45588ab4a723cb579c609b294a3d1bd22ff04"
-  integrity sha512-HZOyN9g+rtvnOU3Yh7kSxXrKbzgrm5X4GncPY1QOquu7epga5MxKHVpYu2hvQnry/H+JjckSYRb93iNfsioAGg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-
 "@babel/plugin-transform-sticky-regex@^7.24.7", "@babel/plugin-transform-sticky-regex@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.9.tgz#c7f02b944e986a417817b20ba2c504dfc1453d32"
@@ -2035,7 +1777,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.27.1"
 
-"@babel/plugin-transform-typescript@^7.23.3", "@babel/plugin-transform-typescript@^7.5.0":
+"@babel/plugin-transform-typescript@^7.23.3":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.23.6.tgz#aa36a94e5da8d94339ae3a4e22d40ed287feb34c"
   integrity sha512-6cBG5mBvUu4VUD04OHKnYzbuHNP8huDsD3EDqqpIpsswTDoqHCjLoHb6+QgsV1WsT2nipRqCPgxD3LXnEO7XfA==
@@ -2071,14 +1813,6 @@
     "@babel/helper-create-regexp-features-plugin" "^7.25.9"
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-unicode-regex@^7.0.0":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.23.3.tgz#26897708d8f42654ca4ce1b73e96140fbad879dc"
-  integrity sha512-wMHpNA4x2cIA32b/ci3AfwNgheiva2W0WUKWTK7vBHBhDKfPsc5cFGNWm69WBqpwd86u1qwZ9PWevKqm1A3yAw==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.22.5"
-
 "@babel/plugin-transform-unicode-regex@^7.0.0-0", "@babel/plugin-transform-unicode-regex@^7.24.7", "@babel/plugin-transform-unicode-regex@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.9.tgz#5eae747fe39eacf13a8bd006a4fb0b5d1fa5e9b1"
@@ -2232,11 +1966,6 @@
     pirates "^4.0.6"
     source-map-support "^0.5.16"
 
-"@babel/regjsgen@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
-  integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
-
 "@babel/runtime-corejs3@^7.12.1":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.24.0.tgz#34243e29e369a762dd2a356fee65c3767973828a"
@@ -2252,7 +1981,7 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.20.0", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.20.0", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e"
   integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==
@@ -2264,13 +1993,6 @@
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.27.6.tgz#ec4070a04d76bae8ddbb10770ba55714a417b7c6"
   integrity sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==
 
-"@babel/runtime@^7.23.2":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.1.tgz#431f9a794d173b53720e69a6464abc6f0e2a5c57"
-  integrity sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==
-  dependencies:
-    regenerator-runtime "^0.14.0"
-
 "@babel/runtime@^7.25.0":
   version "7.26.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.10.tgz#a07b4d8fa27af131a633d7b3524db803eb4764c2"
@@ -2285,15 +2007,6 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/template@^7.0.0":
-  version "7.8.6"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
-  integrity sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==
-  dependencies:
-    "@babel/code-frame" "^7.8.3"
-    "@babel/parser" "^7.8.6"
-    "@babel/types" "^7.8.6"
-
 "@babel/template@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.6.tgz#1283f4993e00b929d6e2d3c72fdc9168a2977a31"
@@ -2386,7 +2099,7 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/traverse@^7.20.0", "@babel/traverse@^7.24.0":
+"@babel/traverse@^7.24.0":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.0.tgz#4a408fbf364ff73135c714a2ab46a5eab2831b1e"
   integrity sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==
@@ -2457,7 +2170,7 @@
     "@babel/types" "^7.29.0"
     debug "^4.3.1"
 
-"@babel/types@^7.0.0", "@babel/types@^7.4.4", "@babel/types@^7.8.6":
+"@babel/types@^7.0.0", "@babel/types@^7.4.4":
   version "7.9.6"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.6.tgz#2c5502b427251e9de1bd2dff95add646d95cc9f7"
   integrity sha512-qxXzvBO//jO9ZnoasKF1uJzHd2+M6Q2ZPIVfnFps8JJvXy0ZBbwbNOmE6SGIY5XOY6d1Bo5lb9d9RJ8nv3WSeA==
@@ -2491,15 +2204,7 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.9.tgz#7148d64ba133d8d73a41b3172ac4b83a1452205f"
-  integrity sha512-WwMLAg2MvJmt/rKEVQBBhIVffMmnilX4oe0sRe7iPOHIGsqpruFHHdrfj4O1CMMtgMtCU4oPafZjDPCRgO57Wg==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.18.6"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.20.0", "@babel/types@^7.20.7", "@babel/types@^7.22.19", "@babel/types@^7.23.4", "@babel/types@^7.23.9", "@babel/types@^7.24.0":
+"@babel/types@^7.20.0", "@babel/types@^7.20.7", "@babel/types@^7.23.4", "@babel/types@^7.23.9", "@babel/types@^7.24.0":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.0.tgz#3b951f435a92e7333eba05b7566fd297960ea1bf"
   integrity sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==
@@ -2655,13 +2360,6 @@
     glob "^7.1.6"
     read-pkg-up "^7.0.1"
 
-"@discord/bottom-sheet@bluesky-social/react-native-bottom-sheet":
-  version "4.6.1"
-  resolved "https://codeload.github.com/bluesky-social/react-native-bottom-sheet/tar.gz/28a87d1bb55e10fc355fa1455545a30734995908"
-  dependencies:
-    "@gorhom/portal" "1.0.14"
-    invariant "^2.2.4"
-
 "@egjs/hammerjs@^2.0.17":
   version "2.0.17"
   resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
@@ -2823,12 +2521,19 @@
   dependencies:
     eslint-visitor-keys "^3.3.0"
 
+"@eslint-community/eslint-utils@^4.9.1":
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz#4e90af67bc51ddee6cdef5284edf572ec376b595"
+  integrity sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==
+  dependencies:
+    eslint-visitor-keys "^3.4.3"
+
 "@eslint-community/regexpp@^4.10.0":
   version "4.12.1"
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.12.1.tgz#cfc6cffe39df390a3841cde2abccf92eaa7ae0e0"
   integrity sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==
 
-"@eslint-community/regexpp@^4.5.1", "@eslint-community/regexpp@^4.6.1":
+"@eslint-community/regexpp@^4.6.1":
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
   integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
@@ -3655,10 +3360,10 @@
   resolved "https://registry.yarnpkg.com/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.3.tgz#a73bab8eb491d7b8b7be2f0e6c310647835afe83"
   integrity sha512-2xCRM9q9FlzGZCdgDMJwc0gyUkWFtkosy7Xxr6sFgQwn+wMNIWd7xIvYNauU1r64B5L5rsGKy/n9TKJ0aAFeqQ==
 
-"@gorhom/bottom-sheet@^5.1.6":
-  version "5.1.6"
-  resolved "https://registry.yarnpkg.com/@gorhom/bottom-sheet/-/bottom-sheet-5.1.6.tgz#92365894ae4d4eefdbaa577408cfaf62463a9490"
-  integrity sha512-0b5tQj4fTaZAjST1PnkCp0p7d8iRqMezibTcqc8Kkn3N23Vn6upORNTD1fH0bLfwRt6e0WnZ7DjAmq315lrcKQ==
+"@gorhom/bottom-sheet@^5":
+  version "5.2.8"
+  resolved "https://registry.yarnpkg.com/@gorhom/bottom-sheet/-/bottom-sheet-5.2.8.tgz#25e49122c30ffe83d3813b3bcf3dec39f3359aeb"
+  integrity sha512-+N27SMpbBxXZQ/IA2nlEV6RGxL/qSFHKfdFKcygvW+HqPG5jVNb1OqehLQsGfBP+Up42i0gW5ppI+DhpB7UCzA==
   dependencies:
     "@gorhom/portal" "1.0.14"
     invariant "^2.2.4"
@@ -3729,6 +3434,14 @@
   resolved "https://registry.yarnpkg.com/@ide/backoff/-/backoff-1.0.0.tgz#466842c25bd4a4833e0642fab41ccff064010176"
   integrity sha512-F0YfUDjvT+Mtt/R4xdl2X0EYCHMMiJqNLdxHD++jDT5ydEFIyqbCHh51Qx2E211dgZprPKhV7sHmnXKpLuvc5g==
 
+"@inquirer/external-editor@^1.0.0":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@inquirer/external-editor/-/external-editor-1.0.3.tgz#c23988291ee676290fdab3fd306e64010a6d13b8"
+  integrity sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==
+  dependencies:
+    chardet "^2.1.1"
+    iconv-lite "^0.7.0"
+
 "@isaacs/balanced-match@^4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz#3081dadbc3460661b751e7591d7faea5df39dd29"
@@ -3827,7 +3540,7 @@
     slash "^3.0.0"
     strip-ansi "^6.0.0"
 
-"@jest/create-cache-key-function@^29.2.1", "@jest/create-cache-key-function@^29.6.3", "@jest/create-cache-key-function@^29.7.0":
+"@jest/create-cache-key-function@^29.2.1", "@jest/create-cache-key-function@^29.7.0":
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/@jest/create-cache-key-function/-/create-cache-key-function-29.7.0.tgz#793be38148fab78e65f40ae30c36785f4ad859f0"
   integrity sha512-4QqS3LY5PBmTRHj9sAg1HLoPzqAI0uOX6wI/TRqHIcOxlFidy6YEmCQJk6FSZjNLGCeubDMfmkWL+qaLKhSGQA==
@@ -4096,6 +3809,11 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@lodev09/react-native-true-sheet@~3.7.0":
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/@lodev09/react-native-true-sheet/-/react-native-true-sheet-3.7.3.tgz#eac6dec8665fd6644d9fed8ca1d0993c49356f47"
+  integrity sha512-vX/3F6lD3qH0GZfSVXL+JD/bjFPZtJa35Vyr9KCv94szOHXsjoEyCyi/52r5jw6jmq/KRALCqwidt9A15qq9gw==
+
 "@napi-rs/wasm-runtime@^0.2.11":
   version "0.2.12"
   resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz#3e78a8b96e6c33a6c517e1894efbd5385a7cb6f2"
@@ -4161,6 +3879,11 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@pkgr/core@^0.2.9":
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.2.9.tgz#d229a7b7f9dac167a156992ef23c7f023653f53b"
+  integrity sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==
+
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"
@@ -4231,15 +3954,6 @@
   resolved "https://registry.yarnpkg.com/@react-native-clipboard/clipboard/-/clipboard-1.13.2.tgz#28adcfc43ed2addddf79a59198ec1b25087c115e"
   integrity sha512-uVM55oEGc6a6ZmSATDeTcMm55A/C1km5X47g0xaoF0Zagv7N/8RGvLceA5L/izPwflIy78t7XQeJUcnGSib0nA==
 
-"@react-native-community/cli-clean@12.3.6":
-  version "12.3.6"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-12.3.6.tgz#e8a7910bebc97266fd5068649013a03958021fc4"
-  integrity sha512-gUU29ep8xM0BbnZjwz9MyID74KKwutq9x5iv4BCr2im6nly4UMf1B1D+V225wR7VcDGzbgWjaezsJShLLhC5ig==
-  dependencies:
-    "@react-native-community/cli-tools" "12.3.6"
-    chalk "^4.1.2"
-    execa "^5.0.0"
-
 "@react-native-community/cli-clean@18.0.0":
   version "18.0.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-18.0.0.tgz#cdb414c069e0f6d2c1bca02cb48ec3c0f9686e3e"
@@ -4270,18 +3984,6 @@
     execa "^5.0.0"
     fast-glob "^3.3.2"
 
-"@react-native-community/cli-config@12.3.6":
-  version "12.3.6"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-config/-/cli-config-12.3.6.tgz#5f0be68270217908a739c32e3155a0e354773251"
-  integrity sha512-JGWSYQ9EAK6m2v0abXwFLEfsqJ1zkhzZ4CV261QZF9MoUNB6h57a274h1MLQR9mG6Tsh38wBUuNfEPUvS1vYew==
-  dependencies:
-    "@react-native-community/cli-tools" "12.3.6"
-    chalk "^4.1.2"
-    cosmiconfig "^5.1.0"
-    deepmerge "^4.3.0"
-    glob "^7.1.3"
-    joi "^17.2.1"
-
 "@react-native-community/cli-config@18.0.0":
   version "18.0.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-config/-/cli-config-18.0.0.tgz#95252f881b7c9abbffe7bc87b911de2a3ed9a68f"
@@ -4294,35 +3996,6 @@
     fast-glob "^3.3.2"
     joi "^17.2.1"
 
-"@react-native-community/cli-debugger-ui@12.3.6":
-  version "12.3.6"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-12.3.6.tgz#418027a1ae76850079684d309a732eb378c7f690"
-  integrity sha512-SjUKKsx5FmcK9G6Pb6UBFT0s9JexVStK5WInmANw75Hm7YokVvHEgtprQDz2Uvy5znX5g2ujzrkIU//T15KQzA==
-  dependencies:
-    serve-static "^1.13.1"
-
-"@react-native-community/cli-doctor@12.3.6":
-  version "12.3.6"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-doctor/-/cli-doctor-12.3.6.tgz#f68b51bbc6554ff4837269d98e9e405044e6f1b9"
-  integrity sha512-fvBDv2lTthfw4WOQKkdTop2PlE9GtfrlNnpjB818MhcdEnPjfQw5YaTUcnNEGsvGomdCs1MVRMgYXXwPSN6OvQ==
-  dependencies:
-    "@react-native-community/cli-config" "12.3.6"
-    "@react-native-community/cli-platform-android" "12.3.6"
-    "@react-native-community/cli-platform-ios" "12.3.6"
-    "@react-native-community/cli-tools" "12.3.6"
-    chalk "^4.1.2"
-    command-exists "^1.2.8"
-    deepmerge "^4.3.0"
-    envinfo "^7.10.0"
-    execa "^5.0.0"
-    hermes-profile-transformer "^0.0.6"
-    node-stream-zip "^1.9.1"
-    ora "^5.4.1"
-    semver "^7.5.2"
-    strip-ansi "^5.2.0"
-    wcwidth "^1.0.1"
-    yaml "^2.2.1"
-
 "@react-native-community/cli-doctor@18.0.0":
   version "18.0.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-doctor/-/cli-doctor-18.0.0.tgz#5d1f90e355b8b9ca7c7d860acef147b8979495ec"
@@ -4344,28 +4017,6 @@
     wcwidth "^1.0.1"
     yaml "^2.2.1"
 
-"@react-native-community/cli-hermes@12.3.6":
-  version "12.3.6"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-hermes/-/cli-hermes-12.3.6.tgz#5ac2c9ee26c69e1ce6b5047ba0f399984a6dea16"
-  integrity sha512-sNGwfOCl8OAIjWCkwuLpP8NZbuO0dhDI/2W7NeOGDzIBsf4/c4MptTrULWtGIH9okVPLSPX0NnRyGQ+mSwWyuQ==
-  dependencies:
-    "@react-native-community/cli-platform-android" "12.3.6"
-    "@react-native-community/cli-tools" "12.3.6"
-    chalk "^4.1.2"
-    hermes-profile-transformer "^0.0.6"
-
-"@react-native-community/cli-platform-android@12.3.6":
-  version "12.3.6"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-android/-/cli-platform-android-12.3.6.tgz#e1103692c659ff0b72ee6f00b7c72578db7376ec"
-  integrity sha512-DeDDAB8lHpuGIAPXeeD9Qu2+/wDTFPo99c8uSW49L0hkmZJixzvvvffbGQAYk32H0TmaI7rzvzH+qzu7z3891g==
-  dependencies:
-    "@react-native-community/cli-tools" "12.3.6"
-    chalk "^4.1.2"
-    execa "^5.0.0"
-    fast-xml-parser "^4.2.4"
-    glob "^7.1.3"
-    logkitty "^0.7.1"
-
 "@react-native-community/cli-platform-android@18.0.0":
   version "18.0.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-android/-/cli-platform-android-18.0.0.tgz#6bc69b0cccaa8d8138d31eb9b449e17528cd8f63"
@@ -4388,18 +4039,6 @@
     execa "^5.0.0"
     fast-xml-parser "^4.4.1"
 
-"@react-native-community/cli-platform-ios@12.3.6":
-  version "12.3.6"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-ios/-/cli-platform-ios-12.3.6.tgz#e7decb5ee764f5fdc7a6ad1ba5e15de8929d54a5"
-  integrity sha512-3eZ0jMCkKUO58wzPWlvAPRqezVKm9EPZyaPyHbRPWU8qw7JqkvnRlWIaYDGpjCJgVW4k2hKsEursLtYKb188tg==
-  dependencies:
-    "@react-native-community/cli-tools" "12.3.6"
-    chalk "^4.1.2"
-    execa "^5.0.0"
-    fast-xml-parser "^4.0.12"
-    glob "^7.1.3"
-    ora "^5.4.1"
-
 "@react-native-community/cli-platform-ios@18.0.0":
   version "18.0.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-ios/-/cli-platform-ios-18.0.0.tgz#75ccaddf974d5e3ca65a9d7ace0b4cafe7df4a44"
@@ -4407,26 +4046,6 @@
   dependencies:
     "@react-native-community/cli-platform-apple" "18.0.0"
 
-"@react-native-community/cli-plugin-metro@12.3.6":
-  version "12.3.6"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-plugin-metro/-/cli-plugin-metro-12.3.6.tgz#ae62de18e998478db60a3fe10dc746162c272dbd"
-  integrity sha512-3jxSBQt4fkS+KtHCPSyB5auIT+KKIrPCv9Dk14FbvOaEh9erUWEm/5PZWmtboW1z7CYeNbFMeXm9fM2xwtVOpg==
-
-"@react-native-community/cli-server-api@12.3.6":
-  version "12.3.6"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-server-api/-/cli-server-api-12.3.6.tgz#cd78122954a02d22c7821c365938635b51ddd1bd"
-  integrity sha512-80NIMzo8b2W+PL0Jd7NjiJW9mgaT8Y8wsIT/lh6mAvYH7mK0ecDJUYUTAAv79Tbo1iCGPAr3T295DlVtS8s4yQ==
-  dependencies:
-    "@react-native-community/cli-debugger-ui" "12.3.6"
-    "@react-native-community/cli-tools" "12.3.6"
-    compression "^1.7.1"
-    connect "^3.6.5"
-    errorhandler "^1.5.1"
-    nocache "^3.0.1"
-    pretty-format "^26.6.2"
-    serve-static "^1.13.1"
-    ws "^7.5.1"
-
 "@react-native-community/cli-server-api@18.0.0":
   version "18.0.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-server-api/-/cli-server-api-18.0.0.tgz#172df67c473361e060689a50d7aed93efeae4456"
@@ -4443,22 +4062,6 @@
     serve-static "^1.13.1"
     ws "^6.2.3"
 
-"@react-native-community/cli-tools@12.3.6":
-  version "12.3.6"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-tools/-/cli-tools-12.3.6.tgz#c39965982347635dfaf1daa7b3c0133b3bd45e64"
-  integrity sha512-FPEvZn19UTMMXUp/piwKZSh8cMEfO8G3KDtOwo53O347GTcwNrKjgZGtLSPELBX2gr+YlzEft3CoRv2Qmo83fQ==
-  dependencies:
-    appdirsjs "^1.2.4"
-    chalk "^4.1.2"
-    find-up "^5.0.0"
-    mime "^2.4.1"
-    node-fetch "^2.6.0"
-    open "^6.2.0"
-    ora "^5.4.1"
-    semver "^7.5.2"
-    shell-quote "^1.7.3"
-    sudo-prompt "^9.0.0"
-
 "@react-native-community/cli-tools@18.0.0", "@react-native-community/cli-tools@^18.0.0":
   version "18.0.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-tools/-/cli-tools-18.0.0.tgz#742330d3315bc78f1e57c03969231252f6584a29"
@@ -4475,13 +4078,6 @@
     prompts "^2.4.2"
     semver "^7.5.2"
 
-"@react-native-community/cli-types@12.3.6":
-  version "12.3.6"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-types/-/cli-types-12.3.6.tgz#239de348800fe1ffba3eb1fe0edbeb9306981e57"
-  integrity sha512-xPqTgcUtZowQ8WKOkI9TLGBwH2bGggOC4d2FFaIRST3gTcjrEeGRNeR5aXCzJFIgItIft8sd7p2oKEdy90+01Q==
-  dependencies:
-    joi "^17.2.1"
-
 "@react-native-community/cli-types@18.0.0":
   version "18.0.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-types/-/cli-types-18.0.0.tgz#225159de80c0b6a39f993fa003030c2eca2add00"
@@ -4489,30 +4085,6 @@
   dependencies:
     joi "^17.2.1"
 
-"@react-native-community/cli@12.3.6":
-  version "12.3.6"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli/-/cli-12.3.6.tgz#7a323b78725b959bb8a31cca1145918263ff3c8d"
-  integrity sha512-647OSi6xBb8FbwFqX9zsJxOzu685AWtrOUWHfOkbKD+5LOpGORw+GQo0F9rWZnB68rLQyfKUZWJeaD00pGv5fw==
-  dependencies:
-    "@react-native-community/cli-clean" "12.3.6"
-    "@react-native-community/cli-config" "12.3.6"
-    "@react-native-community/cli-debugger-ui" "12.3.6"
-    "@react-native-community/cli-doctor" "12.3.6"
-    "@react-native-community/cli-hermes" "12.3.6"
-    "@react-native-community/cli-plugin-metro" "12.3.6"
-    "@react-native-community/cli-server-api" "12.3.6"
-    "@react-native-community/cli-tools" "12.3.6"
-    "@react-native-community/cli-types" "12.3.6"
-    chalk "^4.1.2"
-    commander "^9.4.1"
-    deepmerge "^4.3.0"
-    execa "^5.0.0"
-    find-up "^4.1.0"
-    fs-extra "^8.1.0"
-    graceful-fs "^4.1.3"
-    prompts "^2.4.2"
-    semver "^7.5.2"
-
 "@react-native-community/cli@18.0.0":
   version "18.0.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli/-/cli-18.0.0.tgz#27d0160b7c0a44b1bcc0f45d736bbc6b7d2d5ca6"
@@ -4594,23 +4166,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-2.11.0.tgz#4587fbce6a382adedad74311e96ee10bb2b2d63a"
   integrity sha512-QuZU6gbxmOID5zZgd/H90NgBnbJ3VV6qVzp6c7/dDrmWdX8S0X5YFYgDcQFjE3dRen9wB9FWnj2VVdPU64adSg==
 
-"@react-native/assets-registry@0.73.1":
-  version "0.73.1"
-  resolved "https://registry.yarnpkg.com/@react-native/assets-registry/-/assets-registry-0.73.1.tgz#e2a6b73b16c183a270f338dc69c36039b3946e85"
-  integrity sha512-2FgAbU7uKM5SbbW9QptPPZx8N9Ke2L7bsHb+EhAanZjFZunA9PaYtyjUQ1s7HD+zDVqOQIvjkpXSv7Kejd2tqg==
-
 "@react-native/assets-registry@0.79.4":
   version "0.79.4"
   resolved "https://registry.yarnpkg.com/@react-native/assets-registry/-/assets-registry-0.79.4.tgz#6b1f6c843ae7b6e6e6804f897c182301c0f03d8c"
   integrity sha512-7PjHNRtYlc36B7P1PHme8ZV0ZJ/xsA/LvMoXe6EX++t7tSPJ8iYCMBryZhcdnztgce73b94Hfx6TTGbLF+xtUg==
 
-"@react-native/babel-plugin-codegen@0.73.4":
-  version "0.73.4"
-  resolved "https://registry.yarnpkg.com/@react-native/babel-plugin-codegen/-/babel-plugin-codegen-0.73.4.tgz#8a2037d5585b41877611498ae66adbf1dddfec1b"
-  integrity sha512-XzRd8MJGo4Zc5KsphDHBYJzS1ryOHg8I2gOZDAUCGcwLFhdyGu1zBNDJYH2GFyDrInn9TzAbRIf3d4O+eltXQQ==
-  dependencies:
-    "@react-native/codegen" "0.73.3"
-
 "@react-native/babel-plugin-codegen@0.76.9":
   version "0.76.9"
   resolved "https://registry.yarnpkg.com/@react-native/babel-plugin-codegen/-/babel-plugin-codegen-0.76.9.tgz#56c4bc21d08ea522e7266ffcec7d5a52e9092a0e"
@@ -4634,54 +4194,6 @@
     "@babel/traverse" "^7.25.3"
     "@react-native/codegen" "0.79.4"
 
-"@react-native/babel-preset@0.73.21":
-  version "0.73.21"
-  resolved "https://registry.yarnpkg.com/@react-native/babel-preset/-/babel-preset-0.73.21.tgz#174c16493fa4e311b2f5f0c58d4f3c6a5a68bbea"
-  integrity sha512-WlFttNnySKQMeujN09fRmrdWqh46QyJluM5jdtDNrkl/2Hx6N4XeDUGhABvConeK95OidVO7sFFf7sNebVXogA==
-  dependencies:
-    "@babel/core" "^7.20.0"
-    "@babel/plugin-proposal-async-generator-functions" "^7.0.0"
-    "@babel/plugin-proposal-class-properties" "^7.18.0"
-    "@babel/plugin-proposal-export-default-from" "^7.0.0"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.0"
-    "@babel/plugin-proposal-numeric-separator" "^7.0.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.20.0"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
-    "@babel/plugin-proposal-optional-chaining" "^7.20.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
-    "@babel/plugin-syntax-export-default-from" "^7.0.0"
-    "@babel/plugin-syntax-flow" "^7.18.0"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.0.0"
-    "@babel/plugin-syntax-optional-chaining" "^7.0.0"
-    "@babel/plugin-transform-arrow-functions" "^7.0.0"
-    "@babel/plugin-transform-async-to-generator" "^7.20.0"
-    "@babel/plugin-transform-block-scoping" "^7.0.0"
-    "@babel/plugin-transform-classes" "^7.0.0"
-    "@babel/plugin-transform-computed-properties" "^7.0.0"
-    "@babel/plugin-transform-destructuring" "^7.20.0"
-    "@babel/plugin-transform-flow-strip-types" "^7.20.0"
-    "@babel/plugin-transform-function-name" "^7.0.0"
-    "@babel/plugin-transform-literals" "^7.0.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.0.0"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.0.0"
-    "@babel/plugin-transform-parameters" "^7.0.0"
-    "@babel/plugin-transform-private-methods" "^7.22.5"
-    "@babel/plugin-transform-private-property-in-object" "^7.22.11"
-    "@babel/plugin-transform-react-display-name" "^7.0.0"
-    "@babel/plugin-transform-react-jsx" "^7.0.0"
-    "@babel/plugin-transform-react-jsx-self" "^7.0.0"
-    "@babel/plugin-transform-react-jsx-source" "^7.0.0"
-    "@babel/plugin-transform-runtime" "^7.0.0"
-    "@babel/plugin-transform-shorthand-properties" "^7.0.0"
-    "@babel/plugin-transform-spread" "^7.0.0"
-    "@babel/plugin-transform-sticky-regex" "^7.0.0"
-    "@babel/plugin-transform-typescript" "^7.5.0"
-    "@babel/plugin-transform-unicode-regex" "^7.0.0"
-    "@babel/template" "^7.0.0"
-    "@react-native/babel-plugin-codegen" "0.73.4"
-    babel-plugin-transform-flow-enums "^0.0.2"
-    react-refresh "^0.14.0"
-
 "@react-native/babel-preset@0.76.9":
   version "0.76.9"
   resolved "https://registry.yarnpkg.com/@react-native/babel-preset/-/babel-preset-0.76.9.tgz#08bc4198c67a0d07905dcc48cb4105b8d0f6ecd9"
@@ -4835,19 +4347,6 @@
     babel-plugin-transform-flow-enums "^0.0.2"
     react-refresh "^0.14.0"
 
-"@react-native/codegen@0.73.3":
-  version "0.73.3"
-  resolved "https://registry.yarnpkg.com/@react-native/codegen/-/codegen-0.73.3.tgz#cc984a8b17334d986cc600254a0d4b7fa7d68a94"
-  integrity sha512-sxslCAAb8kM06vGy9Jyh4TtvjhcP36k/rvj2QE2Jdhdm61KvfafCATSIsOfc0QvnduWFcpXUPvAVyYwuv7PYDg==
-  dependencies:
-    "@babel/parser" "^7.20.0"
-    flow-parser "^0.206.0"
-    glob "^7.1.1"
-    invariant "^2.2.4"
-    jscodeshift "^0.14.0"
-    mkdirp "^0.5.1"
-    nullthrows "^1.1.1"
-
 "@react-native/codegen@0.76.9":
   version "0.76.9"
   resolved "https://registry.yarnpkg.com/@react-native/codegen/-/codegen-0.76.9.tgz#b386fae4d893e5e7ffba19833c7d31a330a2f559"
@@ -4895,23 +4394,6 @@
     nullthrows "^1.1.1"
     yargs "^17.6.2"
 
-"@react-native/community-cli-plugin@0.73.17":
-  version "0.73.17"
-  resolved "https://registry.yarnpkg.com/@react-native/community-cli-plugin/-/community-cli-plugin-0.73.17.tgz#37b381a8b503a3296eaa6727e0c52ea8835add28"
-  integrity sha512-F3PXZkcHg+1ARIr6FRQCQiB7ZAA+MQXGmq051metRscoLvgYJwj7dgC8pvgy0kexzUkHu5BNKrZeySzUft3xuQ==
-  dependencies:
-    "@react-native-community/cli-server-api" "12.3.6"
-    "@react-native-community/cli-tools" "12.3.6"
-    "@react-native/dev-middleware" "0.73.8"
-    "@react-native/metro-babel-transformer" "0.73.15"
-    chalk "^4.0.0"
-    execa "^5.1.1"
-    metro "^0.80.3"
-    metro-config "^0.80.3"
-    metro-core "^0.80.3"
-    node-fetch "^2.2.0"
-    readline "^1.3.0"
-
 "@react-native/community-cli-plugin@0.79.4":
   version "0.79.4"
   resolved "https://registry.yarnpkg.com/@react-native/community-cli-plugin/-/community-cli-plugin-0.79.4.tgz#f6b0222107a227b512c2f9374c7aa75af26e2f1d"
@@ -4926,11 +4408,6 @@
     metro-core "^0.82.0"
     semver "^7.1.3"
 
-"@react-native/debugger-frontend@0.73.3":
-  version "0.73.3"
-  resolved "https://registry.yarnpkg.com/@react-native/debugger-frontend/-/debugger-frontend-0.73.3.tgz#033757614d2ada994c68a1deae78c1dd2ad33c2b"
-  integrity sha512-RgEKnWuoo54dh7gQhV7kvzKhXZEhpF9LlMdZolyhGxHsBqZ2gXdibfDlfcARFFifPIiaZ3lXuOVVa4ei+uPgTw==
-
 "@react-native/debugger-frontend@0.79.2":
   version "0.79.2"
   resolved "https://registry.yarnpkg.com/@react-native/debugger-frontend/-/debugger-frontend-0.79.2.tgz#1377de6d9cabe5455bf332e06408167da5f60c19"
@@ -4941,23 +4418,6 @@
   resolved "https://registry.yarnpkg.com/@react-native/debugger-frontend/-/debugger-frontend-0.79.4.tgz#d4c6f0d88ac0f646f8bd7fffaaa6c2dcdfddd008"
   integrity sha512-Gg4LhxHIK86Bi2RiT1rbFAB6fuwANRsaZJ1sFZ1OZEMQEx6stEnzaIrmfgzcv4z0bTQdQ8lzCrpsz0qtdaD4eA==
 
-"@react-native/dev-middleware@0.73.8":
-  version "0.73.8"
-  resolved "https://registry.yarnpkg.com/@react-native/dev-middleware/-/dev-middleware-0.73.8.tgz#2e43722a00c7b8db753f747f40267cbad6caba4d"
-  integrity sha512-oph4NamCIxkMfUL/fYtSsE+JbGOnrlawfQ0kKtDQ5xbOjPKotKoXqrs1eGwozNKv7FfQ393stk1by9a6DyASSg==
-  dependencies:
-    "@isaacs/ttlcache" "^1.4.1"
-    "@react-native/debugger-frontend" "0.73.3"
-    chrome-launcher "^0.15.2"
-    chromium-edge-launcher "^1.0.0"
-    connect "^3.6.5"
-    debug "^2.2.0"
-    node-fetch "^2.2.0"
-    open "^7.0.3"
-    serve-static "^1.13.1"
-    temp-dir "^2.0.0"
-    ws "^6.2.2"
-
 "@react-native/dev-middleware@0.79.2":
   version "0.79.2"
   resolved "https://registry.yarnpkg.com/@react-native/dev-middleware/-/dev-middleware-0.79.2.tgz#f09f1a75b4cd0b56dfd82a07bf41157a9c45619c"
@@ -4992,59 +4452,16 @@
     serve-static "^1.16.2"
     ws "^6.2.3"
 
-"@react-native/eslint-config@0.79.4":
-  version "0.79.4"
-  resolved "https://registry.yarnpkg.com/@react-native/eslint-config/-/eslint-config-0.79.4.tgz#f2ecac9de435b1fc493bed63c855201585913ecc"
-  integrity sha512-CPHskdEEV765O0M9jgSCeF2rcTrwJb/wyA8sUyT+EQWOX5oWsQzNKN4sWJHB/qAY/1D0sPxZk/YneqHPxnBIUw==
-  dependencies:
-    "@babel/core" "^7.25.2"
-    "@babel/eslint-parser" "^7.25.1"
-    "@react-native/eslint-plugin" "0.79.4"
-    "@typescript-eslint/eslint-plugin" "^7.1.1"
-    "@typescript-eslint/parser" "^7.1.1"
-    eslint-config-prettier "^8.5.0"
-    eslint-plugin-eslint-comments "^3.2.0"
-    eslint-plugin-ft-flow "^2.0.1"
-    eslint-plugin-jest "^27.9.0"
-    eslint-plugin-react "^7.30.1"
-    eslint-plugin-react-hooks "^4.6.0"
-    eslint-plugin-react-native "^4.0.0"
-
-"@react-native/eslint-plugin@0.79.4":
-  version "0.79.4"
-  resolved "https://registry.yarnpkg.com/@react-native/eslint-plugin/-/eslint-plugin-0.79.4.tgz#410743f52b825898c3eb569896fec487a1057b1e"
-  integrity sha512-vp2eJQmutSsqhiBda3j0OJ5jXd5KXX7fDcr/1EdOzWf2st+dvKl140Rxx/E85eQSx8RTo8OpAzSw+wnq307/zA==
-
-"@react-native/gradle-plugin@0.73.4":
-  version "0.73.4"
-  resolved "https://registry.yarnpkg.com/@react-native/gradle-plugin/-/gradle-plugin-0.73.4.tgz#aa55784a8c2b471aa89934db38c090d331baf23b"
-  integrity sha512-PMDnbsZa+tD55Ug+W8CfqXiGoGneSSyrBZCMb5JfiB3AFST3Uj5e6lw8SgI/B6SKZF7lG0BhZ6YHZsRZ5MlXmg==
-
 "@react-native/gradle-plugin@0.79.4":
   version "0.79.4"
   resolved "https://registry.yarnpkg.com/@react-native/gradle-plugin/-/gradle-plugin-0.79.4.tgz#487d5dfc19411caf60cf1365c38bacd809407d69"
   integrity sha512-Gv5ryy23k7Sib2xVgqw65GTryg9YTij6URcMul5cI7LRcW0Aa1/FPb26l388P4oeNGNdDoAkkS+CuCWNunRuWg==
 
-"@react-native/js-polyfills@0.73.1":
-  version "0.73.1"
-  resolved "https://registry.yarnpkg.com/@react-native/js-polyfills/-/js-polyfills-0.73.1.tgz#730b0a7aaab947ae6f8e5aa9d995e788977191ed"
-  integrity sha512-ewMwGcumrilnF87H4jjrnvGZEaPFCAC4ebraEK+CurDDmwST/bIicI4hrOAv+0Z0F7DEK4O4H7r8q9vH7IbN4g==
-
 "@react-native/js-polyfills@0.79.4":
   version "0.79.4"
   resolved "https://registry.yarnpkg.com/@react-native/js-polyfills/-/js-polyfills-0.79.4.tgz#bec8d29b2c0e283b7fe0a78180839889455f970b"
   integrity sha512-VyKPo/l9zP4+oXpQHrJq4vNOtxF7F5IMdQmceNzTnRpybRvGGgO/9jYu9mdmdKRO2KpQEc5dB4W2rYhVKdGNKg==
 
-"@react-native/metro-babel-transformer@0.73.15":
-  version "0.73.15"
-  resolved "https://registry.yarnpkg.com/@react-native/metro-babel-transformer/-/metro-babel-transformer-0.73.15.tgz#c516584dde62d65a46668074084359c03e6a50f1"
-  integrity sha512-LlkSGaXCz+xdxc9819plmpsl4P4gZndoFtpjN3GMBIu6f7TBV0GVbyJAU4GE8fuAWPVSVL5ArOcdkWKSbI1klw==
-  dependencies:
-    "@babel/core" "^7.20.0"
-    "@react-native/babel-preset" "0.73.21"
-    hermes-parser "0.15.0"
-    nullthrows "^1.1.1"
-
 "@react-native/metro-babel-transformer@0.79.4":
   version "0.79.4"
   resolved "https://registry.yarnpkg.com/@react-native/metro-babel-transformer/-/metro-babel-transformer-0.79.4.tgz#8c33b5b367979dc1504c09ba54f0a863a8530573"
@@ -5070,11 +4487,6 @@
   resolved "https://registry.yarnpkg.com/@react-native/normalize-color/-/normalize-color-2.1.0.tgz#939b87a9849e81687d3640c5efa2a486ac266f91"
   integrity sha512-Z1jQI2NpdFJCVgpY+8Dq/Bt3d+YUi1928Q+/CZm/oh66fzM0RUl54vvuXlPJKybH4pdCZey1eDTPaLHkMPNgWA==
 
-"@react-native/normalize-colors@0.73.2", "@react-native/normalize-colors@^0.73.0":
-  version "0.73.2"
-  resolved "https://registry.yarnpkg.com/@react-native/normalize-colors/-/normalize-colors-0.73.2.tgz#cc8e48fbae2bbfff53e12f209369e8d2e4cf34ec"
-  integrity sha512-bRBcb2T+I88aG74LMVHaKms2p/T8aQd8+BZ7LuuzXlRfog1bMWWn/C5i0HVuvW4RPtXQYgIlGiXVDy9Ir1So/w==
-
 "@react-native/normalize-colors@0.79.2":
   version "0.79.2"
   resolved "https://registry.yarnpkg.com/@react-native/normalize-colors/-/normalize-colors-0.79.2.tgz#9ab70ca257c7411e4ab74cf7f91332c27d39cc6f"
@@ -5090,14 +4502,6 @@
   resolved "https://registry.yarnpkg.com/@react-native/typescript-config/-/typescript-config-0.79.4.tgz#726b05391455dc59b966b26d7d2a264a11893764"
   integrity sha512-sgtWypxWibkc+J8MDQ8qxfJadzVo9CEAbLBFGwqsmzwe5n/mu3qEIpi1hIGqUuNrPYe2yfUauDx1Yn0UNdI8EA==
 
-"@react-native/virtualized-lists@0.73.4":
-  version "0.73.4"
-  resolved "https://registry.yarnpkg.com/@react-native/virtualized-lists/-/virtualized-lists-0.73.4.tgz#640e594775806f63685435b5d9c3d05c378ccd8c"
-  integrity sha512-HpmLg1FrEiDtrtAbXiwCgXFYyloK/dOIPIuWW3fsqukwJEWAiTzm1nXGJ7xPU5XTHiWZ4sKup5Ebaj8z7iyWog==
-  dependencies:
-    invariant "^2.2.4"
-    nullthrows "^1.1.1"
-
 "@react-native/virtualized-lists@0.79.4":
   version "0.79.4"
   resolved "https://registry.yarnpkg.com/@react-native/virtualized-lists/-/virtualized-lists-0.79.4.tgz#a530e2ee00c86a5364bee67145b163be8413d5db"
@@ -5222,8 +4626,8 @@
     tldts "~5.7.112"
 
 "@rocket.chat/mobile-crypto@RocketChat/rocket.chat-mobile-crypto":
-  version "0.2.1"
-  resolved "https://codeload.github.com/RocketChat/rocket.chat-mobile-crypto/tar.gz/b75e261282bc0c25a3b8fde3230d1c1e01809e00"
+  version "0.2.2"
+  resolved "https://codeload.github.com/RocketChat/rocket.chat-mobile-crypto/tar.gz/57deaffbcda0453c34987efb81d722da7e7a4f9e"
 
 "@rocket.chat/sdk@RocketChat/Rocket.Chat.js.SDK#mobile":
   version "1.3.3-mobile"
@@ -5235,10 +4639,22 @@
     tiny-events "^1.0.1"
     universal-websocket-client "^1.0.2"
 
-"@rocket.chat/ui-kit@0.31.19":
-  version "0.31.19"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/ui-kit/-/ui-kit-0.31.19.tgz#737103123bc7e635382217eef75965b7e0f44703"
-  integrity sha512-8zRKQ5CoC4hIuYHVheO0d7etX9oizmM18fu99r5s/deciL/0MRWocdb4H/QsmbsNrkKCO6Z6wr7f9zzJCNTRHg==
+"@rocket.chat/ui-kit@^0.39.0":
+  version "0.39.0"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/ui-kit/-/ui-kit-0.39.0.tgz#6eb656224201cb36b089a2c24da3fc6b35a07d96"
+  integrity sha512-kdzZsR74DsUNpBQEKyhV8z0jaRsPe4u/VgR9tqHfevP4gQ/dx1GeDtl/LHkw/BADmqTn7nZpwEaelECKhtBNyQ==
+  dependencies:
+    typia "~9.7.2"
+
+"@rtsao/scc@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
+  integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==
+
+"@samchon/openapi@^4.7.1":
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/@samchon/openapi/-/openapi-4.7.2.tgz#b00c54b587b22e03e454ff58989c4a63144850b3"
+  integrity sha512-yj6kGWHtKK85wfJXrSmWqLWjfCd98SAvCTsVDlej2s7OfXXHqA4hmgPRNrAPIQRVi00xn26qL1PChjq1MhzlRQ==
 
 "@sideway/address@^4.1.5":
   version "4.1.5"
@@ -5276,6 +4692,11 @@
   dependencies:
     "@sinonjs/commons" "^3.0.0"
 
+"@standard-schema/spec@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@standard-schema/spec/-/spec-1.1.0.tgz#a79b55dbaf8604812f52d140b2c9ab41bc150bb8"
+  integrity sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==
+
 "@storybook/global@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@storybook/global/-/global-5.0.0.tgz#b793d34b94f572c1d7d9e0f44fac4e0dbc9572ed"
@@ -5533,11 +4954,6 @@
     "@types/tough-cookie" "*"
     parse5 "^7.0.0"
 
-"@types/json-schema@^7.0.12":
-  version "7.0.15"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
-  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
-
 "@types/json-schema@^7.0.9":
   version "7.0.11"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
@@ -5602,14 +5018,6 @@
   resolved "https://registry.yarnpkg.com/@types/react-native-config-reader/-/react-native-config-reader-4.1.3.tgz#fe6566b8e2a54c1ec962da946674f6fc763ce8fb"
   integrity sha512-AjBqk0MQKnuQRdyMD3mcBNVwxSlf30HWqzMOTjOYj4JGCSTijv+8JKUokOOicpRxcpQdaHu3umFHL6oat9vRJA==
 
-"@types/react-native-platform-touchable@^1.1.6":
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/@types/react-native-platform-touchable/-/react-native-platform-touchable-1.1.6.tgz#39244b487cf93afe0cc6aeda692c4e1099169d2c"
-  integrity sha512-Cci9GPL+s56AcyskL259e/kJHM2AUOwcDNST+xS1Mg8iXIT6/DrWTvHGenQVhUJcCPDIGKieyhNkMt7k5u6C1g==
-  dependencies:
-    "@types/react" "*"
-    react-native "*"
-
 "@types/react@*":
   version "18.2.66"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.66.tgz#d2eafc8c4e70939c5432221adb23d32d76bfe451"
@@ -5645,11 +5053,6 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.13.tgz#da4bfd73f49bd541d28920ab0e2bf0ee80f71c91"
   integrity sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==
 
-"@types/semver@^7.5.0":
-  version "7.5.8"
-  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
-  integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
-
 "@types/stack-utils@^2.0.0":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.3.tgz#6209321eb2c1712a7e7466422b8cb1fc0d9dd5d8"
@@ -5699,7 +5102,7 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@^7.1.1":
+"@typescript-eslint/eslint-plugin@~7.18.0":
   version "7.18.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.18.0.tgz#b16d3cf3ee76bf572fdf511e79c248bdec619ea3"
   integrity sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==
@@ -5714,24 +5117,7 @@
     natural-compare "^1.4.0"
     ts-api-utils "^1.3.0"
 
-"@typescript-eslint/eslint-plugin@^7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.4.0.tgz#de61c3083842fc6ac889d2fc83c9a96b55ab8328"
-  integrity sha512-yHMQ/oFaM7HZdVrVm/M2WHaNPgyuJH4WelkSVEWSSsir34kxW2kDJCxlXRhhGWEsMN0WAW/vLpKfKVcm8k+MPw==
-  dependencies:
-    "@eslint-community/regexpp" "^4.5.1"
-    "@typescript-eslint/scope-manager" "7.4.0"
-    "@typescript-eslint/type-utils" "7.4.0"
-    "@typescript-eslint/utils" "7.4.0"
-    "@typescript-eslint/visitor-keys" "7.4.0"
-    debug "^4.3.4"
-    graphemer "^1.4.0"
-    ignore "^5.2.4"
-    natural-compare "^1.4.0"
-    semver "^7.5.4"
-    ts-api-utils "^1.0.1"
-
-"@typescript-eslint/parser@^7.1.1":
+"@typescript-eslint/parser@~7.18.0":
   version "7.18.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.18.0.tgz#83928d0f1b7f4afa974098c64b5ce6f9051f96a0"
   integrity sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==
@@ -5742,24 +5128,14 @@
     "@typescript-eslint/visitor-keys" "7.18.0"
     debug "^4.3.4"
 
-"@typescript-eslint/parser@^7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.4.0.tgz#540f4321de1e52b886c0fa68628af1459954c1f1"
-  integrity sha512-ZvKHxHLusweEUVwrGRXXUVzFgnWhigo4JurEj0dGF1tbcGh6buL+ejDdjxOQxv6ytcY1uhun1p2sm8iWStlgLQ==
-  dependencies:
-    "@typescript-eslint/scope-manager" "7.4.0"
-    "@typescript-eslint/types" "7.4.0"
-    "@typescript-eslint/typescript-estree" "7.4.0"
-    "@typescript-eslint/visitor-keys" "7.4.0"
-    debug "^4.3.4"
-
-"@typescript-eslint/scope-manager@5.27.1":
-  version "5.27.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.27.1.tgz#4d1504392d01fe5f76f4a5825991ec78b7b7894d"
-  integrity sha512-fQEOSa/QroWE6fAEg+bJxtRZJTH8NTskggybogHt4H9Da8zd4cJji76gA5SBlR0MgtwF7rebxTbDKB49YUCpAg==
+"@typescript-eslint/project-service@8.55.0":
+  version "8.55.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/project-service/-/project-service-8.55.0.tgz#b8a71c06a625bdad481c24d5614b68e252f3ae9b"
+  integrity sha512-zRcVVPFUYWa3kNnjaZGXSu3xkKV1zXy8M4nO/pElzQhFweb7PPtluDLQtKArEOGmjXoRjnUZ29NjOiF0eCDkcQ==
   dependencies:
-    "@typescript-eslint/types" "5.27.1"
-    "@typescript-eslint/visitor-keys" "5.27.1"
+    "@typescript-eslint/tsconfig-utils" "^8.55.0"
+    "@typescript-eslint/types" "^8.55.0"
+    debug "^4.4.3"
 
 "@typescript-eslint/scope-manager@7.18.0":
   version "7.18.0"
@@ -5769,13 +5145,18 @@
     "@typescript-eslint/types" "7.18.0"
     "@typescript-eslint/visitor-keys" "7.18.0"
 
-"@typescript-eslint/scope-manager@7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.4.0.tgz#acfc69261f10ece7bf7ece1734f1713392c3655f"
-  integrity sha512-68VqENG5HK27ypafqLVs8qO+RkNc7TezCduYrx8YJpXq2QGZ30vmNZGJJJC48+MVn4G2dCV8m5ZTVnzRexTVtw==
+"@typescript-eslint/scope-manager@8.55.0":
+  version "8.55.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.55.0.tgz#8a0752c31c788651840dc98f840b0c2ebe143b8c"
+  integrity sha512-fVu5Omrd3jeqeQLiB9f1YsuK/iHFOwb04bCtY4BSCLgjNbOD33ZdV6KyEqplHr+IlpgT0QTZ/iJ+wT7hvTx49Q==
   dependencies:
-    "@typescript-eslint/types" "7.4.0"
-    "@typescript-eslint/visitor-keys" "7.4.0"
+    "@typescript-eslint/types" "8.55.0"
+    "@typescript-eslint/visitor-keys" "8.55.0"
+
+"@typescript-eslint/tsconfig-utils@8.55.0", "@typescript-eslint/tsconfig-utils@^8.55.0":
+  version "8.55.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.55.0.tgz#62f1d005419985e09d37a040b2f1450e4e805afa"
+  integrity sha512-1R9cXqY7RQd7WuqSN47PK9EDpgFUK3VqdmbYrvWJZYDd0cavROGn+74ktWBlmJ13NXUQKlZ/iAEQHI/V0kKe0Q==
 
 "@typescript-eslint/type-utils@7.18.0":
   version "7.18.0"
@@ -5787,43 +5168,15 @@
     debug "^4.3.4"
     ts-api-utils "^1.3.0"
 
-"@typescript-eslint/type-utils@7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.4.0.tgz#cfcaab21bcca441c57da5d3a1153555e39028cbd"
-  integrity sha512-247ETeHgr9WTRMqHbbQdzwzhuyaJ8dPTuyuUEMANqzMRB1rj/9qFIuIXK7l0FX9i9FXbHeBQl/4uz6mYuCE7Aw==
-  dependencies:
-    "@typescript-eslint/typescript-estree" "7.4.0"
-    "@typescript-eslint/utils" "7.4.0"
-    debug "^4.3.4"
-    ts-api-utils "^1.0.1"
-
-"@typescript-eslint/types@5.27.1":
-  version "5.27.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.27.1.tgz#34e3e629501349d38be6ae97841298c03a6ffbf1"
-  integrity sha512-LgogNVkBhCTZU/m8XgEYIWICD6m4dmEDbKXESCbqOXfKZxRKeqpiJXQIErv66sdopRKZPo5l32ymNqibYEH/xg==
-
 "@typescript-eslint/types@7.18.0":
   version "7.18.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.18.0.tgz#b90a57ccdea71797ffffa0321e744f379ec838c9"
   integrity sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==
 
-"@typescript-eslint/types@7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.4.0.tgz#ee9dafa75c99eaee49de6dcc9348b45d354419b6"
-  integrity sha512-mjQopsbffzJskos5B4HmbsadSJQWaRK0UxqQ7GuNA9Ga4bEKeiO6b2DnB6cM6bpc8lemaPseh0H9B/wyg+J7rw==
-
-"@typescript-eslint/typescript-estree@5.27.1":
-  version "5.27.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.27.1.tgz#7621ee78607331821c16fffc21fc7a452d7bc808"
-  integrity sha512-DnZvvq3TAJ5ke+hk0LklvxwYsnXpRdqUY5gaVS0D4raKtbznPz71UJGnPTHEFo0GDxqLOLdMkkmVZjSpET1hFw==
-  dependencies:
-    "@typescript-eslint/types" "5.27.1"
-    "@typescript-eslint/visitor-keys" "5.27.1"
-    debug "^4.3.4"
-    globby "^11.1.0"
-    is-glob "^4.0.3"
-    semver "^7.3.7"
-    tsutils "^3.21.0"
+"@typescript-eslint/types@8.55.0", "@typescript-eslint/types@^8.55.0":
+  version "8.55.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.55.0.tgz#8449c5a7adac61184cac92dbf6315733569708c2"
+  integrity sha512-ujT0Je8GI5BJWi+/mMoR0wxwVEQaxM+pi30xuMiJETlX80OPovb2p9E8ss87gnSVtYXtJoU9U1Cowcr6w2FE0w==
 
 "@typescript-eslint/typescript-estree@7.18.0":
   version "7.18.0"
@@ -5839,19 +5192,20 @@
     semver "^7.6.0"
     ts-api-utils "^1.3.0"
 
-"@typescript-eslint/typescript-estree@7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.4.0.tgz#12dbcb4624d952f72c10a9f4431284fca24624f4"
-  integrity sha512-A99j5AYoME/UBQ1ucEbbMEmGkN7SE0BvZFreSnTd1luq7yulcHdyGamZKizU7canpGDWGJ+Q6ZA9SyQobipePg==
+"@typescript-eslint/typescript-estree@8.55.0":
+  version "8.55.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.55.0.tgz#c83ac92c11ce79bedd984937c7780a65e7f7b2e3"
+  integrity sha512-EwrH67bSWdx/3aRQhCoxDaHM+CrZjotc2UCCpEDVqfCE+7OjKAGWNY2HsCSTEVvWH2clYQK8pdeLp42EVs+xQw==
   dependencies:
-    "@typescript-eslint/types" "7.4.0"
-    "@typescript-eslint/visitor-keys" "7.4.0"
-    debug "^4.3.4"
-    globby "^11.1.0"
-    is-glob "^4.0.3"
-    minimatch "9.0.3"
-    semver "^7.5.4"
-    ts-api-utils "^1.0.1"
+    "@typescript-eslint/project-service" "8.55.0"
+    "@typescript-eslint/tsconfig-utils" "8.55.0"
+    "@typescript-eslint/types" "8.55.0"
+    "@typescript-eslint/visitor-keys" "8.55.0"
+    debug "^4.4.3"
+    minimatch "^9.0.5"
+    semver "^7.7.3"
+    tinyglobby "^0.2.15"
+    ts-api-utils "^2.4.0"
 
 "@typescript-eslint/utils@7.18.0":
   version "7.18.0"
@@ -5863,38 +5217,15 @@
     "@typescript-eslint/types" "7.18.0"
     "@typescript-eslint/typescript-estree" "7.18.0"
 
-"@typescript-eslint/utils@7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.4.0.tgz#d889a0630cab88bddedaf7c845c64a00576257bd"
-  integrity sha512-NQt9QLM4Tt8qrlBVY9lkMYzfYtNz8/6qwZg8pI3cMGlPnj6mOpRxxAm7BMJN9K0AiY+1BwJ5lVC650YJqYOuNg==
-  dependencies:
-    "@eslint-community/eslint-utils" "^4.4.0"
-    "@types/json-schema" "^7.0.12"
-    "@types/semver" "^7.5.0"
-    "@typescript-eslint/scope-manager" "7.4.0"
-    "@typescript-eslint/types" "7.4.0"
-    "@typescript-eslint/typescript-estree" "7.4.0"
-    semver "^7.5.4"
-
-"@typescript-eslint/utils@^5.10.0":
-  version "5.27.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.27.1.tgz#b4678b68a94bc3b85bf08f243812a6868ac5128f"
-  integrity sha512-mZ9WEn1ZLDaVrhRaYgzbkXBkTPghPFsup8zDbbsYTxC5OmqrFE7skkKS/sraVsLP3TcT3Ki5CSyEFBRkLH/H/w==
+"@typescript-eslint/utils@^8.0.0":
+  version "8.55.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.55.0.tgz#c1744d94a3901deb01f58b09d3478d811f96d619"
+  integrity sha512-BqZEsnPGdYpgyEIkDC1BadNY8oMwckftxBT+C8W0g1iKPdeqKZBtTfnvcq0nf60u7MkjFO8RBvpRGZBPw4L2ow==
   dependencies:
-    "@types/json-schema" "^7.0.9"
-    "@typescript-eslint/scope-manager" "5.27.1"
-    "@typescript-eslint/types" "5.27.1"
-    "@typescript-eslint/typescript-estree" "5.27.1"
-    eslint-scope "^5.1.1"
-    eslint-utils "^3.0.0"
-
-"@typescript-eslint/visitor-keys@5.27.1":
-  version "5.27.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.27.1.tgz#05a62666f2a89769dac2e6baa48f74e8472983af"
-  integrity sha512-xYs6ffo01nhdJgPieyk7HAOpjhTsx7r/oB9LWEhwAXgwn33tkr+W8DI2ChboqhZlC4q3TC6geDYPoiX8ROqyOQ==
-  dependencies:
-    "@typescript-eslint/types" "5.27.1"
-    eslint-visitor-keys "^3.3.0"
+    "@eslint-community/eslint-utils" "^4.9.1"
+    "@typescript-eslint/scope-manager" "8.55.0"
+    "@typescript-eslint/types" "8.55.0"
+    "@typescript-eslint/typescript-estree" "8.55.0"
 
 "@typescript-eslint/visitor-keys@7.18.0":
   version "7.18.0"
@@ -5904,13 +5235,13 @@
     "@typescript-eslint/types" "7.18.0"
     eslint-visitor-keys "^3.4.3"
 
-"@typescript-eslint/visitor-keys@7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.4.0.tgz#0c8ff2c1f8a6fe8d7d1a57ebbd4a638e86a60a94"
-  integrity sha512-0zkC7YM0iX5Y41homUUeW1CHtZR01K3ybjM1l6QczoMuay0XKtrb93kv95AxUGwdjGr64nNqnOCwmEl616N8CA==
+"@typescript-eslint/visitor-keys@8.55.0":
+  version "8.55.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.55.0.tgz#3d9a40fd4e3705c63d8fae3af58988add3ed464d"
+  integrity sha512-AxNRwEie8Nn4eFS1FzDMJWIISMGoXMb037sgCBJ3UR6o0fQTzr2tqN9WT+DkWJPhIdQCfV7T6D387566VtnCJA==
   dependencies:
-    "@typescript-eslint/types" "7.4.0"
-    eslint-visitor-keys "^3.4.1"
+    "@typescript-eslint/types" "8.55.0"
+    eslint-visitor-keys "^4.2.1"
 
 "@ungap/structured-clone@^1.2.0":
   version "1.2.0"
@@ -6290,13 +5621,6 @@ aria-query@^5.0.0:
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.2.tgz#93f81a43480e33a338f19163a3d10a50c01dcd59"
   integrity sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==
 
-aria-query@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
-  integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
-  dependencies:
-    dequal "^2.0.3"
-
 array-back@^3.0.1, array-back@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/array-back/-/array-back-3.1.0.tgz#b8859d7a508871c9a7b2cf42f99428f65e96bfb0"
@@ -6315,7 +5639,15 @@ array-buffer-byte-length@^1.0.1:
     call-bind "^1.0.5"
     is-array-buffer "^3.0.4"
 
-array-includes@^3.1.4, array-includes@^3.1.6, array-includes@^3.1.7:
+array-buffer-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz#384d12a37295aec3769ab022ad323a18a51ccf8b"
+  integrity sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==
+  dependencies:
+    call-bound "^1.0.3"
+    is-array-buffer "^3.0.5"
+
+array-includes@^3.1.4, array-includes@^3.1.7:
   version "3.1.8"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.8.tgz#5e370cbe172fdd5dd6530c1d4aadda25281ba97d"
   integrity sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==
@@ -6327,20 +5659,40 @@ array-includes@^3.1.4, array-includes@^3.1.6, array-includes@^3.1.7:
     get-intrinsic "^1.2.4"
     is-string "^1.0.7"
 
+array-includes@^3.1.8, array-includes@^3.1.9:
+  version "3.1.9"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.9.tgz#1f0ccaa08e90cdbc3eb433210f903ad0f17c3f3a"
+  integrity sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.4"
+    define-properties "^1.2.1"
+    es-abstract "^1.24.0"
+    es-object-atoms "^1.1.1"
+    get-intrinsic "^1.3.0"
+    is-string "^1.1.1"
+    math-intrinsics "^1.1.0"
+
+array-timsort@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-timsort/-/array-timsort-1.0.3.tgz#3c9e4199e54fb2b9c3fe5976396a21614ef0d926"
+  integrity sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ==
+
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
-array.prototype.findlast@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/array.prototype.findlast/-/array.prototype.findlast-1.2.4.tgz#eeb9e45fc894055c82e5675c463e8077b827ad36"
-  integrity sha512-BMtLxpV+8BD+6ZPFIWmnUBpQoy+A+ujcg4rhp2iwCRJYA7PEh2MS4NL3lz8EiDlLrJPp2hg9qWihr5pd//jcGw==
+array.prototype.findlast@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz#3e4fbcb30a15a7f5bf64cf2faae22d139c2e4904"
+  integrity sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==
   dependencies:
-    call-bind "^1.0.5"
+    call-bind "^1.0.7"
     define-properties "^1.2.1"
-    es-abstract "^1.22.3"
+    es-abstract "^1.23.2"
     es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
     es-shim-unscopables "^1.0.2"
 
 array.prototype.findlastindex@^1.2.3:
@@ -6354,7 +5706,20 @@ array.prototype.findlastindex@^1.2.3:
     es-errors "^1.3.0"
     es-shim-unscopables "^1.0.2"
 
-array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
+array.prototype.findlastindex@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz#cfa1065c81dcb64e34557c9b81d012f6a421c564"
+  integrity sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.4"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.9"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.1.1"
+    es-shim-unscopables "^1.1.0"
+
+array.prototype.flat@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18"
   integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==
@@ -6364,6 +5729,16 @@ array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
     es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
 
+array.prototype.flat@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz#534aaf9e6e8dd79fb6b9a9917f839ef1ec63afe5"
+  integrity sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-shim-unscopables "^1.0.2"
+
 array.prototype.flatmap@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz#c9a7c6831db8e719d6ce639190146c24bbd3e527"
@@ -6374,25 +5749,25 @@ array.prototype.flatmap@^1.3.2:
     es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
 
-array.prototype.toreversed@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/array.prototype.toreversed/-/array.prototype.toreversed-1.1.2.tgz#b989a6bf35c4c5051e1dc0325151bf8088954eba"
-  integrity sha512-wwDCoT4Ck4Cz7sLtgUmzR5UV3YF5mFHUlbChCzZBQZ+0m2cl/DH3tKgvphv1nKgFsJ48oCSg6p91q2Vm0I/ZMA==
+array.prototype.flatmap@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz#712cc792ae70370ae40586264629e33aab5dd38b"
+  integrity sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
-    es-shim-unscopables "^1.0.0"
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-shim-unscopables "^1.0.2"
 
-array.prototype.tosorted@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.3.tgz#c8c89348337e51b8a3c48a9227f9ce93ceedcba8"
-  integrity sha512-/DdH4TiTmOKzyQbp/eadcCVexiCb36xJg7HshYOYJnNZFDj33GEv0P7GxsynpShhq4OLYJzbGcBDkLsDt7MnNg==
+array.prototype.tosorted@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz#fe954678ff53034e717ea3352a03f0b0b86f7ffc"
+  integrity sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==
   dependencies:
-    call-bind "^1.0.5"
+    call-bind "^1.0.7"
     define-properties "^1.2.1"
-    es-abstract "^1.22.3"
-    es-errors "^1.1.0"
+    es-abstract "^1.23.3"
+    es-errors "^1.3.0"
     es-shim-unscopables "^1.0.2"
 
 arraybuffer.prototype.slice@^1.0.3:
@@ -6409,6 +5784,19 @@ arraybuffer.prototype.slice@^1.0.3:
     is-array-buffer "^3.0.4"
     is-shared-array-buffer "^1.0.2"
 
+arraybuffer.prototype.slice@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz#9d760d84dbdd06d0cbf92c8849615a1a7ab3183c"
+  integrity sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    is-array-buffer "^3.0.4"
+
 asap@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
@@ -6430,11 +5818,6 @@ assertion-error@^2.0.1:
   resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-2.0.1.tgz#f641a196b335690b1070bf00b6e7593fec190bf7"
   integrity sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==
 
-ast-types-flow@^0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.8.tgz#0a85e1c92695769ac13a428bb653e7538bea27d6"
-  integrity sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==
-
 ast-types@0.15.2:
   version "0.15.2"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.15.2.tgz#39ae4809393c4b16df751ee563411423e85fb49d"
@@ -6459,13 +5842,6 @@ async-limiter@~1.0.0:
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 
-asynciterator.prototype@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/asynciterator.prototype/-/asynciterator.prototype-1.0.0.tgz#8c5df0514936cdd133604dfcc9d3fb93f09b2b62"
-  integrity sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==
-  dependencies:
-    has-symbols "^1.0.3"
-
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -6478,11 +5854,6 @@ available-typed-arrays@^1.0.7:
   dependencies:
     possible-typed-array-names "^1.0.0"
 
-axe-core@=4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.0.tgz#34ba5a48a8b564f67e103f0aa5768d76e15bbbbf"
-  integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
-
 axios@~0.28.1:
   version "0.28.1"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.28.1.tgz#2a7bcd34a3837b71ee1a5ca3762214b86b703e70"
@@ -6492,13 +5863,6 @@ axios@~0.28.1:
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
-axobject-query@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.2.1.tgz#39c378a6e3b06ca679f29138151e45b2b32da62a"
-  integrity sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==
-  dependencies:
-    dequal "^2.0.3"
-
 b4a@^1.6.4:
   version "1.6.6"
   resolved "https://registry.yarnpkg.com/b4a/-/b4a-1.6.6.tgz#a4cc349a3851987c3c4ac2d7785c18744f6da9ba"
@@ -6560,7 +5924,7 @@ babel-plugin-macros@^3.1.0:
     cosmiconfig "^7.0.0"
     resolve "^1.19.0"
 
-babel-plugin-polyfill-corejs2@^0.4.10, babel-plugin-polyfill-corejs2@^0.4.8:
+babel-plugin-polyfill-corejs2@^0.4.10:
   version "0.4.10"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.10.tgz#276f41710b03a64f6467433cab72cbc2653c38b1"
   integrity sha512-rpIuu//y5OX6jVU+a5BCn1R5RSZYWAl2Nar76iwaOdycqb6JPxediskWFMMl7stfwNJR4b7eiQvh5fB5TEQJTQ==
@@ -6585,21 +5949,6 @@ babel-plugin-polyfill-corejs3@^0.11.0:
     "@babel/helper-define-polyfill-provider" "^0.6.3"
     core-js-compat "^3.40.0"
 
-babel-plugin-polyfill-corejs3@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.9.0.tgz#9eea32349d94556c2ad3ab9b82ebb27d4bf04a81"
-  integrity sha512-7nZPG1uzK2Ymhy/NbaOWTg3uibM2BmGASS4vHS4szRZAIR8R6GwA/xAujpdrXU5iyklrimWnLWU+BLF9suPTqg==
-  dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.5.0"
-    core-js-compat "^3.34.0"
-
-babel-plugin-polyfill-regenerator@^0.5.5:
-  version "0.5.5"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.5.tgz#8b0c8fc6434239e5d7b8a9d1f832bb2b0310f06a"
-  integrity sha512-OJGYZlhLqBh2DDHeqAxWB1XIvr49CxiJ2gIt61/PU55CQK4Z58OzMqjDe1zwQdQk+rBYsRc+1rJmdajM3gimHg==
-  dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.5.0"
-
 babel-plugin-polyfill-regenerator@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.1.tgz#4f08ef4c62c7a7f66a35ed4c0d75e30506acc6be"
@@ -6840,7 +6189,7 @@ braces@^3.0.3:
   dependencies:
     fill-range "^7.1.1"
 
-browserslist@^4.22.2, browserslist@^4.22.3:
+browserslist@^4.22.2:
   version "4.23.0"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.0.tgz#8f3acc2bbe73af7213399430890f86c63a5674ab"
   integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==
@@ -7022,7 +6371,7 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
+chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -7040,6 +6389,11 @@ char-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-2.0.1.tgz#6dafdb25f9d3349914079f010ba8d0e6ff9cd01e"
   integrity sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==
 
+chardet@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-2.1.1.tgz#5c75593704a642f71ee53717df234031e65373c8"
+  integrity sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==
+
 check-error@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-2.1.1.tgz#87eb876ae71ee388fa0471fe423f494be1d96ccc"
@@ -7077,18 +6431,6 @@ chromium-edge-launcher@^0.2.0:
     mkdirp "^1.0.4"
     rimraf "^3.0.2"
 
-chromium-edge-launcher@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/chromium-edge-launcher/-/chromium-edge-launcher-1.0.0.tgz#0443083074715a13c669530b35df7bfea33b1509"
-  integrity sha512-pgtgjNKZ7i5U++1g1PWv75umkHvhVTDOQIZ+sjeUX9483S7Y6MUvO0lrd7ShGlQlFHMN4SwKTCq/X8hWrbv2KA==
-  dependencies:
-    "@types/node" "*"
-    escape-string-regexp "^4.0.0"
-    is-wsl "^2.2.0"
-    lighthouse-logger "^1.0.0"
-    mkdirp "^1.0.4"
-    rimraf "^3.0.2"
-
 ci-info@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
@@ -7123,6 +6465,11 @@ cli-spinners@^2.0.0, cli-spinners@^2.5.0:
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.9.2.tgz#1773a8f4b9c4d6ac31563df53b3fc1d79462fe41"
   integrity sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==
 
+cli-width@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
+  integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
+
 cliui@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
@@ -7257,6 +6604,11 @@ commander@9.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-9.2.0.tgz#6e21014b2ed90d8b7c9647230d8b7a94a4a419a9"
   integrity sha512-e2i4wANQiSXgnrBlIatyHtP1odfUp0BbV5Y5nEGbxtIrStkEOAAzCUirvLBNXHLr7kwLvJl6V+4V3XV9x7Wd9w==
 
+commander@^10.0.0:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
+  integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
+
 commander@^12.0.0:
   version "12.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-12.1.0.tgz#01423b36f501259fdaac4d0e4d60c96c991585d3"
@@ -7292,6 +6644,14 @@ commander@^9.4.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
   integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
 
+comment-json@^4.2.3:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/comment-json/-/comment-json-4.6.2.tgz#235d8a908e211855b0068248a794afddb87670af"
+  integrity sha512-R2rze/hDX30uul4NZoIZ76ImSJLFxn/1/ZxtKC1L77y2X1k+yYu1joKbAtMA2Fg3hZrTOiw0I5mwVMo0cf250w==
+  dependencies:
+    array-timsort "^1.0.3"
+    esprima "^4.0.1"
+
 common-path-prefix@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/common-path-prefix/-/common-path-prefix-3.0.0.tgz#7d007a7e07c58c4b4d5f433131a19141b29f11e0"
@@ -7375,13 +6735,6 @@ convert-source-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
-core-js-compat@^3.34.0:
-  version "3.36.0"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.36.0.tgz#087679119bc2fdbdefad0d45d8e5d307d45ba190"
-  integrity sha512-iV9Pd/PsgjNWBXeq8XRtWVSgz2tKAfhfvBs7qxYty+RlRd+OCksaWmOnc4JKrTc1cToXL1N0s3l/vwlxPtdElw==
-  dependencies:
-    browserslist "^4.22.3"
-
 core-js-compat@^3.38.0, core-js-compat@^3.38.1:
   version "3.48.0"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.48.0.tgz#7efbe1fc1cbad44008190462217cc5558adaeaa6"
@@ -7401,12 +6754,7 @@ core-js-pure@^3.30.2:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.36.0.tgz#ffb34330b14e594d6a9835cf5843b4123f1d95db"
   integrity sha512-cN28qmhRNgbMZZMc/RFu5w8pK9VJzpb2rJVR/lHuZJKwmXnoWOpXmMkxqBB514igkp1Hu8WGROsiOAzUcKdHOQ==
 
-core-util-is@~1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
-  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
-
-cosmiconfig@^5.0.5, cosmiconfig@^5.1.0:
+cosmiconfig@^5.0.5:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
   integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==
@@ -7520,11 +6868,6 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-damerau-levenshtein@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
-  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
-
 data-urls@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-3.0.2.tgz#9cf24a477ae22bcef5cd5f6f0bfbc1d2d3be9143"
@@ -7543,6 +6886,15 @@ data-view-buffer@^1.0.1:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
+data-view-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz#211a03ba95ecaf7798a8c7198d79536211f88570"
+  integrity sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
 data-view-byte-length@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz#90721ca95ff280677eb793749fce1011347669e2"
@@ -7552,6 +6904,15 @@ data-view-byte-length@^1.0.1:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
+data-view-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz#9e80f7ca52453ce3e93d25a35318767ea7704735"
+  integrity sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
 data-view-byte-offset@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz#5e0bbfb4828ed2d1b9b400cd8a7d119bca0ff18a"
@@ -7561,6 +6922,15 @@ data-view-byte-offset@^1.0.0:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
+data-view-byte-offset@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz#068307f9b71ab76dbbe10291389e020856606191"
+  integrity sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
 dayjs@^1.11.18:
   version "1.11.18"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.18.tgz#835fa712aac52ab9dec8b1494098774ed7070a11"
@@ -7707,11 +7077,6 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
-denodeify@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/denodeify/-/denodeify-1.2.1.tgz#3a36287f5034e699e7577901052c2e6c94251631"
-  integrity sha512-KNTihKNmQENUZeKu5fzfpzRqR5S2VMp4gl9RFHiWzj9DfvYQPMJ6XHKNaQxaGCXwPk6y9yme3aUoaiAe+KX+vg==
-
 depd@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
@@ -7726,16 +7091,7 @@ deprecated-react-native-prop-types@^2.3.0:
     invariant "*"
     prop-types "*"
 
-deprecated-react-native-prop-types@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/deprecated-react-native-prop-types/-/deprecated-react-native-prop-types-5.0.0.tgz#02a12f090da7bd9e8c3ac53c31cf786a1315d302"
-  integrity sha512-cIK8KYiiGVOFsKdPMmm1L3tA/Gl+JopXL6F5+C7x39MyPsQYnP57Im/D6bNUzcborD7fcMwiwZqcBdBXXZucYQ==
-  dependencies:
-    "@react-native/normalize-colors" "^0.73.0"
-    invariant "^2.2.4"
-    prop-types "^15.8.1"
-
-dequal@2.0.3, dequal@^2.0.2, dequal@^2.0.3:
+dequal@2.0.3, dequal@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
   integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
@@ -7845,7 +7201,12 @@ dotenv@^16.4.5, dotenv@~16.4.5:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.7.tgz#0e20c5b82950140aa99be360a8a5f52335f53c26"
   integrity sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==
 
-dunder-proto@^1.0.1:
+drange@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/drange/-/drange-1.1.1.tgz#b2aecec2aab82fcef11dbbd7b9e32b83f8f6c0b8"
+  integrity sha512-pYxfDYpued//QpnLIm4Avk7rsNtAtQkUES2cwAYSvD/wd2pKD71gN2Ebj3e7klzXwjocvE8c5vx/1fxwpqmSxA==
+
+dunder-proto@^1.0.0, dunder-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
   integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
@@ -7931,11 +7292,6 @@ env-paths@^2.2.1:
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
   integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
 
-envinfo@^7.10.0:
-  version "7.11.1"
-  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.11.1.tgz#2ffef77591057081b0129a8fd8cf6118da1b94e1"
-  integrity sha512-8PiZgZNIB4q/Lw4AhOvAfB/ityHAd2bli3lESSWmWSzSsl5dKpy5N1d1Rfkd2teq/g9xN90lc6o98DOjMeYHpg==
-
 envinfo@^7.13.0:
   version "7.14.0"
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.14.0.tgz#26dac5db54418f2a4c1159153a0b2ae980838aae"
@@ -7968,7 +7324,67 @@ errorhandler@^1.5.1:
     accepts "~1.3.7"
     escape-html "~1.0.3"
 
-es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23.1, es-abstract@^1.23.2:
+es-abstract@^1.17.5, es-abstract@^1.23.3, es-abstract@^1.23.5, es-abstract@^1.23.6, es-abstract@^1.23.9, es-abstract@^1.24.0, es-abstract@^1.24.1:
+  version "1.24.1"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.24.1.tgz#f0c131ed5ea1bb2411134a8dd94def09c46c7899"
+  integrity sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==
+  dependencies:
+    array-buffer-byte-length "^1.0.2"
+    arraybuffer.prototype.slice "^1.0.4"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.4"
+    data-view-buffer "^1.0.2"
+    data-view-byte-length "^1.0.2"
+    data-view-byte-offset "^1.0.1"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.1.1"
+    es-set-tostringtag "^2.1.0"
+    es-to-primitive "^1.3.0"
+    function.prototype.name "^1.1.8"
+    get-intrinsic "^1.3.0"
+    get-proto "^1.0.1"
+    get-symbol-description "^1.1.0"
+    globalthis "^1.0.4"
+    gopd "^1.2.0"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    internal-slot "^1.1.0"
+    is-array-buffer "^3.0.5"
+    is-callable "^1.2.7"
+    is-data-view "^1.0.2"
+    is-negative-zero "^2.0.3"
+    is-regex "^1.2.1"
+    is-set "^2.0.3"
+    is-shared-array-buffer "^1.0.4"
+    is-string "^1.1.1"
+    is-typed-array "^1.1.15"
+    is-weakref "^1.1.1"
+    math-intrinsics "^1.1.0"
+    object-inspect "^1.13.4"
+    object-keys "^1.1.1"
+    object.assign "^4.1.7"
+    own-keys "^1.0.1"
+    regexp.prototype.flags "^1.5.4"
+    safe-array-concat "^1.1.3"
+    safe-push-apply "^1.0.0"
+    safe-regex-test "^1.1.0"
+    set-proto "^1.0.0"
+    stop-iteration-iterator "^1.1.0"
+    string.prototype.trim "^1.2.10"
+    string.prototype.trimend "^1.0.9"
+    string.prototype.trimstart "^1.0.8"
+    typed-array-buffer "^1.0.3"
+    typed-array-byte-length "^1.0.3"
+    typed-array-byte-offset "^1.0.4"
+    typed-array-length "^1.0.7"
+    unbox-primitive "^1.1.0"
+    which-typed-array "^1.1.19"
+
+es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23.2:
   version "1.23.2"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.2.tgz#693312f3940f967b8dd3eebacb590b01712622e0"
   integrity sha512-60s3Xv2T2p1ICykc7c+DNDPLDMm9t4QxCOUU0K9JxiLjM3C1zB9YVdN7tjxrFd4+AkZ8CdX1ovUga4P2+1e+/w==
@@ -8020,57 +7436,10 @@ es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23
     unbox-primitive "^1.0.2"
     which-typed-array "^1.1.15"
 
-es-abstract@^1.22.4:
-  version "1.22.5"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.5.tgz#1417df4e97cc55f09bf7e58d1e614bc61cb8df46"
-  integrity sha512-oW69R+4q2wG+Hc3KZePPZxOiisRIqfKBVo/HLx94QcJeWGU/8sZhCvc829rd1kS366vlJbzBfXf9yWwf0+Ko7w==
-  dependencies:
-    array-buffer-byte-length "^1.0.1"
-    arraybuffer.prototype.slice "^1.0.3"
-    available-typed-arrays "^1.0.7"
-    call-bind "^1.0.7"
-    es-define-property "^1.0.0"
-    es-errors "^1.3.0"
-    es-set-tostringtag "^2.0.3"
-    es-to-primitive "^1.2.1"
-    function.prototype.name "^1.1.6"
-    get-intrinsic "^1.2.4"
-    get-symbol-description "^1.0.2"
-    globalthis "^1.0.3"
-    gopd "^1.0.1"
-    has-property-descriptors "^1.0.2"
-    has-proto "^1.0.3"
-    has-symbols "^1.0.3"
-    hasown "^2.0.1"
-    internal-slot "^1.0.7"
-    is-array-buffer "^3.0.4"
-    is-callable "^1.2.7"
-    is-negative-zero "^2.0.3"
-    is-regex "^1.1.4"
-    is-shared-array-buffer "^1.0.3"
-    is-string "^1.0.7"
-    is-typed-array "^1.1.13"
-    is-weakref "^1.0.2"
-    object-inspect "^1.13.1"
-    object-keys "^1.1.1"
-    object.assign "^4.1.5"
-    regexp.prototype.flags "^1.5.2"
-    safe-array-concat "^1.1.0"
-    safe-regex-test "^1.0.3"
-    string.prototype.trim "^1.2.8"
-    string.prototype.trimend "^1.0.7"
-    string.prototype.trimstart "^1.0.7"
-    typed-array-buffer "^1.0.2"
-    typed-array-byte-length "^1.0.1"
-    typed-array-byte-offset "^1.0.2"
-    typed-array-length "^1.0.5"
-    unbox-primitive "^1.0.2"
-    which-typed-array "^1.1.14"
-
-es-define-property@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
-  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+es-define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
   dependencies:
     get-intrinsic "^1.2.4"
 
@@ -8079,51 +7448,32 @@ es-define-property@^1.0.1:
   resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa"
   integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
 
-es-errors@^1.1.0, es-errors@^1.2.1, es-errors@^1.3.0:
+es-errors@^1.2.1, es-errors@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
   integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
 
-es-iterator-helpers@^1.0.15:
-  version "1.0.18"
-  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.18.tgz#4d3424f46b24df38d064af6fbbc89274e29ea69d"
-  integrity sha512-scxAJaewsahbqTYrGKJihhViaM6DDZDDoucfvzNbK0pOren1g/daDQ3IAhzn+1G14rBG7w+i5N+qul60++zlKA==
-  dependencies:
-    call-bind "^1.0.7"
-    define-properties "^1.2.1"
-    es-abstract "^1.23.0"
-    es-errors "^1.3.0"
-    es-set-tostringtag "^2.0.3"
-    function-bind "^1.1.2"
-    get-intrinsic "^1.2.4"
-    globalthis "^1.0.3"
-    has-property-descriptors "^1.0.2"
-    has-proto "^1.0.3"
-    has-symbols "^1.0.3"
-    internal-slot "^1.0.7"
-    iterator.prototype "^1.1.2"
-    safe-array-concat "^1.1.2"
-
-es-iterator-helpers@^1.0.17:
-  version "1.0.17"
-  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.17.tgz#123d1315780df15b34eb181022da43e734388bb8"
-  integrity sha512-lh7BsUqelv4KUbR5a/ZTaGGIMLCjPGPqJ6q+Oq24YP0RdyptX1uzm4vvaqzk7Zx3bpl/76YLTTDj9L7uYQ92oQ==
+es-iterator-helpers@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.2.2.tgz#d979a9f686e2b0b72f88dbead7229924544720bc"
+  integrity sha512-BrUQ0cPTB/IwXj23HtwHjS9n7O4h9FX94b4xc5zlTHxeLgTAdzYUDyy6KdExAl9lbN5rtfe44xpjpmj9grxs5w==
   dependencies:
-    asynciterator.prototype "^1.0.0"
-    call-bind "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.4"
     define-properties "^1.2.1"
-    es-abstract "^1.22.4"
+    es-abstract "^1.24.1"
     es-errors "^1.3.0"
-    es-set-tostringtag "^2.0.2"
+    es-set-tostringtag "^2.1.0"
     function-bind "^1.1.2"
-    get-intrinsic "^1.2.4"
-    globalthis "^1.0.3"
+    get-intrinsic "^1.3.0"
+    globalthis "^1.0.4"
+    gopd "^1.2.0"
     has-property-descriptors "^1.0.2"
-    has-proto "^1.0.1"
-    has-symbols "^1.0.3"
-    internal-slot "^1.0.7"
-    iterator.prototype "^1.1.2"
-    safe-array-concat "^1.1.0"
+    has-proto "^1.2.0"
+    has-symbols "^1.1.0"
+    internal-slot "^1.1.0"
+    iterator.prototype "^1.1.5"
+    safe-array-concat "^1.1.3"
 
 es-object-atoms@^1.0.0:
   version "1.0.0"
@@ -8139,7 +7489,7 @@ es-object-atoms@^1.1.1:
   dependencies:
     es-errors "^1.3.0"
 
-es-set-tostringtag@^2.0.2, es-set-tostringtag@^2.0.3:
+es-set-tostringtag@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz#8bb60f0a440c2e4281962428438d58545af39777"
   integrity sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==
@@ -8148,6 +7498,16 @@ es-set-tostringtag@^2.0.2, es-set-tostringtag@^2.0.3:
     has-tostringtag "^1.0.2"
     hasown "^2.0.1"
 
+es-set-tostringtag@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz#f31dbbe0c183b00a6d26eb6325c810c0fd18bd4d"
+  integrity sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==
+  dependencies:
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
 es-shim-unscopables@^1.0.0, es-shim-unscopables@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz#1f6942e71ecc7835ed1c8a83006d8771a63a3763"
@@ -8155,6 +7515,13 @@ es-shim-unscopables@^1.0.0, es-shim-unscopables@^1.0.2:
   dependencies:
     hasown "^2.0.0"
 
+es-shim-unscopables@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz#438df35520dac5d105f3943d927549ea3b00f4b5"
+  integrity sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==
+  dependencies:
+    hasown "^2.0.2"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -8164,6 +7531,15 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+es-to-primitive@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.3.0.tgz#96c89c82cc49fd8794a24835ba3e1ff87f214e18"
+  integrity sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==
+  dependencies:
+    is-callable "^1.2.7"
+    is-date-object "^1.0.5"
+    is-symbol "^1.0.4"
+
 es-toolkit@^1.38.0:
   version "1.39.5"
   resolved "https://registry.yarnpkg.com/es-toolkit/-/es-toolkit-1.39.5.tgz#ee2a78a66aafb76c7345af0ea8c06722c78ef1fd"
@@ -8248,15 +7624,10 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-prettier@^8.5.0:
-  version "8.10.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz#3a06a662130807e2502fc3ff8b4143d8a0658e11"
-  integrity sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==
-
-eslint-config-prettier@^9.1.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz#31af3d94578645966c082fcb71a5846d3c94867f"
-  integrity sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==
+eslint-config-prettier@~10.1.8:
+  version "10.1.8"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz#15734ce4af8c2778cc32f0b01b37b0b5cd1ecb97"
+  integrity sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==
 
 eslint-import-context@^0.1.8:
   version "0.1.9"
@@ -8275,7 +7646,7 @@ eslint-import-resolver-node@^0.3.9:
     is-core-module "^2.13.0"
     resolve "^1.22.4"
 
-eslint-import-resolver-typescript@^4.4.4:
+eslint-import-resolver-typescript@~4.4.4:
   version "4.4.4"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-4.4.4.tgz#3e83a9c25f4a053fe20e1b07b47e04e8519a8720"
   integrity sha512-1iM2zeBvrYmUNTj2vSC/90JTHDth+dfOfiNKkxApWRsTJYNrc8rOdxxIf5vazX+BiAXTeOT0UvWpGI/7qIWQOw==
@@ -8288,6 +7659,13 @@ eslint-import-resolver-typescript@^4.4.4:
     tinyglobby "^0.2.14"
     unrs-resolver "^1.7.11"
 
+eslint-module-utils@^2.12.1:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz#f76d3220bfb83c057651359295ab5854eaad75ff"
+  integrity sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==
+  dependencies:
+    debug "^3.2.7"
+
 eslint-module-utils@^2.8.0:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz#52f2404300c3bd33deece9d7372fb337cc1d7c34"
@@ -8295,23 +7673,7 @@ eslint-module-utils@^2.8.0:
   dependencies:
     debug "^3.2.7"
 
-eslint-plugin-eslint-comments@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-eslint-comments/-/eslint-plugin-eslint-comments-3.2.0.tgz#9e1cd7b4413526abb313933071d7aba05ca12ffa"
-  integrity sha512-0jkOl0hfojIHHmEHgmNdqv4fmh7300NdpA9FFpF7zaoLvB/QeXOGNLIo86oAveJFrfB1p05kC8hpEMHM8DwWVQ==
-  dependencies:
-    escape-string-regexp "^1.0.5"
-    ignore "^5.0.5"
-
-eslint-plugin-ft-flow@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-ft-flow/-/eslint-plugin-ft-flow-2.0.3.tgz#3b3c113c41902bcbacf0e22b536debcfc3c819e8"
-  integrity sha512-Vbsd/b+LYA99jUbsL6viEUWShFaYQt2YQs3QN3f+aeszOhh2sgdcU0mjzDyD4yyBvMc8qy2uwvBBWfMzEX06tg==
-  dependencies:
-    lodash "^4.17.21"
-    string-natural-compare "^3.0.1"
-
-eslint-plugin-import@^2.17.2, eslint-plugin-import@^2.29.1:
+eslint-plugin-import@^2.17.2:
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz#d45b37b5ef5901d639c15270d74d46d161150643"
   integrity sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==
@@ -8334,117 +7696,99 @@ eslint-plugin-import@^2.17.2, eslint-plugin-import@^2.29.1:
     semver "^6.3.1"
     tsconfig-paths "^3.15.0"
 
-eslint-plugin-jest@^27.9.0:
-  version "27.9.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-27.9.0.tgz#7c98a33605e1d8b8442ace092b60e9919730000b"
-  integrity sha512-QIT7FH7fNmd9n4se7FFKHbsLKGQiw885Ds6Y/sxKgCZ6natwCsXdgPOADnYVxN2QrRweF0FZWbJ6S7Rsn7llug==
+eslint-plugin-import@~2.32.0:
+  version "2.32.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz#602b55faa6e4caeaa5e970c198b5c00a37708980"
+  integrity sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==
   dependencies:
-    "@typescript-eslint/utils" "^5.10.0"
+    "@rtsao/scc" "^1.1.0"
+    array-includes "^3.1.9"
+    array.prototype.findlastindex "^1.2.6"
+    array.prototype.flat "^1.3.3"
+    array.prototype.flatmap "^1.3.3"
+    debug "^3.2.7"
+    doctrine "^2.1.0"
+    eslint-import-resolver-node "^0.3.9"
+    eslint-module-utils "^2.12.1"
+    hasown "^2.0.2"
+    is-core-module "^2.16.1"
+    is-glob "^4.0.3"
+    minimatch "^3.1.2"
+    object.fromentries "^2.0.8"
+    object.groupby "^1.0.3"
+    object.values "^1.2.1"
+    semver "^6.3.1"
+    string.prototype.trimend "^1.0.9"
+    tsconfig-paths "^3.15.0"
 
-eslint-plugin-jsx-a11y@^6.8.0:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.8.0.tgz#2fa9c701d44fcd722b7c771ec322432857fcbad2"
-  integrity sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==
+eslint-plugin-jest@~29.14.0:
+  version "29.14.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-29.14.0.tgz#7987cb904437af505ecc6028482871c1205268a2"
+  integrity sha512-njP4UAcCmcE9uYMQcZdi4unNkiVKzMJ6yOdKcw5YqvNayV2hbopTBb+VaDU7mUmteDfRtjbmCZkK/psxbUvdUg==
   dependencies:
-    "@babel/runtime" "^7.23.2"
-    aria-query "^5.3.0"
-    array-includes "^3.1.7"
-    array.prototype.flatmap "^1.3.2"
-    ast-types-flow "^0.0.8"
-    axe-core "=4.7.0"
-    axobject-query "^3.2.1"
-    damerau-levenshtein "^1.0.8"
-    emoji-regex "^9.2.2"
-    es-iterator-helpers "^1.0.15"
-    hasown "^2.0.0"
-    jsx-ast-utils "^3.3.5"
-    language-tags "^1.0.9"
-    minimatch "^3.1.2"
-    object.entries "^1.1.7"
-    object.fromentries "^2.0.7"
+    "@typescript-eslint/utils" "^8.0.0"
 
-eslint-plugin-react-hooks@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
-  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
+eslint-plugin-prettier@~5.5.5:
+  version "5.5.5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.5.5.tgz#9eae11593faa108859c26f9a9c367d619a0769c0"
+  integrity sha512-hscXkbqUZ2sPithAuLm5MXL+Wph+U7wHngPBv9OMWwlP8iaflyxpjTYZkmdgB4/vPIhemRlBEoLrH7UC1n7aUw==
+  dependencies:
+    prettier-linter-helpers "^1.0.1"
+    synckit "^0.11.12"
 
-eslint-plugin-react-hooks@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.0.tgz#a255a1db826ea42b0e37f160430e4bd0b4b659f9"
-  integrity sha512-fNXaOwvKwq2+pXiRpXc825Vd63+KM4DLL40Rtlycb8m7fYpp6efrTp1sa6ZbP/Ap58K2bEKFXRmhURE+CJAQWw==
+eslint-plugin-react-hooks@~7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.1.tgz#66e258db58ece50723ef20cc159f8aa908219169"
+  integrity sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==
   dependencies:
     "@babel/core" "^7.24.4"
     "@babel/parser" "^7.24.4"
     hermes-parser "^0.25.1"
-    zod "^3.22.4 || ^4.0.0"
-    zod-validation-error "^3.0.3 || ^4.0.0"
+    zod "^3.25.0 || ^4.0.0"
+    zod-validation-error "^3.5.0 || ^4.0.0"
 
 eslint-plugin-react-native-globals@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-native-globals/-/eslint-plugin-react-native-globals-0.1.2.tgz#ee1348bc2ceb912303ce6bdbd22e2f045ea86ea2"
   integrity sha512-9aEPf1JEpiTjcFAmmyw8eiIXmcNZOqaZyHO77wgm0/dWfT/oxC1SrIq8ET38pMxHYrcB6Uew+TzUVsBeczF88g==
 
-eslint-plugin-react-native@^4.0.0, eslint-plugin-react-native@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-native/-/eslint-plugin-react-native-4.1.0.tgz#5343acd3b2246bc1b857ac38be708f070d18809f"
-  integrity sha512-QLo7rzTBOl43FvVqDdq5Ql9IoElIuTdjrz9SKAXCvULvBoRZ44JGSkx9z4999ZusCsb4rK3gjS8gOGyeYqZv2Q==
+eslint-plugin-react-native@~5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-native/-/eslint-plugin-react-native-5.0.0.tgz#2ee990ba4967c557183b31121578547fb5c02d5d"
+  integrity sha512-VyWlyCC/7FC/aONibOwLkzmyKg4j9oI8fzrk9WYNs4I8/m436JuOTAFwLvEn1CVvc7La4cPfbCyspP4OYpP52Q==
   dependencies:
     eslint-plugin-react-native-globals "^0.1.1"
 
-eslint-plugin-react@^7.30.1:
-  version "7.34.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.34.0.tgz#ab71484d54fc409c37025c5eca00eb4177a5e88c"
-  integrity sha512-MeVXdReleBTdkz/bvcQMSnCXGi+c9kvy51IpinjnJgutl3YTHWsDdke7Z1ufZpGfDG8xduBDKyjtB9JH1eBKIQ==
+eslint-plugin-react@~7.37.5:
+  version "7.37.5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz#2975511472bdda1b272b34d779335c9b0e877065"
+  integrity sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==
   dependencies:
-    array-includes "^3.1.7"
-    array.prototype.findlast "^1.2.4"
-    array.prototype.flatmap "^1.3.2"
-    array.prototype.toreversed "^1.1.2"
-    array.prototype.tosorted "^1.1.3"
+    array-includes "^3.1.8"
+    array.prototype.findlast "^1.2.5"
+    array.prototype.flatmap "^1.3.3"
+    array.prototype.tosorted "^1.1.4"
     doctrine "^2.1.0"
-    es-iterator-helpers "^1.0.17"
-    estraverse "^5.3.0"
-    jsx-ast-utils "^2.4.1 || ^3.0.0"
-    minimatch "^3.1.2"
-    object.entries "^1.1.7"
-    object.fromentries "^2.0.7"
-    object.hasown "^1.1.3"
-    object.values "^1.1.7"
-    prop-types "^15.8.1"
-    resolve "^2.0.0-next.5"
-    semver "^6.3.1"
-    string.prototype.matchall "^4.0.10"
-
-eslint-plugin-react@^7.34.1:
-  version "7.34.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.34.1.tgz#6806b70c97796f5bbfb235a5d3379ece5f4da997"
-  integrity sha512-N97CxlouPT1AHt8Jn0mhhN2RrADlUAsk1/atcT2KyA/l9Q/E6ll7OIGwNumFmWfZ9skV3XXccYS19h80rHtgkw==
-  dependencies:
-    array-includes "^3.1.7"
-    array.prototype.findlast "^1.2.4"
-    array.prototype.flatmap "^1.3.2"
-    array.prototype.toreversed "^1.1.2"
-    array.prototype.tosorted "^1.1.3"
-    doctrine "^2.1.0"
-    es-iterator-helpers "^1.0.17"
+    es-iterator-helpers "^1.2.1"
     estraverse "^5.3.0"
+    hasown "^2.0.2"
     jsx-ast-utils "^2.4.1 || ^3.0.0"
     minimatch "^3.1.2"
-    object.entries "^1.1.7"
-    object.fromentries "^2.0.7"
-    object.hasown "^1.1.3"
-    object.values "^1.1.7"
+    object.entries "^1.1.9"
+    object.fromentries "^2.0.8"
+    object.values "^1.2.1"
     prop-types "^15.8.1"
     resolve "^2.0.0-next.5"
     semver "^6.3.1"
-    string.prototype.matchall "^4.0.10"
+    string.prototype.matchall "^4.0.12"
+    string.prototype.repeat "^1.0.0"
 
 eslint-rule-composer@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz#79320c927b0c5c0d3d3d2b76c8b4a488f25bbaf9"
   integrity sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==
 
-eslint-scope@5.1.1, eslint-scope@^5.1.1:
+eslint-scope@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
   integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
@@ -8460,14 +7804,7 @@ eslint-scope@^7.2.2:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
-eslint-utils@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
-  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
-  dependencies:
-    eslint-visitor-keys "^2.0.0"
-
-eslint-visitor-keys@^2.0.0, eslint-visitor-keys@^2.1.0:
+eslint-visitor-keys@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
@@ -8477,6 +7814,11 @@ eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
+eslint-visitor-keys@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz#4cfea60fe7dd0ad8e816e1ed026c1d5251b512c1"
+  integrity sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==
+
 eslint@^8.57.0:
   version "8.57.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.0.tgz#c786a6fd0e0b68941aaf624596fb987089195668"
@@ -8584,7 +7926,7 @@ exec-async@^2.2.0:
   resolved "https://registry.yarnpkg.com/exec-async/-/exec-async-2.2.0.tgz#c7c5ad2eef3478d38390c6dd3acfe8af0efc8301"
   integrity sha512-87OpwcEiMia/DeiKFzaQNBNFeN3XkkpYIh9FyOqq5mS2oKv3CBE67PXoEKcr6nodWdXNogTiQ0jE2NGuoffXPw==
 
-execa@^5.0.0, execa@^5.1.1:
+execa@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
   integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
@@ -8824,6 +8166,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-diff@^1.1.2:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.3.0.tgz#ece407fa550a64d638536cd727e129c61616e0f0"
+  integrity sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==
+
 fast-fifo@^1.1.0, fast-fifo@^1.2.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.2.tgz#286e31de96eb96d38a97899815740ba2a4f3640c"
@@ -8861,13 +8208,6 @@ fast-levenshtein@^2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
-fast-xml-parser@^4.0.12, fast-xml-parser@^4.2.4:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/fast-xml-parser/-/fast-xml-parser-4.4.1.tgz#86dbf3f18edf8739326447bcaac31b4ae7f6514f"
-  integrity sha512-xkjOecfnKGkSsOwtZ5Pz7Us/T6mrbPQrq0nh+aCO5V9nk5NLWmasAHumTKjiPJPWANe+kAZ84Jc8ooJkzZ88Sw==
-  dependencies:
-    strnum "^1.0.5"
-
 fast-xml-parser@^4.4.1:
   version "4.5.3"
   resolved "https://registry.yarnpkg.com/fast-xml-parser/-/fast-xml-parser-4.5.3.tgz#c54d6b35aa0f23dc1ea60b6c884340c006dc6efb"
@@ -8901,6 +8241,13 @@ fdir@^6.5.0:
   resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.5.0.tgz#ed2ab967a331ade62f18d077dae192684d50d350"
   integrity sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==
 
+figures@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
+  integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
+  dependencies:
+    escape-string-regexp "^1.0.5"
+
 file-entry-cache@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@@ -9053,11 +8400,6 @@ flow-parser@0.*:
   resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.231.0.tgz#13daa172b3c06ffacbb31025592dc0db41fe28f3"
   integrity sha512-WVzuqwq7ZnvBceCG0DGeTQebZE+iIU0mlk5PmJgYj9DDrt+0isGC2m1ezW9vxL4V+HERJJo9ExppOnwKH2op6Q==
 
-flow-parser@^0.206.0:
-  version "0.206.0"
-  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.206.0.tgz#f4f794f8026535278393308e01ea72f31000bfef"
-  integrity sha512-HVzoK3r6Vsg+lKvlIZzaWNBVai+FXTX1wdYhz/wVlH13tb/gOdLXmlTqy6odmTBhT5UoWUbq0k8263Qhr9d88w==
-
 follow-redirects@^1.15.0:
   version "1.15.6"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
@@ -9165,7 +8507,7 @@ function-bind@^1.1.2:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
   integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
-function.prototype.name@^1.1.5, function.prototype.name@^1.1.6:
+function.prototype.name@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd"
   integrity sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==
@@ -9175,6 +8517,18 @@ function.prototype.name@^1.1.5, function.prototype.name@^1.1.6:
     es-abstract "^1.22.1"
     functions-have-names "^1.2.3"
 
+function.prototype.name@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.8.tgz#e68e1df7b259a5c949eeef95cdbde53edffabb78"
+  integrity sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    functions-have-names "^1.2.3"
+    hasown "^2.0.2"
+    is-callable "^1.2.7"
+
 functions-have-names@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
@@ -9206,7 +8560,7 @@ get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@
     has-symbols "^1.0.3"
     hasown "^2.0.0"
 
-get-intrinsic@^1.3.0:
+get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@^1.2.7, get-intrinsic@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz#743f0e3b6964a93a5491ed1bffaae054d7f98d01"
   integrity sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==
@@ -9254,6 +8608,15 @@ get-symbol-description@^1.0.2:
     es-errors "^1.3.0"
     get-intrinsic "^1.2.4"
 
+get-symbol-description@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.1.0.tgz#7bdd54e0befe8ffc9f3b4e203220d9f1e881b6ee"
+  integrity sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+
 get-tsconfig@^4.10.1:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.10.1.tgz#d34c1c01f47d65a606c37aa7a177bc3e56ab4b2e"
@@ -9349,6 +8712,14 @@ globalthis@^1.0.3:
   dependencies:
     define-properties "^1.1.3"
 
+globalthis@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
+  integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
+  dependencies:
+    define-properties "^1.2.1"
+    gopd "^1.0.1"
+
 globby@^11.1.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
@@ -9422,6 +8793,13 @@ has-proto@^1.0.1, has-proto@^1.0.3:
   resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
   integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
 
+has-proto@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.2.0.tgz#5de5a6eabd95fdffd9818b43055e8065e39fe9d5"
+  integrity sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==
+  dependencies:
+    dunder-proto "^1.0.0"
+
 has-symbols@^1.0.2, has-symbols@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
@@ -9478,16 +8856,6 @@ he@1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hermes-estree@0.15.0:
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.15.0.tgz#e32f6210ab18c7b705bdcb375f7700f2db15d6ba"
-  integrity sha512-lLYvAd+6BnOqWdnNbP/Q8xfl8LOGw4wVjfrNd9Gt8eoFzhNBRVD95n4l2ksfMVOoxuVyegs85g83KS9QOsxbVQ==
-
-hermes-estree@0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.19.1.tgz#d5924f5fac2bf0532547ae9f506d6db8f3c96392"
-  integrity sha512-daLGV3Q2MKk8w4evNMKwS8zBE/rcpA800nu1Q5kM08IKijoSnPe9Uo1iIxzPKRkn95IxxsgBMPeYHt3VG4ej2g==
-
 hermes-estree@0.23.1:
   version "0.23.1"
   resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.23.1.tgz#d0bac369a030188120ee7024926aabe5a9f84fdb"
@@ -9503,20 +8871,6 @@ hermes-estree@0.28.1:
   resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.28.1.tgz#631e6db146b06e62fc1c630939acf4a3c77d1b24"
   integrity sha512-w3nxl/RGM7LBae0v8LH2o36+8VqwOZGv9rX1wyoWT6YaKZLqpJZ0YQ5P0LVr3tuRpf7vCx0iIG4i/VmBJejxTQ==
 
-hermes-parser@0.15.0:
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.15.0.tgz#f611a297c2a2dbbfbce8af8543242254f604c382"
-  integrity sha512-Q1uks5rjZlE9RjMMjSUCkGrEIPI5pKJILeCtK1VmTj7U4pf3wVPoo+cxfu+s4cBAPy2JzikIIdCZgBoR6x7U1Q==
-  dependencies:
-    hermes-estree "0.15.0"
-
-hermes-parser@0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.19.1.tgz#1044348097165b7c93dc198a80b04ed5130d6b1a"
-  integrity sha512-Vp+bXzxYJWrpEuJ/vXxUsLnt0+y4q9zyi4zUlkLqD8FKv4LjIfOvP69R/9Lty3dCyKh0E2BU7Eypqr63/rKT/A==
-  dependencies:
-    hermes-estree "0.19.1"
-
 hermes-parser@0.23.1:
   version "0.23.1"
   resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.23.1.tgz#e5de648e664f3b3d84d01b48fc7ab164f4b68205"
@@ -9538,13 +8892,6 @@ hermes-parser@0.28.1:
   dependencies:
     hermes-estree "0.28.1"
 
-hermes-profile-transformer@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/hermes-profile-transformer/-/hermes-profile-transformer-0.0.6.tgz#bd0f5ecceda80dd0ddaae443469ab26fb38fc27b"
-  integrity sha512-cnN7bQUm65UWOy6cbGcCcZ3rpwW8Q/j4OP5aWRhEry4Z2t2aR1cjrbp0BS+KiBN0smvP1caBgAuxutvyvJILzQ==
-  dependencies:
-    source-map "^0.7.3"
-
 hoist-non-react-statics@3.3.2, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -9641,6 +8988,13 @@ iconv-lite@0.6.3:
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
+iconv-lite@^0.7.0:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.7.2.tgz#d0bdeac3f12b4835b7359c2ad89c422a4d1cc72e"
+  integrity sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 idb@7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/idb/-/idb-7.1.1.tgz#d910ded866d32c7ced9befc5bfdf36f572ced72b"
@@ -9658,11 +9012,6 @@ ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore@^5.0.5, ignore@^5.2.4:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
-  integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
-
 ignore@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
@@ -9740,6 +9089,27 @@ ini@^1.3.4, ini@~1.3.0:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
+inquirer@^8.2.5:
+  version "8.2.7"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-8.2.7.tgz#62f6b931a9b7f8735dc42db927316d8fb6f71de8"
+  integrity sha512-UjOaSel/iddGZJ5xP/Eixh6dY1XghiBw4XK13rCCIJcJfyhhoul/7KhLLUGtebEj6GDYM6Vnx/mVsjx2L/mFIA==
+  dependencies:
+    "@inquirer/external-editor" "^1.0.0"
+    ansi-escapes "^4.2.1"
+    chalk "^4.1.1"
+    cli-cursor "^3.1.0"
+    cli-width "^3.0.0"
+    figures "^3.0.0"
+    lodash "^4.17.21"
+    mute-stream "0.0.8"
+    ora "^5.4.1"
+    run-async "^2.4.0"
+    rxjs "^7.5.5"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+    through "^2.3.6"
+    wrap-ansi "^6.0.1"
+
 internal-slot@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"
@@ -9749,6 +9119,15 @@ internal-slot@^1.0.7:
     hasown "^2.0.0"
     side-channel "^1.0.4"
 
+internal-slot@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.1.0.tgz#1eac91762947d2f7056bc838d93e13b2e9604961"
+  integrity sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==
+  dependencies:
+    es-errors "^1.3.0"
+    hasown "^2.0.2"
+    side-channel "^1.1.0"
+
 invariant@*, invariant@2.2.4, invariant@^2.1.0, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -9772,6 +9151,15 @@ is-array-buffer@^3.0.4:
     call-bind "^1.0.2"
     get-intrinsic "^1.2.1"
 
+is-array-buffer@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.5.tgz#65742e1e687bd2cc666253068fd8707fe4d44280"
+  integrity sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    get-intrinsic "^1.2.6"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -9796,6 +9184,13 @@ is-bigint@^1.0.1:
   dependencies:
     has-bigints "^1.0.1"
 
+is-bigint@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.1.0.tgz#dda7a3445df57a42583db4228682eba7c4170672"
+  integrity sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==
+  dependencies:
+    has-bigints "^1.0.2"
+
 is-boolean-object@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
@@ -9804,6 +9199,14 @@ is-boolean-object@^1.1.0:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
+is-boolean-object@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.2.2.tgz#7067f47709809a393c71ff5bb3e135d8a9215d9e"
+  integrity sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
 is-bun-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-bun-module/-/is-bun-module-2.0.0.tgz#4d7859a87c0fcac950c95e666730e745eae8bddd"
@@ -9837,6 +9240,15 @@ is-data-view@^1.0.1:
   dependencies:
     is-typed-array "^1.1.13"
 
+is-data-view@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.2.tgz#bae0a41b9688986c2188dda6657e56b8f9e63b8e"
+  integrity sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==
+  dependencies:
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
+    is-typed-array "^1.1.13"
+
 is-date-object@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
@@ -9849,6 +9261,14 @@ is-date-object@^1.0.5:
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-date-object@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.1.0.tgz#ad85541996fc7aa8b2729701d27b7319f95d82f7"
+  integrity sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==
+  dependencies:
+    call-bound "^1.0.2"
+    has-tostringtag "^1.0.2"
+
 is-directory@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
@@ -9864,12 +9284,12 @@ is-extglob@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
-is-finalizationregistry@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz#c8749b65f17c133313e661b1289b95ad3dbd62e6"
-  integrity sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==
+is-finalizationregistry@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz#eefdcdc6c94ddd0674d9c85887bf93f944a97c90"
+  integrity sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==
   dependencies:
-    call-bind "^1.0.2"
+    call-bound "^1.0.3"
 
 is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
@@ -9940,6 +9360,14 @@ is-number-object@^1.0.4:
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-number-object@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.1.1.tgz#144b21e95a1bc148205dcc2814a9134ec41b2541"
+  integrity sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
 is-number@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
@@ -10004,6 +9432,13 @@ is-shared-array-buffer@^1.0.3:
   dependencies:
     call-bind "^1.0.7"
 
+is-shared-array-buffer@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz#9b67844bd9b7f246ba0708c3a93e34269c774f6f"
+  integrity sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==
+  dependencies:
+    call-bound "^1.0.3"
+
 is-stream@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
@@ -10016,6 +9451,14 @@ is-string@^1.0.5, is-string@^1.0.7:
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-string@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.1.1.tgz#92ea3f3d5c5b6e039ca8677e5ac8d07ea773cbb9"
+  integrity sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
 is-symbol@^1.0.2, is-symbol@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
@@ -10023,6 +9466,15 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
   dependencies:
     has-symbols "^1.0.2"
 
+is-symbol@^1.0.4, is-symbol@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.1.1.tgz#f47761279f532e2b05a7024a7506dbbedacd0634"
+  integrity sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==
+  dependencies:
+    call-bound "^1.0.2"
+    has-symbols "^1.1.0"
+    safe-regex-test "^1.1.0"
+
 is-typed-array@^1.1.13:
   version "1.1.13"
   resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.13.tgz#d6c5ca56df62334959322d7d7dd1cca50debe229"
@@ -10030,7 +9482,7 @@ is-typed-array@^1.1.13:
   dependencies:
     which-typed-array "^1.1.14"
 
-is-typed-array@^1.1.3:
+is-typed-array@^1.1.14, is-typed-array@^1.1.15, is-typed-array@^1.1.3:
   version "1.1.15"
   resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.15.tgz#4bfb4a45b61cee83a5a46fba778e4e8d59c0ce0b"
   integrity sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==
@@ -10054,6 +9506,13 @@ is-weakref@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-weakref@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.1.1.tgz#eea430182be8d64174bd96bffbc46f21bf3f9293"
+  integrity sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==
+  dependencies:
+    call-bound "^1.0.3"
+
 is-weakset@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.3.tgz#e801519df8c0c43e12ff2834eead84ec9e624007"
@@ -10079,11 +9538,6 @@ isarray@^2.0.5:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
   integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
 
-isarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-  integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
-
 iserror@^0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/iserror/-/iserror-0.0.2.tgz#bd53451fe2f668b9f2402c1966787aaa2c7c0bf5"
@@ -10152,16 +9606,17 @@ istanbul-reports@^3.1.3:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
-iterator.prototype@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.2.tgz#5e29c8924f01916cb9335f1ff80619dcff22b0c0"
-  integrity sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==
+iterator.prototype@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.5.tgz#12c959a29de32de0aa3bbbb801f4d777066dae39"
+  integrity sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==
   dependencies:
-    define-properties "^1.2.1"
-    get-intrinsic "^1.2.1"
-    has-symbols "^1.0.3"
-    reflect.getprototypeof "^1.0.4"
-    set-function-name "^2.0.1"
+    define-data-property "^1.1.4"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.6"
+    get-proto "^1.0.0"
+    has-symbols "^1.1.0"
+    set-function-name "^2.0.2"
 
 jackspeak@^3.1.2:
   version "3.4.3"
@@ -10294,7 +9749,7 @@ jest-environment-jsdom@^29.2.1:
     jest-util "^29.7.0"
     jsdom "^20.0.0"
 
-jest-environment-node@^29.6.3, jest-environment-node@^29.7.0:
+jest-environment-node@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-29.7.0.tgz#0b93e111dda8ec120bc8300e6d1fb9576e164376"
   integrity sha512-DOSwCRqXirTOyheM+4d5YZOrWcdu0LNZ87ewUoywbcb2XR4wKgqiG8vNeYwhjFMbEkfju7wx2GYH0P2gevGvFw==
@@ -10520,7 +9975,7 @@ jest-util@^29.7.0:
     graceful-fs "^4.2.9"
     picomatch "^2.2.3"
 
-jest-validate@^29.6.3, jest-validate@^29.7.0:
+jest-validate@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-29.7.0.tgz#7bf705511c64da591d46b15fce41400d52147d9c"
   integrity sha512-ZB7wHqaRGVw/9hST/OuFUReG7M8vKeq0/J2egIGLdvjHCmYqGARhzXmtgi+gVeZ5uXFF219aOc3Ls2yLg27tkw==
@@ -10568,7 +10023,7 @@ jest-watcher@^29.0.0, jest-watcher@^29.7.0:
     jest-util "^29.7.0"
     string-length "^4.0.1"
 
-jest-worker@^29.6.3, jest-worker@^29.7.0:
+jest-worker@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-29.7.0.tgz#acad073acbbaeb7262bd5389e1bcf43e10058d4a"
   integrity sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==
@@ -10639,11 +10094,6 @@ js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
-jsc-android@^250231.0.0:
-  version "250231.0.0"
-  resolved "https://registry.yarnpkg.com/jsc-android/-/jsc-android-250231.0.0.tgz#91720f8df382a108872fa4b3f558f33ba5e95262"
-  integrity sha512-rS46PvsjYmdmuz1OAWXY/1kCYG7pnf1TBqeTiOJr1iDz7s5DLxxC9n/ZMknLDxzYzNVfI7R95MH10emSSG1Wuw==
-
 jsc-safe-url@^0.2.2, jsc-safe-url@^0.2.4:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/jsc-safe-url/-/jsc-safe-url-0.2.4.tgz#141c14fbb43791e88d5dc64e85a374575a83477a"
@@ -10817,16 +10267,6 @@ jsrsasign@11.0.0:
     array-includes "^3.1.4"
     object.assign "^4.1.2"
 
-jsx-ast-utils@^3.3.5:
-  version "3.3.5"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
-  integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
-  dependencies:
-    array-includes "^3.1.6"
-    array.prototype.flat "^1.3.1"
-    object.assign "^4.1.4"
-    object.values "^1.1.6"
-
 keyv@^4.5.3:
   version "4.5.4"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
@@ -10856,18 +10296,6 @@ lan-network@^0.1.4:
   resolved "https://registry.yarnpkg.com/lan-network/-/lan-network-0.1.5.tgz#e781889b7bd4dbedd9126fff3ceddd809a83c3ff"
   integrity sha512-CV3k7l8jW0Z1b+G41tB7JInVyJEKQzh/YPl2v9uXpZMusp0aa+rh3OqG77xWuX7+eVBa8PsdTuMznTAssF4qwg==
 
-language-subtag-registry@^0.3.20:
-  version "0.3.22"
-  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
-  integrity sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==
-
-language-tags@^1.0.9:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.9.tgz#1ffdcd0ec0fafb4b1be7f8b11f306ad0f9c08777"
-  integrity sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==
-  dependencies:
-    language-subtag-registry "^0.3.20"
-
 launch-editor@^2.9.1:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/launch-editor/-/launch-editor-2.10.0.tgz#5ca3edfcb9667df1e8721310f3a40f1127d4bc42"
@@ -11073,7 +10501,7 @@ long@~3:
   resolved "https://registry.yarnpkg.com/long/-/long-3.2.0.tgz#d821b7138ca1cb581c172990ef14db200b5c474b"
   integrity sha512-ZYvPPOMqUwPoDsbJaR10iQJYnMuZhRTvHYl62ErLIEX7RgFlziSBUUvrt3OVfc47QlHHpzPZYP17g3Fv7oeJkg==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -11229,15 +10657,6 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-metro-babel-transformer@0.80.6:
-  version "0.80.6"
-  resolved "https://registry.yarnpkg.com/metro-babel-transformer/-/metro-babel-transformer-0.80.6.tgz#49df74af71ecc9871636cf469726debcb5a1c858"
-  integrity sha512-ssuoVC4OzqaOt3LpwfUbDfBlFGRu9v1Yf2JJnKPz0ROYHNjSBws4aUesqQQ/Ea8DbiH7TK4j4cJmm+XjdHmgqA==
-  dependencies:
-    "@babel/core" "^7.20.0"
-    hermes-parser "0.19.1"
-    nullthrows "^1.1.1"
-
 metro-babel-transformer@0.82.2:
   version "0.82.2"
   resolved "https://registry.yarnpkg.com/metro-babel-transformer/-/metro-babel-transformer-0.82.2.tgz#acb89a300a070b685cadbfdc3aa3f809b52de9fc"
@@ -11248,11 +10667,6 @@ metro-babel-transformer@0.82.2:
     hermes-parser "0.28.1"
     nullthrows "^1.1.1"
 
-metro-cache-key@0.80.6:
-  version "0.80.6"
-  resolved "https://registry.yarnpkg.com/metro-cache-key/-/metro-cache-key-0.80.6.tgz#48fe84477f6408478a33c363a8f5eaceea5cf853"
-  integrity sha512-DFmjQacC8m/S3HpELklLMWkPGP/fZPX3BSgjd0xQvwIvWyFwk8Nn/lfp/uWdEVDtDSIr64/anXU5uWohGwlWXw==
-
 metro-cache-key@0.82.2:
   version "0.82.2"
   resolved "https://registry.yarnpkg.com/metro-cache-key/-/metro-cache-key-0.82.2.tgz#d1b73cd4849e9ed3984aeb2386e5b198f8f59fad"
@@ -11260,14 +10674,6 @@ metro-cache-key@0.82.2:
   dependencies:
     flow-enums-runtime "^0.0.6"
 
-metro-cache@0.80.6:
-  version "0.80.6"
-  resolved "https://registry.yarnpkg.com/metro-cache/-/metro-cache-0.80.6.tgz#05fdd83482f4132243b27713716c289532bd41c3"
-  integrity sha512-NP81pHSPkzs+iNlpVkJqijrpcd6lfuDAunYH9/Rn8oLNz0yLfkl8lt+xOdUU4IkFt3oVcTBEFCnzAzv4B8YhyA==
-  dependencies:
-    metro-core "0.80.6"
-    rimraf "^3.0.2"
-
 metro-cache@0.82.2:
   version "0.82.2"
   resolved "https://registry.yarnpkg.com/metro-cache/-/metro-cache-0.82.2.tgz#2d5427164a8bf9f15c6fb96484666cd1187eda6b"
@@ -11278,19 +10684,6 @@ metro-cache@0.82.2:
     https-proxy-agent "^7.0.5"
     metro-core "0.82.2"
 
-metro-config@0.80.6, metro-config@^0.80.3:
-  version "0.80.6"
-  resolved "https://registry.yarnpkg.com/metro-config/-/metro-config-0.80.6.tgz#b404e2f24b22c9c683abcf8da3efa8c87e382ad7"
-  integrity sha512-vHYYvJpRTWYbmvqlR7i04xQpZCHJ6yfZ/xIcPdz2ssbdJGGJbiT1Aar9wr8RAhsccSxdJgfE5B1DB8Mo+DnhIg==
-  dependencies:
-    connect "^3.6.5"
-    cosmiconfig "^5.0.5"
-    jest-validate "^29.6.3"
-    metro "0.80.6"
-    metro-cache "0.80.6"
-    metro-core "0.80.6"
-    metro-runtime "0.80.6"
-
 metro-config@0.82.2, metro-config@^0.82.0:
   version "0.82.2"
   resolved "https://registry.yarnpkg.com/metro-config/-/metro-config-0.82.2.tgz#0766d13f9707d60367a824f506fdd5144f7cb53b"
@@ -11305,14 +10698,6 @@ metro-config@0.82.2, metro-config@^0.82.0:
     metro-core "0.82.2"
     metro-runtime "0.82.2"
 
-metro-core@0.80.6, metro-core@^0.80.3:
-  version "0.80.6"
-  resolved "https://registry.yarnpkg.com/metro-core/-/metro-core-0.80.6.tgz#b13fa98417e70203d2533c5d0f5c4d541f3d9fbe"
-  integrity sha512-fn4rryTUAwzFJWj7VIPDH4CcW/q7MV4oGobqR6NsuxZoIGYrVpK7pBasumu5YbCqifuErMs5s23BhmrDNeZURw==
-  dependencies:
-    lodash.throttle "^4.1.1"
-    metro-resolver "0.80.6"
-
 metro-core@0.82.2, metro-core@^0.82.0:
   version "0.82.2"
   resolved "https://registry.yarnpkg.com/metro-core/-/metro-core-0.82.2.tgz#8c95128a247848f750835c184c29ca23905892ab"
@@ -11322,24 +10707,6 @@ metro-core@0.82.2, metro-core@^0.82.0:
     lodash.throttle "^4.1.1"
     metro-resolver "0.82.2"
 
-metro-file-map@0.80.6:
-  version "0.80.6"
-  resolved "https://registry.yarnpkg.com/metro-file-map/-/metro-file-map-0.80.6.tgz#9d96e54bd3bde6747b6860702a098a333599bba2"
-  integrity sha512-S3CUqvpXpc+q3q+hCEWvFKhVqgq0VmXdZQDF6u7ue86E2elq1XLnfLOt9JSpwyhpMQRyysjSCnd/Yh6GZMNHoQ==
-  dependencies:
-    anymatch "^3.0.3"
-    debug "^2.2.0"
-    fb-watchman "^2.0.0"
-    graceful-fs "^4.2.4"
-    invariant "^2.2.4"
-    jest-worker "^29.6.3"
-    micromatch "^4.0.4"
-    node-abort-controller "^3.1.1"
-    nullthrows "^1.1.1"
-    walker "^1.0.7"
-  optionalDependencies:
-    fsevents "^2.3.2"
-
 metro-file-map@0.82.2:
   version "0.82.2"
   resolved "https://registry.yarnpkg.com/metro-file-map/-/metro-file-map-0.82.2.tgz#acb98d73701373e12f1294f1998b983749e4c7cb"
@@ -11355,13 +10722,6 @@ metro-file-map@0.82.2:
     nullthrows "^1.1.1"
     walker "^1.0.7"
 
-metro-minify-terser@0.80.6:
-  version "0.80.6"
-  resolved "https://registry.yarnpkg.com/metro-minify-terser/-/metro-minify-terser-0.80.6.tgz#27193867ec177c5a9b636725ff1c94c65ce701cc"
-  integrity sha512-83eZaH2+B+jP92KuodPqXknzwmiboKAuZY4doRfTEEXAG57pNVNN6cqSRJlwDnmaTBKRffxoncBXbYqHQgulgg==
-  dependencies:
-    terser "^5.15.0"
-
 metro-minify-terser@0.82.2:
   version "0.82.2"
   resolved "https://registry.yarnpkg.com/metro-minify-terser/-/metro-minify-terser-0.82.2.tgz#9afd1d486357065edfd01b5e9a9f1e18a93018e9"
@@ -11370,11 +10730,6 @@ metro-minify-terser@0.82.2:
     flow-enums-runtime "^0.0.6"
     terser "^5.15.0"
 
-metro-resolver@0.80.6:
-  version "0.80.6"
-  resolved "https://registry.yarnpkg.com/metro-resolver/-/metro-resolver-0.80.6.tgz#b648b8c661bc4cf091efd11affa010dd11f58bec"
-  integrity sha512-R7trfglG4zY4X9XyM9cvuffAhQ9W1reWoahr1jdEWa6rOI8PyM0qXjcsb8l+fsOQhdSiVlkKcYAmkyrs1S/zrA==
-
 metro-resolver@0.82.2:
   version "0.82.2"
   resolved "https://registry.yarnpkg.com/metro-resolver/-/metro-resolver-0.82.2.tgz#994ebdbf23970fc460c50e47d39bf74db3b87e57"
@@ -11382,13 +10737,6 @@ metro-resolver@0.82.2:
   dependencies:
     flow-enums-runtime "^0.0.6"
 
-metro-runtime@0.80.6, metro-runtime@^0.80.3:
-  version "0.80.6"
-  resolved "https://registry.yarnpkg.com/metro-runtime/-/metro-runtime-0.80.6.tgz#efd566a02e63e6f2bd08b5e2a8fe57333f1a2c4e"
-  integrity sha512-21GQVd0pp2nACoK0C2PL8mBsEhIFUFFntYrWRlYNHtPQoqDzddrPEIgkyaABGXGued+dZoBlFQl+LASlmmfkvw==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-
 metro-runtime@0.82.2, metro-runtime@^0.82.0:
   version "0.82.2"
   resolved "https://registry.yarnpkg.com/metro-runtime/-/metro-runtime-0.82.2.tgz#4a86e48cdb124dd5f53fa42befadfd0838c58fdb"
@@ -11397,20 +10745,6 @@ metro-runtime@0.82.2, metro-runtime@^0.82.0:
     "@babel/runtime" "^7.25.0"
     flow-enums-runtime "^0.0.6"
 
-metro-source-map@0.80.6, metro-source-map@^0.80.3:
-  version "0.80.6"
-  resolved "https://registry.yarnpkg.com/metro-source-map/-/metro-source-map-0.80.6.tgz#f129a36bb5b74e3ae0d4cbbcdc62904fa0161fb1"
-  integrity sha512-lqDuSLctWy9Qccu4Zl0YB1PzItpsqcKGb1nK0aDY+lzJ26X65OCib2VzHlj+xj7e4PiIKOfsvDCczCBz4cnxdg==
-  dependencies:
-    "@babel/traverse" "^7.20.0"
-    "@babel/types" "^7.20.0"
-    invariant "^2.2.4"
-    metro-symbolicate "0.80.6"
-    nullthrows "^1.1.1"
-    ob1 "0.80.6"
-    source-map "^0.5.6"
-    vlq "^1.0.0"
-
 metro-source-map@0.82.2, metro-source-map@^0.82.0:
   version "0.82.2"
   resolved "https://registry.yarnpkg.com/metro-source-map/-/metro-source-map-0.82.2.tgz#19c1cb06e462a9f19ff76dfc3827c2561cbebf63"
@@ -11427,18 +10761,6 @@ metro-source-map@0.82.2, metro-source-map@^0.82.0:
     source-map "^0.5.6"
     vlq "^1.0.0"
 
-metro-symbolicate@0.80.6:
-  version "0.80.6"
-  resolved "https://registry.yarnpkg.com/metro-symbolicate/-/metro-symbolicate-0.80.6.tgz#8690af051f33c98c0e8efcd779aebbfdea9fabef"
-  integrity sha512-SGwKeBi+lK7NmM5+EcW6DyRRa9HmGSvH0LJtlT4XoRMbpxzsLYs0qUEA+olD96pOIP+ta7I8S30nQr2ttqgO8A==
-  dependencies:
-    invariant "^2.2.4"
-    metro-source-map "0.80.6"
-    nullthrows "^1.1.1"
-    source-map "^0.5.6"
-    through2 "^2.0.1"
-    vlq "^1.0.0"
-
 metro-symbolicate@0.82.2:
   version "0.82.2"
   resolved "https://registry.yarnpkg.com/metro-symbolicate/-/metro-symbolicate-0.82.2.tgz#1e16d60fb9b96e7067527cfb2257f2b46406a4f6"
@@ -11451,17 +10773,6 @@ metro-symbolicate@0.82.2:
     source-map "^0.5.6"
     vlq "^1.0.0"
 
-metro-transform-plugins@0.80.6:
-  version "0.80.6"
-  resolved "https://registry.yarnpkg.com/metro-transform-plugins/-/metro-transform-plugins-0.80.6.tgz#f9039384692fc8cd51a67d1cd7c35964e7d374e8"
-  integrity sha512-e04tdTC5Fy1vOQrTTXb5biao0t7nR/h+b1IaBTlM5UaHaAJZr658uVOoZhkRxKjbhF2mIwJ/8DdorD2CA15BCg==
-  dependencies:
-    "@babel/core" "^7.20.0"
-    "@babel/generator" "^7.20.0"
-    "@babel/template" "^7.0.0"
-    "@babel/traverse" "^7.20.0"
-    nullthrows "^1.1.1"
-
 metro-transform-plugins@0.82.2:
   version "0.82.2"
   resolved "https://registry.yarnpkg.com/metro-transform-plugins/-/metro-transform-plugins-0.82.2.tgz#2948a012ef40b36ad272fc986920fd7e9b552be4"
@@ -11474,24 +10785,6 @@ metro-transform-plugins@0.82.2:
     flow-enums-runtime "^0.0.6"
     nullthrows "^1.1.1"
 
-metro-transform-worker@0.80.6:
-  version "0.80.6"
-  resolved "https://registry.yarnpkg.com/metro-transform-worker/-/metro-transform-worker-0.80.6.tgz#fc09822ce360eaa929b14408e4af97a2fa8feba6"
-  integrity sha512-jV+VgCLiCj5jQadW/h09qJaqDreL6XcBRY52STCoz2xWn6WWLLMB5nXzQtvFNPmnIOps+Xu8+d5hiPcBNOhYmA==
-  dependencies:
-    "@babel/core" "^7.20.0"
-    "@babel/generator" "^7.20.0"
-    "@babel/parser" "^7.20.0"
-    "@babel/types" "^7.20.0"
-    metro "0.80.6"
-    metro-babel-transformer "0.80.6"
-    metro-cache "0.80.6"
-    metro-cache-key "0.80.6"
-    metro-minify-terser "0.80.6"
-    metro-source-map "0.80.6"
-    metro-transform-plugins "0.80.6"
-    nullthrows "^1.1.1"
-
 metro-transform-worker@0.82.2:
   version "0.82.2"
   resolved "https://registry.yarnpkg.com/metro-transform-worker/-/metro-transform-worker-0.82.2.tgz#4eb09c95c2d9cda1cf0e8e201bd899c0da5b0a0c"
@@ -11511,55 +10804,6 @@ metro-transform-worker@0.82.2:
     metro-transform-plugins "0.82.2"
     nullthrows "^1.1.1"
 
-metro@0.80.6, metro@^0.80.3:
-  version "0.80.6"
-  resolved "https://registry.yarnpkg.com/metro/-/metro-0.80.6.tgz#11cf77700b8be767f6663c1d6f6ed287dd686535"
-  integrity sha512-f6Nhnht9TxVRP6zdBq9J2jNdeDBxRmJFnjxhQS1GeCpokBvI6fTXq+wHTLz5jZA+75fwbkPSzBxBJzQa6xi0AQ==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@babel/core" "^7.20.0"
-    "@babel/generator" "^7.20.0"
-    "@babel/parser" "^7.20.0"
-    "@babel/template" "^7.0.0"
-    "@babel/traverse" "^7.20.0"
-    "@babel/types" "^7.20.0"
-    accepts "^1.3.7"
-    chalk "^4.0.0"
-    ci-info "^2.0.0"
-    connect "^3.6.5"
-    debug "^2.2.0"
-    denodeify "^1.2.1"
-    error-stack-parser "^2.0.6"
-    graceful-fs "^4.2.4"
-    hermes-parser "0.19.1"
-    image-size "^1.0.2"
-    invariant "^2.2.4"
-    jest-worker "^29.6.3"
-    jsc-safe-url "^0.2.2"
-    lodash.throttle "^4.1.1"
-    metro-babel-transformer "0.80.6"
-    metro-cache "0.80.6"
-    metro-cache-key "0.80.6"
-    metro-config "0.80.6"
-    metro-core "0.80.6"
-    metro-file-map "0.80.6"
-    metro-resolver "0.80.6"
-    metro-runtime "0.80.6"
-    metro-source-map "0.80.6"
-    metro-symbolicate "0.80.6"
-    metro-transform-plugins "0.80.6"
-    metro-transform-worker "0.80.6"
-    mime-types "^2.1.27"
-    node-fetch "^2.2.0"
-    nullthrows "^1.1.1"
-    rimraf "^3.0.2"
-    serialize-error "^2.1.0"
-    source-map "^0.5.6"
-    strip-ansi "^6.0.0"
-    throat "^5.0.0"
-    ws "^7.5.1"
-    yargs "^17.6.2"
-
 metro@0.82.2, metro@^0.82.0:
   version "0.82.2"
   resolved "https://registry.yarnpkg.com/metro/-/metro-0.82.2.tgz#3fdf2eb2558d930ba9f156967e861dee8b026081"
@@ -11666,13 +10910,6 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-minimatch@9.0.3:
-  version "9.0.3"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
-  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
-  dependencies:
-    brace-expansion "^2.0.1"
-
 minimatch@^10.1.1:
   version "10.1.1"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-10.1.1.tgz#e6e61b9b0c1dcab116b5a7d1458e8b6ae9e73a55"
@@ -11687,7 +10924,7 @@ minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatc
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@^9.0.0, minimatch@^9.0.4:
+minimatch@^9.0.0, minimatch@^9.0.4, minimatch@^9.0.5:
   version "9.0.5"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
   integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
@@ -11768,6 +11005,11 @@ ms@2.1.3, ms@^2.1.1, ms@^2.1.3:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+mute-stream@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
+  integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
+
 mz@^2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
@@ -11782,16 +11024,16 @@ nanoclone@^0.2.1:
   resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4"
   integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==
 
-nanoid@^3.3.1, nanoid@^3.3.7:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
-  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
-
-nanoid@^3.3.11:
+nanoid@^3.3.1, nanoid@^3.3.11:
   version "3.3.11"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b"
   integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==
 
+nanoid@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+
 napi-build-utils@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/napi-build-utils/-/napi-build-utils-1.0.2.tgz#b1fddc0b2c46e380a0b7a76f984dd47c41a13806"
@@ -11839,11 +11081,6 @@ node-abi@^3.3.0:
   dependencies:
     semver "^7.3.5"
 
-node-abort-controller@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/node-abort-controller/-/node-abort-controller-3.1.1.tgz#a94377e964a9a37ac3976d848cb5c765833b8548"
-  integrity sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==
-
 node-addon-api@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-6.1.0.tgz#ac8470034e58e67d0c6f1204a18ae6995d9c0d76"
@@ -11856,13 +11093,6 @@ node-dir@^0.1.17:
   dependencies:
     minimatch "^3.0.2"
 
-node-fetch@^2.2.0, node-fetch@^2.6.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
-  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
-  dependencies:
-    whatwg-url "^5.0.0"
-
 node-forge@^1.2.1, node-forge@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
@@ -11950,11 +11180,6 @@ nwsapi@^2.2.2:
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.7.tgz#738e0707d3128cb750dddcfe90e4610482df0f30"
   integrity sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==
 
-ob1@0.80.6:
-  version "0.80.6"
-  resolved "https://registry.yarnpkg.com/ob1/-/ob1-0.80.6.tgz#61d7881f458333ed2a73b90cea4aa62f8ca9e045"
-  integrity sha512-nlLGZPMQ/kbmkdIb5yvVzep1jKUII2x6ehNsHpgy71jpnJMW7V+KsB3AjYI2Ajb7UqMAMNjlssg6FUodrEMYzg==
-
 ob1@0.82.2:
   version "0.82.2"
   resolved "https://registry.yarnpkg.com/ob1/-/ob1-0.82.2.tgz#ca2478f9cd904a4a91381fbfa729996c40ed567b"
@@ -11972,6 +11197,11 @@ object-inspect@^1.13.1:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.1.tgz#b96c6109324ccfef6b12216a956ca4dc2ff94bc2"
   integrity sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==
 
+object-inspect@^1.13.3, object-inspect@^1.13.4:
+  version "1.13.4"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.4.tgz#8375265e21bc20d0fa582c22e1b13485d6e00213"
+  integrity sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==
+
 object-is@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.6.tgz#1a6a53aed2dd8f7e6775ff870bea58545956ab07"
@@ -11995,16 +11225,29 @@ object.assign@^4.1.2, object.assign@^4.1.4, object.assign@^4.1.5:
     has-symbols "^1.0.3"
     object-keys "^1.1.1"
 
-object.entries@^1.1.7:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.8.tgz#bffe6f282e01f4d17807204a24f8edd823599c41"
-  integrity sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==
+object.assign@^4.1.7:
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.7.tgz#8c14ca1a424c6a561b0bb2a22f66f5049a945d3d"
+  integrity sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==
   dependencies:
-    call-bind "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
+    has-symbols "^1.1.0"
+    object-keys "^1.1.1"
+
+object.entries@^1.1.9:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.9.tgz#e4770a6a1444afb61bd39f984018b5bede25f8b3"
+  integrity sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.4"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.1.1"
 
-object.fromentries@^2.0.7:
+object.fromentries@^2.0.7, object.fromentries@^2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.8.tgz#f7195d8a9b97bd95cbc1999ea939ecd1a2b00c65"
   integrity sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==
@@ -12014,7 +11257,7 @@ object.fromentries@^2.0.7:
     es-abstract "^1.23.2"
     es-object-atoms "^1.0.0"
 
-object.groupby@^1.0.1:
+object.groupby@^1.0.1, object.groupby@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.3.tgz#9b125c36238129f6f7b61954a1e7176148d5002e"
   integrity sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==
@@ -12023,16 +11266,7 @@ object.groupby@^1.0.1:
     define-properties "^1.2.1"
     es-abstract "^1.23.2"
 
-object.hasown@^1.1.3:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.4.tgz#e270ae377e4c120cdcb7656ce66884a6218283dc"
-  integrity sha512-FZ9LZt9/RHzGySlBARE3VF+gE26TxR38SdmqOqliuTnl9wrKulaQs+4dee1V+Io8VfxqzAfHu6YuRgUy8OHoTg==
-  dependencies:
-    define-properties "^1.2.1"
-    es-abstract "^1.23.2"
-    es-object-atoms "^1.0.0"
-
-object.values@^1.1.6, object.values@^1.1.7:
+object.values@^1.1.7:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.0.tgz#65405a9d92cee68ac2d303002e0b8470a4d9ab1b"
   integrity sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==
@@ -12041,6 +11275,16 @@ object.values@^1.1.6, object.values@^1.1.7:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
+object.values@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.1.tgz#deed520a50809ff7f75a7cfd4bc64c7a038c6216"
+  integrity sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
 on-finished@2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
@@ -12149,6 +11393,15 @@ os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==
 
+own-keys@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/own-keys/-/own-keys-1.0.1.tgz#e4006910a2bf913585289676eebd6f390cf51358"
+  integrity sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==
+  dependencies:
+    get-intrinsic "^1.2.6"
+    object-keys "^1.1.1"
+    safe-push-apply "^1.0.0"
+
 p-defer@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
@@ -12218,6 +11471,13 @@ package-json-from-dist@^1.0.0:
   resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz#4f1471a010827a86f94cfd9b0727e36d267de505"
   integrity sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==
 
+package-manager-detector@^0.2.0:
+  version "0.2.11"
+  resolved "https://registry.yarnpkg.com/package-manager-detector/-/package-manager-detector-0.2.11.tgz#3af0b34f99d86d24af0a0620603d2e1180d05c9c"
+  integrity sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==
+  dependencies:
+    quansync "^0.2.7"
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -12460,6 +11720,13 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier-linter-helpers@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.1.tgz#6a31f88a4bad6c7adda253de12ba4edaea80ebcd"
+  integrity sha512-SxToR7P8Y2lWmv/kTzVLC1t/GDI2WGjMwNhLLE9qtH8Q13C+aEmuRlzDst4Up4s0Wc8sF2M+J57iB3cMLqftfg==
+  dependencies:
+    fast-diff "^1.1.2"
+
 prettier@2.8.8:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
@@ -12475,7 +11742,7 @@ pretty-bytes@5.6.0, pretty-bytes@^5.6.0:
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
   integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
 
-pretty-format@^26.5.2, pretty-format@^26.6.2:
+pretty-format@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.6.2.tgz#e35c2705f14cb7fe2fe94fa078345b444120fc93"
   integrity sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==
@@ -12499,11 +11766,6 @@ proc-log@^4.0.0:
   resolved "https://registry.yarnpkg.com/proc-log/-/proc-log-4.2.0.tgz#b6f461e4026e75fdfe228b265e9f7a00779d7034"
   integrity sha512-g8+OnU/L2v+wyiVK+D5fA34J7EH8jZ8DDlvwhRCMxmMj7UCBvxiO1mGeN+36JXIKF4zevU4kRBd8lVgG9vLelA==
 
-process-nextick-args@~2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
-  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
-
 progress@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
@@ -12606,6 +11868,11 @@ qs@6.13.0:
   dependencies:
     side-channel "^1.0.6"
 
+quansync@^0.2.7:
+  version "0.2.11"
+  resolved "https://registry.yarnpkg.com/quansync/-/quansync-0.2.11.tgz#f9c3adda2e1272e4f8cf3f1457b04cbdb4ee692a"
+  integrity sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==
+
 query-string@^7.1.3:
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.3.tgz#a1cf90e994abb113a325804a972d98276fe02328"
@@ -12638,6 +11905,14 @@ queue@6.0.2:
   dependencies:
     inherits "~2.0.3"
 
+randexp@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/randexp/-/randexp-0.5.3.tgz#f31c2de3148b30bdeb84b7c3f59b0ebb9fec3738"
+  integrity sha512-U+5l2KrcMNOUPYvazA3h5ekF80FHTUG+87SEAmHZmolh1M+i/WyTCxVzmi+tidIa1tM4BSe8g2Y/D3loWDjj+w==
+  dependencies:
+    drange "^1.0.2"
+    ret "^0.2.0"
+
 range-parser@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
@@ -12663,14 +11938,6 @@ rc@^1.2.7, rc@~1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-devtools-core@^4.27.7:
-  version "4.28.5"
-  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.28.5.tgz#c8442b91f068cdf0c899c543907f7f27d79c2508"
-  integrity sha512-cq/o30z9W2Wb4rzBefjv5fBalHU0rJGZCHAkf/RHSBWSSYwh8PlQTqqOJmgIIbBtpj27T6FIPXeomIjZtCNVqA==
-  dependencies:
-    shell-quote "^1.6.1"
-    ws "^7"
-
 react-devtools-core@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-6.1.1.tgz#7dac74773d039273134c360f8b65cf4f6c795c49"
@@ -12689,11 +11956,6 @@ react-hook-form@7.34.2:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.34.2.tgz#9ac6d1a309a7c4aaa369d1269357a70e9e9bf4de"
   integrity sha512-1lYWbEqr0GW7HHUjMScXMidGvV0BE2RJV3ap2BL7G0EJirkqpccTaawbsvBO8GZaB3JjCeFBEbnEWI1P8ZoLRQ==
 
-"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
-  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
-
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -12704,6 +11966,11 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
 react-is@^19.0.0, react-is@^19.1.0:
   version "19.1.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.1.0.tgz#805bce321546b7e14c084989c77022351bbdd11b"
@@ -12891,11 +12158,6 @@ react-native-picker-select@9.0.1:
   dependencies:
     lodash.isequal "^4.5.0"
 
-react-native-platform-touchable@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/react-native-platform-touchable/-/react-native-platform-touchable-1.1.1.tgz#fde4acc65eea585d28b164d0c3716a42129a68e4"
-  integrity sha512-0ZHv2DtJZHPfDY4ltd2WkeFs2SE7ROB31DbQx1163UdbfolqDpOYFAYOaOQKyQW0Z2TpV6zjhzTRGPmYH6TYcg==
-
 react-native-popover-view@5.1.7:
   version "5.1.7"
   resolved "https://registry.yarnpkg.com/react-native-popover-view/-/react-native-popover-view-5.1.7.tgz#12f1df9b7c142ab8fa1a3ded2919a4164823be45"
@@ -12970,50 +12232,6 @@ react-native-webview@^13.15.0:
     escape-string-regexp "^4.0.0"
     invariant "2.2.4"
 
-react-native@*:
-  version "0.73.6"
-  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.73.6.tgz#ed4c675e205a34bd62c4ce8b9bd1ca5c85126d5b"
-  integrity sha512-oqmZe8D2/VolIzSPZw+oUd6j/bEmeRHwsLn1xLA5wllEYsZ5zNuMsDus235ONOnCRwexqof/J3aztyQswSmiaA==
-  dependencies:
-    "@jest/create-cache-key-function" "^29.6.3"
-    "@react-native-community/cli" "12.3.6"
-    "@react-native-community/cli-platform-android" "12.3.6"
-    "@react-native-community/cli-platform-ios" "12.3.6"
-    "@react-native/assets-registry" "0.73.1"
-    "@react-native/codegen" "0.73.3"
-    "@react-native/community-cli-plugin" "0.73.17"
-    "@react-native/gradle-plugin" "0.73.4"
-    "@react-native/js-polyfills" "0.73.1"
-    "@react-native/normalize-colors" "0.73.2"
-    "@react-native/virtualized-lists" "0.73.4"
-    abort-controller "^3.0.0"
-    anser "^1.4.9"
-    ansi-regex "^5.0.0"
-    base64-js "^1.5.1"
-    chalk "^4.0.0"
-    deprecated-react-native-prop-types "^5.0.0"
-    event-target-shim "^5.0.1"
-    flow-enums-runtime "^0.0.6"
-    invariant "^2.2.4"
-    jest-environment-node "^29.6.3"
-    jsc-android "^250231.0.0"
-    memoize-one "^5.0.0"
-    metro-runtime "^0.80.3"
-    metro-source-map "^0.80.3"
-    mkdirp "^0.5.1"
-    nullthrows "^1.1.1"
-    pretty-format "^26.5.2"
-    promise "^8.3.0"
-    react-devtools-core "^4.27.7"
-    react-refresh "^0.14.0"
-    react-shallow-renderer "^16.15.0"
-    regenerator-runtime "^0.13.2"
-    scheduler "0.24.0-canary-efb381bbf-20230505"
-    stacktrace-parser "^0.1.10"
-    whatwg-fetch "^3.0.0"
-    ws "^6.2.2"
-    yargs "^17.6.2"
-
 react-native@0.79.4:
   version "0.79.4"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.79.4.tgz#66aa4918fbb2778956b2a93a885d26acf8ce614c"
@@ -13087,14 +12305,6 @@ react-server-dom-webpack@~19.0.0:
     neo-async "^2.6.1"
     webpack-sources "^3.2.0"
 
-react-shallow-renderer@^16.15.0:
-  version "16.15.0"
-  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457"
-  integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==
-  dependencies:
-    object-assign "^4.1.1"
-    react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
-
 react-test-renderer@19.0.0:
   version "19.0.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-19.0.0.tgz#ca6fa322c58d4bfa34635788fe242a8c3daa4c7d"
@@ -13136,24 +12346,6 @@ readable-stream@^3.0.2, readable-stream@^3.1.1, readable-stream@^3.4.0:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
-readable-stream@~2.3.6:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
-  integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
-
-readline@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/readline/-/readline-1.3.0.tgz#c580d77ef2cfc8752b132498060dc9793a7ac01c"
-  integrity sha512-k2d6ACCkiNYz222Fs/iNze30rRJ1iIicW7JuX/7/cozvih6YCkFZH+J6mAFDVgv0dRBaAyr4jDqC95R2y4IADg==
-
 reanimated-tab-view@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/reanimated-tab-view/-/reanimated-tab-view-0.3.0.tgz#6f72d0d37db89d731841692737c71cd17e59632d"
@@ -13215,20 +12407,21 @@ redux@4.2.0:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
-reflect.getprototypeof@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz#3ab04c32a8390b770712b7a8633972702d278859"
-  integrity sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==
+reflect.getprototypeof@^1.0.6, reflect.getprototypeof@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz#c629219e78a3316d8b604c765ef68996964e7bf9"
+  integrity sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==
   dependencies:
-    call-bind "^1.0.7"
+    call-bind "^1.0.8"
     define-properties "^1.2.1"
-    es-abstract "^1.23.1"
+    es-abstract "^1.23.9"
     es-errors "^1.3.0"
-    get-intrinsic "^1.2.4"
-    globalthis "^1.0.3"
-    which-builtin-type "^1.1.3"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.7"
+    get-proto "^1.0.1"
+    which-builtin-type "^1.2.1"
 
-regenerate-unicode-properties@^10.0.1, regenerate-unicode-properties@^10.1.0:
+regenerate-unicode-properties@^10.0.1:
   version "10.1.1"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz#6b0e05489d9076b04c436f318d9b067bba459480"
   integrity sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==
@@ -13274,6 +12467,18 @@ regexp.prototype.flags@^1.5.2:
     es-errors "^1.3.0"
     set-function-name "^2.0.1"
 
+regexp.prototype.flags@^1.5.3, regexp.prototype.flags@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz#1ad6c62d44a259007e55b3970e00f746efbcaa19"
+  integrity sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-errors "^1.3.0"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    set-function-name "^2.0.2"
+
 regexpu-core@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.1.0.tgz#2f8504c3fd0ebe11215783a41541e21c79942c6d"
@@ -13286,18 +12491,6 @@ regexpu-core@^5.1.0:
     unicode-match-property-ecmascript "^2.0.0"
     unicode-match-property-value-ecmascript "^2.0.0"
 
-regexpu-core@^5.3.1:
-  version "5.3.2"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b"
-  integrity sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==
-  dependencies:
-    "@babel/regjsgen" "^0.8.0"
-    regenerate "^1.4.2"
-    regenerate-unicode-properties "^10.1.0"
-    regjsparser "^0.9.1"
-    unicode-match-property-ecmascript "^2.0.0"
-    unicode-match-property-value-ecmascript "^2.1.0"
-
 regexpu-core@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-6.2.0.tgz#0e5190d79e542bf294955dccabae04d3c7d53826"
@@ -13334,13 +12527,6 @@ regjsparser@^0.8.2:
   dependencies:
     jsesc "~0.5.0"
 
-regjsparser@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709"
-  integrity sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==
-  dependencies:
-    jsesc "~0.5.0"
-
 remove-markdown@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/remove-markdown/-/remove-markdown-0.3.0.tgz#5e4b667493a93579728f3d52ecc1db9ca505dc98"
@@ -13479,6 +12665,11 @@ restore-cursor@^3.1.0:
     onetime "^5.1.0"
     signal-exit "^3.0.2"
 
+ret@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/ret/-/ret-0.2.2.tgz#b6861782a1f4762dce43402a71eb7a283f44573c"
+  integrity sha512-M0b3YWQs7R3Z917WRQy1HHA7Ba7D8hvZg6UE5mLykJxQVE2ju0IXbGlaHPPlkY+WN7wFP+wUMXmBFA0aV6vYGQ==
+
 reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
@@ -13498,6 +12689,11 @@ rimraf@~2.6.2:
   dependencies:
     glob "^7.1.3"
 
+run-async@^2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
+  integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
+
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
@@ -13505,14 +12701,14 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
-rxjs@^7.8.1:
+rxjs@^7.5.5, rxjs@^7.8.1:
   version "7.8.2"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.2.tgz#955bc473ed8af11a002a2be52071bf475638607b"
   integrity sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==
   dependencies:
     tslib "^2.1.0"
 
-safe-array-concat@^1.1.0, safe-array-concat@^1.1.2:
+safe-array-concat@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.2.tgz#81d77ee0c4e8b863635227c721278dd524c20edb"
   integrity sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==
@@ -13522,7 +12718,18 @@ safe-array-concat@^1.1.0, safe-array-concat@^1.1.2:
     has-symbols "^1.0.3"
     isarray "^2.0.5"
 
-safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+safe-array-concat@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.3.tgz#c9e54ec4f603b0bbb8e7e5007a5ee7aecd1538c3"
+  integrity sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
+    has-symbols "^1.1.0"
+    isarray "^2.0.5"
+
+safe-buffer@5.1.2, safe-buffer@~5.1.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
@@ -13532,6 +12739,14 @@ safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@~5.2.0:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
+safe-push-apply@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/safe-push-apply/-/safe-push-apply-1.0.0.tgz#01850e981c1602d398c85081f360e4e6d03d27f5"
+  integrity sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==
+  dependencies:
+    es-errors "^1.3.0"
+    isarray "^2.0.5"
+
 safe-regex-test@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.3.tgz#a5b4c0f06e0ab50ea2c395c14d8371232924c377"
@@ -13567,13 +12782,6 @@ saxes@^6.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@0.24.0-canary-efb381bbf-20230505:
-  version "0.24.0-canary-efb381bbf-20230505"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.24.0-canary-efb381bbf-20230505.tgz#5dddc60e29f91cd7f8b983d7ce4a99c2202d178f"
-  integrity sha512-ABvovCDe/k9IluqSh4/ISoq8tIJnW8euVAWYt5j/bg6dRnqwQwiGO1F/V4AyK96NGF/FB04FhOUDuWj8IKfABA==
-  dependencies:
-    loose-envify "^1.1.0"
-
 scheduler@0.25.0, scheduler@^0.25.0:
   version "0.25.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0.tgz#336cd9768e8cceebf52d3c80e3dcf5de23e7e015"
@@ -13611,7 +12819,7 @@ semver@^7.1.3, semver@^7.6.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.1.tgz#abd5098d82b18c6c81f6074ff2647fd3e7220c9f"
   integrity sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==
 
-semver@^7.3.5, semver@^7.3.7, semver@^7.5.2, semver@^7.5.3, semver@^7.5.4:
+semver@^7.3.5, semver@^7.5.2, semver@^7.5.3, semver@^7.5.4:
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d"
   integrity sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==
@@ -13623,6 +12831,11 @@ semver@^7.6.2, semver@^7.7.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.2.tgz#67d99fdcd35cec21e6f8b87a7fd515a33f982b58"
   integrity sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==
 
+semver@^7.7.3:
+  version "7.7.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.4.tgz#28464e36060e991fa7a11d0279d2d3f3b57a7e8a"
+  integrity sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==
+
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
@@ -13737,6 +12950,15 @@ set-function-name@^2.0.1, set-function-name@^2.0.2:
     functions-have-names "^1.2.3"
     has-property-descriptors "^1.0.2"
 
+set-proto@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/set-proto/-/set-proto-1.0.0.tgz#0760dbcff30b2d7e801fd6e19983e56da337565e"
+  integrity sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+
 setimmediate@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
@@ -13780,7 +13002,7 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-shell-quote@^1.6.1, shell-quote@^1.7.3:
+shell-quote@^1.6.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.1.tgz#6dbf4db75515ad5bac63b4f1894c3a154c766680"
   integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
@@ -13790,6 +13012,35 @@ shell-quote@^1.8.1:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.2.tgz#d2d83e057959d53ec261311e9e9b8f51dcb2934a"
   integrity sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==
 
+side-channel-list@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/side-channel-list/-/side-channel-list-1.0.0.tgz#10cb5984263115d3b7a0e336591e290a830af8ad"
+  integrity sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+
+side-channel-map@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/side-channel-map/-/side-channel-map-1.0.1.tgz#d6bb6b37902c6fef5174e5f533fab4c732a26f42"
+  integrity sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+
+side-channel-weakmap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz#11dda19d5368e40ce9ec2bdc1fb0ecbc0790ecea"
+  integrity sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+    side-channel-map "^1.0.1"
+
 side-channel@^1.0.4, side-channel@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
@@ -13800,6 +13051,17 @@ side-channel@^1.0.4, side-channel@^1.0.6:
     get-intrinsic "^1.2.4"
     object-inspect "^1.13.1"
 
+side-channel@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.1.0.tgz#c3fcff9c4da932784873335ec9765fa94ff66bc9"
+  integrity sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+    side-channel-list "^1.0.0"
+    side-channel-map "^1.0.1"
+    side-channel-weakmap "^1.0.2"
+
 signal-exit@^3.0.2, signal-exit@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -13915,11 +13177,6 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.7.3:
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
-  integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
-
 space-separated-tokens@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz#1ecd9d2350a3844572c3f4a312bceb018348859f"
@@ -14033,6 +13290,14 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
+stop-iteration-iterator@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz#f481ff70a548f6124d0312c3aa14cbfa7aa542ad"
+  integrity sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==
+  dependencies:
+    es-errors "^1.3.0"
+    internal-slot "^1.1.0"
+
 store2@^2.14.3:
   version "2.14.4"
   resolved "https://registry.yarnpkg.com/store2/-/store2-2.14.4.tgz#81b313abaddade4dcd7570c5cc0e3264a8f7a242"
@@ -14091,11 +13356,6 @@ string-length@^5.0.1:
     char-regex "^2.0.0"
     strip-ansi "^7.0.1"
 
-string-natural-compare@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
-  integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
-
 "string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
@@ -14123,32 +13383,45 @@ string-width@^5.0.1, string-width@^5.1.2:
     emoji-regex "^9.2.2"
     strip-ansi "^7.0.1"
 
-string.prototype.matchall@^4.0.10:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz#1092a72c59268d2abaad76582dccc687c0297e0a"
-  integrity sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==
+string.prototype.matchall@^4.0.12:
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz#6c88740e49ad4956b1332a911e949583a275d4c0"
+  integrity sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==
   dependencies:
-    call-bind "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
     define-properties "^1.2.1"
-    es-abstract "^1.23.2"
+    es-abstract "^1.23.6"
     es-errors "^1.3.0"
     es-object-atoms "^1.0.0"
-    get-intrinsic "^1.2.4"
-    gopd "^1.0.1"
-    has-symbols "^1.0.3"
-    internal-slot "^1.0.7"
-    regexp.prototype.flags "^1.5.2"
+    get-intrinsic "^1.2.6"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    internal-slot "^1.1.0"
+    regexp.prototype.flags "^1.5.3"
     set-function-name "^2.0.2"
-    side-channel "^1.0.6"
+    side-channel "^1.1.0"
 
-string.prototype.trim@^1.2.8:
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz#f9ac6f8af4bd55ddfa8895e6aea92a96395393bd"
-  integrity sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==
+string.prototype.repeat@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz#e90872ee0308b29435aa26275f6e1b762daee01a"
+  integrity sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
+string.prototype.trim@^1.2.10:
+  version "1.2.10"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz#40b2dd5ee94c959b4dcfb1d65ce72e90da480c81"
+  integrity sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    define-data-property "^1.1.4"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-object-atoms "^1.0.0"
+    has-property-descriptors "^1.0.2"
 
 string.prototype.trim@^1.2.9:
   version "1.2.9"
@@ -14160,15 +13433,6 @@ string.prototype.trim@^1.2.9:
     es-abstract "^1.23.0"
     es-object-atoms "^1.0.0"
 
-string.prototype.trimend@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz#1bb3afc5008661d73e2dc015cd4853732d6c471e"
-  integrity sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
-
 string.prototype.trimend@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz#3651b8513719e8a9f48de7f2f77640b26652b229"
@@ -14178,7 +13442,17 @@ string.prototype.trimend@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-string.prototype.trimstart@^1.0.7:
+string.prototype.trimend@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz#62e2731272cd285041b36596054e9f66569b6942"
+  integrity sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+string.prototype.trimstart@^1.0.7, string.prototype.trimstart@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
   integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
@@ -14194,13 +13468,6 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
-  dependencies:
-    safe-buffer "~5.1.0"
-
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
@@ -14261,11 +13528,6 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
 
-strnum@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/strnum/-/strnum-1.0.5.tgz#5c4e829fe15ad4ff0d20c3db5ac97b73c9b072db"
-  integrity sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==
-
 strnum@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/strnum/-/strnum-1.1.2.tgz#57bca4fbaa6f271081715dbc9ed7cee5493e28e4"
@@ -14307,11 +13569,6 @@ sudo-prompt@^8.2.0:
   resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-8.2.5.tgz#cc5ef3769a134bb94b24a631cc09628d4d53603e"
   integrity sha512-rlBo3HU/1zAJUrkY6jNxDOC9eVYliG6nS4JA8u8KAshITd07tafMc/Br7xQwCSseXwJ2iCcHCE8SNWX3q8Z+kw==
 
-sudo-prompt@^9.0.0:
-  version "9.2.1"
-  resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-9.2.1.tgz#77efb84309c9ca489527a4e749f287e6bdd52afd"
-  integrity sha512-Mu7R0g4ig9TUuGSxJavny5Rv0egCEtpZRNMrZaYS1vxkiIxGiGUwoezU3LazIQ+KE04hTrTfNPgxU5gzi7F5Pw==
-
 superstruct@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/superstruct/-/superstruct-2.0.2.tgz#3f6d32fbdc11c357deff127d591a39b996300c54"
@@ -14356,6 +13613,13 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
+synckit@^0.11.12:
+  version "0.11.12"
+  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.11.12.tgz#abe74124264fbc00a48011b0d98bdc1cffb64a7b"
+  integrity sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==
+  dependencies:
+    "@pkgr/core" "^0.2.9"
+
 table-layout@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/table-layout/-/table-layout-1.0.2.tgz#c4038a1853b0136d63365a734b6931cf4fad4a04"
@@ -14419,7 +13683,7 @@ tar@^7.4.3:
     mkdirp "^3.0.1"
     yallist "^5.0.0"
 
-temp-dir@^2.0.0, temp-dir@~2.0.0:
+temp-dir@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"
   integrity sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==
@@ -14482,13 +13746,10 @@ throat@^5.0.0:
   resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
   integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==
 
-through2@^2.0.1:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
-  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
-  dependencies:
-    readable-stream "~2.3.6"
-    xtend "~4.0.1"
+through@^2.3.6:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+  integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
 
 tiny-events@^1.0.1:
   version "1.0.1"
@@ -14500,7 +13761,7 @@ tiny-invariant@^1.3.3:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
   integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
 
-tinyglobby@^0.2.11, tinyglobby@^0.2.14:
+tinyglobby@^0.2.11, tinyglobby@^0.2.14, tinyglobby@^0.2.15:
   version "0.2.15"
   resolved "https://registry.yarnpkg.com/tinyglobby/-/tinyglobby-0.2.15.tgz#e228dd1e638cea993d2fdb4fcd2d4602a79951c2"
   integrity sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==
@@ -14586,11 +13847,6 @@ tr46@^3.0.0:
   dependencies:
     punycode "^2.1.1"
 
-tr46@~0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
-  integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
-
 transformation-matrix@^2.8.0:
   version "2.16.1"
   resolved "https://registry.yarnpkg.com/transformation-matrix/-/transformation-matrix-2.16.1.tgz#4a2de06331b94ae953193d1b9a5ba002ec5f658a"
@@ -14603,16 +13859,16 @@ transliteration@2.3.5:
   dependencies:
     yargs "^17.5.1"
 
-ts-api-utils@^1.0.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
-  integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==
-
 ts-api-utils@^1.3.0:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.4.3.tgz#bfc2215fe6528fecab2b0fba570a2e8a4263b064"
   integrity sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==
 
+ts-api-utils@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-2.4.0.tgz#2690579f96d2790253bdcf1ca35d569ad78f9ad8"
+  integrity sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==
+
 ts-dedent@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
@@ -14633,23 +13889,11 @@ tsconfig-paths@^3.15.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^1.8.1:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
-  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
-
 tslib@^2.0.1, tslib@^2.1.0, tslib@^2.4.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
-tsutils@^3.21.0:
-  version "3.21.0"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
-  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
-  dependencies:
-    tslib "^1.8.1"
-
 tunnel-agent@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
@@ -14716,6 +13960,15 @@ typed-array-buffer@^1.0.2:
     es-errors "^1.3.0"
     is-typed-array "^1.1.13"
 
+typed-array-buffer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz#a72395450a4869ec033fd549371b47af3a2ee536"
+  integrity sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-typed-array "^1.1.14"
+
 typed-array-byte-length@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz#d92972d3cff99a3fa2e765a28fcdc0f1d89dec67"
@@ -14727,6 +13980,17 @@ typed-array-byte-length@^1.0.1:
     has-proto "^1.0.3"
     is-typed-array "^1.1.13"
 
+typed-array-byte-length@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz#8407a04f7d78684f3d252aa1a143d2b77b4160ce"
+  integrity sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==
+  dependencies:
+    call-bind "^1.0.8"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.14"
+
 typed-array-byte-offset@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz#f9ec1acb9259f395093e4567eb3c28a580d02063"
@@ -14739,6 +14003,19 @@ typed-array-byte-offset@^1.0.2:
     has-proto "^1.0.3"
     is-typed-array "^1.1.13"
 
+typed-array-byte-offset@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz#ae3698b8ec91a8ab945016108aef00d5bff12355"
+  integrity sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.15"
+    reflect.getprototypeof "^1.0.9"
+
 typed-array-length@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.6.tgz#57155207c76e64a3457482dfdc1c9d1d3c4c73a3"
@@ -14751,6 +14028,18 @@ typed-array-length@^1.0.5:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
+typed-array-length@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.7.tgz#ee4deff984b64be1e118b0de8c9c877d5ce73d3d"
+  integrity sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    is-typed-array "^1.1.13"
+    possible-typed-array-names "^1.0.0"
+    reflect.getprototypeof "^1.0.6"
+
 typed-redux-saga@1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/typed-redux-saga/-/typed-redux-saga-1.5.0.tgz#f70b47c92c6e29e0184d0c30d563c18d6ad0ae54"
@@ -14788,6 +14077,19 @@ typescript@~5.9.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.9.3.tgz#5b4f59e15310ab17a216f5d6cf53ee476ede670f"
   integrity sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==
 
+typia@~9.7.2:
+  version "9.7.2"
+  resolved "https://registry.yarnpkg.com/typia/-/typia-9.7.2.tgz#e6770ae64225de25955f83a2b53ce37147d9e4d2"
+  integrity sha512-eLIKd0KHZtSvbsA+FYwX+Y0ZBt0BwVGz3GgODQX+6GfGL4DOzKW02LEx62oUZg6vCQX1BL5xyiPXAIdW+Hc51g==
+  dependencies:
+    "@samchon/openapi" "^4.7.1"
+    "@standard-schema/spec" "^1.0.0"
+    commander "^10.0.0"
+    comment-json "^4.2.3"
+    inquirer "^8.2.5"
+    package-manager-detector "^0.2.0"
+    randexp "^0.5.3"
+
 typical@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/typical/-/typical-4.0.0.tgz#cbeaff3b9d7ae1e2bbfaf5a4e6f11eccfde94fc4"
@@ -14823,6 +14125,16 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
+unbox-primitive@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.1.0.tgz#8d9d2c9edeea8460c7f35033a88867944934d1e2"
+  integrity sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==
+  dependencies:
+    call-bound "^1.0.3"
+    has-bigints "^1.0.2"
+    has-symbols "^1.1.0"
+    which-boxed-primitive "^1.1.1"
+
 undici-types@~5.26.4:
   version "5.26.5"
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
@@ -14995,7 +14307,7 @@ use-sync-external-store@^1.5.0:
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz#55122e2a3edd2a6c106174c27485e0fd59bcfca0"
   integrity sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==
 
-util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+util-deprecate@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
@@ -15084,11 +14396,6 @@ web-vitals@^4.2.4:
   resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-4.2.4.tgz#1d20bc8590a37769bd0902b289550936069184b7"
   integrity sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==
 
-webidl-conversions@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
-  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
-
 webidl-conversions@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
@@ -15152,14 +14459,6 @@ whatwg-url@^11.0.0:
     tr46 "^3.0.0"
     webidl-conversions "^7.0.0"
 
-whatwg-url@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
-  integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
-  dependencies:
-    tr46 "~0.0.3"
-    webidl-conversions "^3.0.0"
-
 which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
@@ -15171,25 +14470,37 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
-which-builtin-type@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.1.3.tgz#b1b8443707cc58b6e9bf98d32110ff0c2cbd029b"
-  integrity sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==
+which-boxed-primitive@^1.1.0, which-boxed-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz#d76ec27df7fa165f18d5808374a5fe23c29b176e"
+  integrity sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==
   dependencies:
-    function.prototype.name "^1.1.5"
-    has-tostringtag "^1.0.0"
+    is-bigint "^1.1.0"
+    is-boolean-object "^1.2.1"
+    is-number-object "^1.1.1"
+    is-string "^1.1.1"
+    is-symbol "^1.1.1"
+
+which-builtin-type@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.2.1.tgz#89183da1b4907ab089a6b02029cc5d8d6574270e"
+  integrity sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==
+  dependencies:
+    call-bound "^1.0.2"
+    function.prototype.name "^1.1.6"
+    has-tostringtag "^1.0.2"
     is-async-function "^2.0.0"
-    is-date-object "^1.0.5"
-    is-finalizationregistry "^1.0.2"
+    is-date-object "^1.1.0"
+    is-finalizationregistry "^1.1.0"
     is-generator-function "^1.0.10"
-    is-regex "^1.1.4"
+    is-regex "^1.2.1"
     is-weakref "^1.0.2"
     isarray "^2.0.5"
-    which-boxed-primitive "^1.0.2"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.9"
+    which-boxed-primitive "^1.1.0"
+    which-collection "^1.0.2"
+    which-typed-array "^1.1.16"
 
-which-collection@^1.0.1:
+which-collection@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.2.tgz#627ef76243920a107e7ce8e96191debe4b16c2a0"
   integrity sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==
@@ -15204,7 +14515,7 @@ which-module@^2.0.0:
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.1.tgz#776b1fe35d90aebe99e8ac15eb24093389a4a409"
   integrity sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==
 
-which-typed-array@^1.1.14, which-typed-array@^1.1.15, which-typed-array@^1.1.9:
+which-typed-array@^1.1.14, which-typed-array@^1.1.15:
   version "1.1.15"
   resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.15.tgz#264859e9b11a649b388bfaaf4f767df1f779b38d"
   integrity sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==
@@ -15228,6 +14539,19 @@ which-typed-array@^1.1.16, which-typed-array@^1.1.2:
     gopd "^1.2.0"
     has-tostringtag "^1.0.2"
 
+which-typed-array@^1.1.19:
+  version "1.1.20"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.20.tgz#3fdb7adfafe0ea69157b1509f3a1cd892bd1d122"
+  integrity sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.4"
+    for-each "^0.3.5"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    has-tostringtag "^1.0.2"
+
 which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
@@ -15262,7 +14586,7 @@ wordwrapjs@^4.0.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^6.2.0:
+wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
   integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
@@ -15320,13 +14644,6 @@ ws@^3.3.3:
     safe-buffer "~5.1.0"
     ultron "~1.1.0"
 
-ws@^6.2.2:
-  version "6.2.2"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e"
-  integrity sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==
-  dependencies:
-    async-limiter "~1.0.0"
-
 ws@^6.2.3:
   version "6.2.3"
   resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.3.tgz#ccc96e4add5fd6fedbc491903075c85c5a11d9ee"
@@ -15334,7 +14651,7 @@ ws@^6.2.3:
   dependencies:
     async-limiter "~1.0.0"
 
-ws@^7, ws@^7.5.1:
+ws@^7:
   version "7.5.9"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
   integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
@@ -15414,11 +14731,6 @@ xregexp@5.0.2:
   dependencies:
     "@babel/runtime-corejs3" "^7.12.1"
 
-xtend@~4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
-  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
-
 y18n@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
@@ -15530,12 +14842,12 @@ yup@0.32.11:
     property-expr "^2.0.4"
     toposort "^2.0.2"
 
-"zod-validation-error@^3.0.3 || ^4.0.0":
+"zod-validation-error@^3.5.0 || ^4.0.0":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-4.0.2.tgz#bc605eba49ce0fcd598c127fee1c236be3f22918"
   integrity sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==
 
-"zod@^3.22.4 || ^4.0.0":
-  version "4.1.12"
-  resolved "https://registry.yarnpkg.com/zod/-/zod-4.1.12.tgz#64f1ea53d00eab91853195653b5af9eee68970f0"
-  integrity sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==
+"zod@^3.25.0 || ^4.0.0":
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-4.3.6.tgz#89c56e0aa7d2b05107d894412227087885ab112a"
+  integrity sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==